JavaScript String 小球重力弹回


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.box{

width: 50px;

height: 50px;

border-radius: 50%;

background:purple;

position: absolute;

top: 0;

left: 0;

}

.line{

width: 500px;

border: 1px solid #333;

position: absolute;

top: 450px;

left: 0;

}

</style>

</head>

<body>

<div class="box"></div>

<div class="line"></div>

</body>

<script type="text/javascript">

var obox=document.querySelector(".box");

var speed=5;//计步器

var target=400;//下落高度

document.onclick=function(){

setInterval(function(){

speed+=10;

var now=obox.offsetTop+speed;

if(now>=target){

now=target;

speed*=-1;//当小球到达底部停止，使他方向相反运动

speed*=0.9;//使小球有一定的速度

}

obox.style.top=now+"px";

},30)

}

</script>

</html>

JavaScript String 小球重力弹回的更多相关文章

  1. 弹性ScrollView,和下啦刷新的效果类似 实现下拉弹回和上拉弹回

    今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个很多需求都用的这种效果 其实这是一个自定义的scrollView,上代码,这是我写在一个公共的组件包里的 package com.p ...

  2. 弹性ScrollView,和下啦刷新的效果相似 实现下拉弹回和上拉弹回

    今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个非常多需求都用的这样的效果 事实上这是一个自己定义的scrollView,上代码.这是我写在一个公共的组件包里的 package c ...

  3. 充满想象力的 JavaScript 物理和重力实验

    在这个列表中挑选了9个物理和重力实验,用来展示 Javascript 的强大.几年前,所有这些实验都必须使用 Java 或 Flash 才能做.在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的 ...

  4. JavaScript String 对象

    JavaScript String 对象 String 对象 String 对象用于处理文本(字符串). String 对象创建方法: new String(). 语法 var txt = new S ...

  5. javascript string 函数集

    JavaScript_String对象说明 string中文为"字符串"的意思,String继承自Object对象,此对象提供字符串的查找操作等函数 JavaScript字符串类型 ...

  6. 一款jQuery实现重力弹动模拟效果特效,弹弹弹，弹走IE6

    一款jQuery实现重力弹动模拟效果特效 鼠标经过两块黑色div中间的红色线时,下方的黑快会突然掉落, 并在掉落地上那一刻出现了弹跳的jquery特效效果,非常不错,还兼容所有的浏览器, 适用浏览器: ...

  7. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  8. 【timeisprecious】【JavaScript 】JavaScript String 对象

    JavaScript>String 对象 1 .From Runnob JavaScript String 对象(概览) JavaScript String 对象(教程)

  9. JavaScript 实现简单的 弹出框关闭框

    JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...

随机推荐

  1. 算法-一步步教你如何用c语言实现堆排序（非递归）

    看了左神的堆排序,觉得思路很清晰,比常见的递归的堆排序要更容易理解,所以自己整理了一下笔记,带大家一步步实现堆排序算法 首先介绍什么是大根堆:每一个子树的最大值都是子树的头结点,即根结点是所有结点的最 ...

  2. 7kyu (难度系数kyu阶段数值越大难度越低) 数组分组及求和

    几个人排成一排,分成两队.第一个人进入一队,第二个人进入第二队,第三个人进入第一队,以此类推. 给定一个正整数的数组(人的权重),返回两个整数的新数组/元组,其中第一个是第1组的总重量,第二个是第2组 ...

  3. 滚动视图、列表视图[ListView、SimpleAdapter类]

    滚动视图 <ScrollView android: layout_width="fill_parent" android: layout_height="fill_ ...

  4. 最火的分布式 HTAP 数据库 TiDB - 入门实践教程

    偶然在某篇博客看到了 TiDB,一个融合 OLTP 和 OLAP 的分布式开源数据库, GitHub 上 Star 很多,然后 watch 了,发现 commit 和 pull request 一直都 ...

  5. python_0基础学习_day01

    Python是一门动态解释型的强类型定义语言 一.变量 变量命名规则 由数字.字母.下划线组成 不能以数字开头 要具有描述性 要区分大小写 禁止使用python的关键字(在pycharm中关键字明明变 ...

  6. kubernetes CRD开发指南

    扩展kubernetes两个最常用最需要掌握的东西:自定义资源CRD 和 adminsion webhook, 本文教你如何十分钟掌握CRD开发. kubernetes允许用户自定义自己的资源对象,就 ...

  7. .NETCoreCSharp 中级篇2-3 Linq简介

    .NETCoreCSharp 中级篇2-3 本节内容为Linq及其拓展方法.Linq中表达式树的使用 简介 语言集成查询(LINQ)是一系列直接将查询功能集成到C#语言的技术统称.数据查询历来都表示为 ...

  8. Mysql索引进阶入门

    1. 索引操作 MySQL 索引 菜鸟 2. 索引类型 PRIMARY 唯一且不能为空:一张表只能有一个主键索引 INDEX 普通索引 UNIQUE 唯一性索引 FULLTEXT 全文索引:用于搜索很 ...

  9. 进程间通信与ipcs使用7例

    进程间通信(IPC, inter-process communication)实现进程间消息的传递,对于用户地址空间相互独立的两个进程而言,实现通信可以通过以下方式: 由内核层面分配内存,两进程共享该 ...

  10. 压力测试-jmeter

    1. 场景描述 新申请的服务器,要压测下python算法程序最多能执行多少条数据,有几年没用压力测试工具-jmeter了,重新下载了最新版本,记录下,也希望能帮到准备使用jmeter做压测的朋友. 2 ...