1116学习记录 简单练车模型
2016-11-16 10:53
316 查看
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:30px; height:20px; background:red; position:absolute; top:150px; left:50px;} #div2 {width:2px; height: 500px; background-color: blue;position: absolute;left: 100px;} #div3 {width:2px; height: 500px; background-color: blue;position: absolute;left: 300px;} </style> <script> var timer=null; function startDown() { var oDiv=document.getElementById('div1'); var speed = 1; clearInterval(timer); timer=setInterval(function (){ if(oDiv.offsetTop>=300) { clearInterval(timer); } else { oDiv.style.top=oDiv.offsetTop+speed+'px'; } }, 30); } function startUp() { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=-1; if(oDiv.offsetTop<=50) { clearInterval(timer); } else { oDiv.style.top=oDiv.offsetTop+speed+'px'; } }, 30); } function startLeft() { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=5; if(oDiv.offsetLeft>=300) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); } function startRight() { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=-5; if(oDiv.offsetLeft<=100) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); } </script> </head> <body> <input id="btn1" type="button" value="开始往下" onclick="startDown()" /> <input id="btn2" type="button" value="开始往上" onclick="startUp()" /> <input id="btn3" type="button" value="开始往右" onclick="startLeft()" /> <input id="btn4" type="button" value="开始往左" onclick="startRight()" /> <div id="div1"> </div> <div id="div2"> </div> <div id="div3"> </div> </body> </html>
相关文章推荐
- django学习记录-django-1.5中简单地自定义自己的用户模型
- 数据库的简单操作-学习记录
- ASP.net 中的AJAX学习记录之四 updateProgress控件的简单用法
- Android系列学习讲座之五--App布局初探之简单模型
- python 学习记录(4)—本金+利息计算及简单的游戏猜测程序
- Android学习系列(5)--App布局初探之简单模型【转】
- MOSS Search学习记录(二):配置爬网并尝试一个简单的搜索
- Windows 8 Directx 开发学习笔记(五)山峰河谷模型的简单实现
- AndEngine学习 : BasePhysicsJoint(简单地和物理模型的联系)
- Android学习系列(5)--App布局初探之简单模型
- away3d 4.0学习(4)加载简单的外部模型
- 概念记录 - 学习时遇到的概念和知识的简单记录
- MOSS Search学习记录(二):配置爬网并尝试一个简单的搜索
- SqlServer2005 分页语句,自己简单测试了,感觉速度很快,就记录下来了,便于以后学习。
- Android学习系列(5)--App布局初探之简单模型
- ASP.net 中的AJAX学习记录之四 updateProgress控件的简单用法
- 简单学习记录
- 学习了下简单的光照模型
- 第1章学习 简单工厂模型
- sqlserver 简单的存储过程学习记录