<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>