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. python中的*args和** kwargs区别

    写了几个月的oython了总感觉除了if else for while什么都不太会,看了架构师的代码参数传递总是使用*args,**kwargs,一直搞不太明白,只是模仿着用,最近有时间想系统的学习一 ...

  2. Linux设备驱动程序学习----1.设备驱动程序简介

    设备驱动程序简介 更多内容请参考Linux设备驱动程序学习----目录 1. 简介   Linux系统的优点是,系统内部实现细节对所有人都是公开的.Linux内核由大量复杂的代码组成,设备驱动程序可以 ...

  3. JVM执行原理

    ,Java是一种技术,它由四方面组成:Java编程语言.Java类文件格式.Java虚拟机和Java应用程序接口(Java API).它们的关系如下图所示: 运行期环境代表着Java平台,开发人员编写 ...

  4. 11. Java常用类

    1. Scanner类 1.1 基本语法 java.util.Scanner 是 Java5 的新特征,我们可以通过 Scanner 类来获取用户的输入. Scanner s = new Scanne ...

  5. 从CNI到OVN

    kubernetes各版本离线安装包 诸如calico flannel等CNI实现,通过牺牲一些功能让网络复杂度得以大幅度降低是我极其推崇的,在云原生时代应用不再关心基础设施的场景下是一个明智之举,给 ...

  6. 高性能MySQL之基础架构

    一.背景 为什么我们需要先学习MYSQL的基础架构先呢? 原因很简单,当我们需要了解一件事物的时候,我们只有站在宏观的层面,才能层层剥丝抽茧的去理解问题.举个例子,我们要看一个框架的源码,一开始就想进 ...

  7. tensorflow学习笔记——使用TensorFlow操作MNIST数据（2）

    tensorflow学习笔记——使用TensorFlow操作MNIST数据(1) 一:神经网络知识点整理 1.1,多层:使用多层权重,例如多层全连接方式 以下定义了三个隐藏层的全连接方式的神经网络样例 ...

  8. Thread、ThreadPool、Task、Parallel、Async和Await基本用法、区别以及弊端

    多线程的操作在程序中也是比较常见的,比如开启一个线程执行一些比较耗时的操作(IO操作),而主线程继续执行当前操作,不会造成主线程阻塞.线程又分为前台线程和后台线程,区别是:整个程序必须要运行完前台线程 ...

  9. 给面试官讲明白：一致性Hash的原理和实践

    "一致性hash的设计初衷是解决分布式缓存问题,它不仅能起到hash作用,还可以在服务器宕机时,尽量少地迁移数据.因此被广泛用于状态服务的路由功能" 01分布式系统的路由算法 假设 ...

  10. Git使用(码云)

    1.安装git软件(码云/GitHub) 2.码云注册,保存代码 3.创建代码托管仓库,仓库名相当于码云上的文件夹 4.写作业并提交 在作业文件夹上,右键选择‘get bash here’ 在黑框里输 ...