<html>
<head>
<title> javaScript缓动入门 </title>
</head>
<body>
<style type=text/css>
#taxiway {
background: #e8e8ff; width: 800px; height: 100px
}
#move {
background: #a9ea00; width:100px; height:98px; border:1px solid red
}
</style>
<div id="taxiway">
<div id="move" style="position: absolute; left: 0" onClick="start()"></div>
</div>
<p class=notice display="text-align:center">点击可移动绿色方块</p>
<p id="time0"></p>
<p id="time1"></p>
<p id="time2"></p>
</body>
<script>
/*var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
*/ //这里的动画距离是没有误差了,但是在执行时间的时候有很大的误差,所以只能改成时间戳的动画!
var o_show_time0 = document.getElementById('time0');
var o_show_time1 = document.getElementById('time1');
var o_show_time2 = document.getElementById('time2'); //动画参数设置http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm
//这个动画好执行距离没有误差,但是在执行动画的时候有误差
var Tween = {
Quad: {
easeOut: function(t, b, c, d) {
t/=d; // t=t/d 1/100 //这样就走了100份之一
//当t等于d的时候那么他们相除就等于1 刚刚好是初始值动画和结束值相加的值
return b+c*(t);
} }
} //b:div之样式left初值,c:div要移动的距离,d:div在时间d内完成移动,t:时间
// d:div在时间d内完成移动 的时间是 d=1000*10 (Run,10)的10
var b=0,c=500,d=1000,t=0;
function Run(){
var left = Math.ceil(Tween.Quad.easeOut(t,b,c,d));
move.style.left = left + "px";
console.log('d='+d);
console.log('t='+t);
console.log('left='+left);
o_show_time1.innerHTML = new Date();
if(t>=d){
o_show_time2.innerHTML = new Date();
clearInterval(timer);
timer = null;
// setTimeout(Run, 1);
}
t++;
}
var timer = null;
function start(){
o_show_time0.innerHTML = new Date();
timer = setInterval(Run,10);
} </script> </html>

最新文章

  1. 让用VS2013编写的程序在XP中顺利运行
  2. 咱们来聊聊JS中的异步,以及如何异步,菜鸟版
  3. UIDynamic动画
  4. 安装python官方的mysql库“mysql-connector-python”
  5. Servlet------(声明式)异常处理
  6. JVM底层又是如何实现synchronized的
  7. Solr高亮显示highlight的三种实现
  8. Canvas中点到点的路径运动
  9. obj文件的连接问题以及tlib的基本用法
  10. 学习ASP.NET的一些学习资源
  11. SQL Server SQLOS
  12. InterviewProblems
  13. [LeetCode]题解(python):007-Reverse Integer
  14. QCMediaPlayer mediaplayer NOT present(android)
  15. Centos下_MysqL5.7在使用mysqldump命令备份数据库报错:mysqldump: [Warning] Using a password on the command line interface can be insecure.
  16. 15 ActionBar 总结
  17. 显著性检测(saliency detection)评价指标之sAUC(shuffled AUC)的Matlab代码实现
  18. ArcGIS API for JavaScript 入门教程[4] 代码的骨架
  19. .Net高级进阶,教你如何构建企业模型数据拦截层,动态控制字段验证
  20. oracle日期格式化

热门文章

  1. java面向对象编程(四)--类变量、类方法
  2. git不添加.idea等IDE配置文件夹
  3. Python 事件
  4. python 前端 html
  5. 使用 JavaScript 截屏
  6. [LeetCode&amp;Python] Problem 925. Long Pressed Name
  7. 20155208徐子涵 《网络对抗》Exp1 PC平台逆向破解
  8. 《DSP using MATLAB》Problem 7.6
  9. VS2010添加虚拟机发布的WebService引用
  10. 多版本opencv管理; find_package()的原理解析