<html> <head> <title> javaScript缓动入门 </title> </head> <body> <style type=text/css> #taxiway { background: #e8e8ff; 800px; height: 100px } #move { background: #a9ea00; 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>