js实现自由落体
2024-09-05 02:58:34
实现自由落体运动需要理解的几个简单属性:
clientHeight:浏览器客户端整体高度
offsetHeight:对象(比如div)的高度
offsetTop:对象离客户端最顶端的距离
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>free_movement</title>
<style type="text/css">
#div1{
position: absolute;
height: 100px;
width: 100px;
background: red;
}
</style>
<script type="text/javascript">
window.onload=function () {
var btn=document.getElementById('btn');
var div1=document.getElementById('div1'); var Time=null;
var speed=0;
btn.onclick=function () {
startMove();
} function startMove () {
clearInterval(Time); //clearTnterval(Time)://防止多次点击事件的产生
Time=setInterval(function(){
speed+= 3;
var T = div1.offsetTop + speed;
if(T > document.documentElement.clientHeight - div1.offsetHeight){
T = document.documentElement.clientHeight - div1.offsetHeight;
speed *= -1;
speed *= 0.75;
}
div1.style.top=T+'px';
}, 30)
}
}
</script>
</head>
<body>
<input type='button' value='开始运动' id="btn">
<div id="div1"></div>
</body>
</html>
转自:
javascript---之自由落体运动实现
最新文章
- 也谈谈AlphaGo
- 调用约定__cdecl和__stdcall
- Windows下几个常用的和进程有关的命令
- 机械键盘那些事[我用过的minila Filco cherry 3494 阿米洛87]
- Java基础之读文件——使用缓冲读取器读取文件(ReaderInputFromFile)
- xcode针对不同IOS版本的代码编译问题
- bzoj 1486: [HNOI2009]最小圈 dfs求负环
- java_tomcat_the_APR based Apache Tomcat 小喵咪死活启动报错_临时方案
- ubuntu11.0静态IP地址配置
- docker学习-----docker可视化portainer
- 测试计划的编写6要素(5W1H)
- embed标签详解
- js回溯法计算最佳旅行线路
- mysql数据库备份和恢复
- SVN如何忽略dll文件和bin目录
- hiho #1196 : 高斯消元&#183;二
- fzu 2082 过路费 (树链剖分+线段树 边权)
- 深度分析:Android4.3下MMS发送到附件为音频文件(音频为系统内置音频)的彩信给自己,添加音频-发送彩信-接收彩信-下载音频附件-预览-播放(三,接收彩信<;2,下载彩信>;)
- Java的GC
- 页码插入JS脚本
热门文章
- MUI离线原生打包,利用Android Studio进行原生打包MUI项目
- CCPC-Wannafly Summer Camp 2019 全记录
- Java—重写与重载的区别
- 一起使用Python里for循环和dictionary字典
- Django项目: 2.模板抽取
- leetcode 854. K-Similar Strings
- java笔试之求int型正整数在内存中存储时1的个数
- RTNETLINK answers: File exists错误解决方法
- python的functools.partial的应用
- 2018-12-18-WPF-一个空的-WPF-程序有多少个窗口