<!doctype html> <html> <head> <meta charset="utf-8"/> <title>恒定速度</title> <style> .box { position: absolute; left: 0; top: 30px; width: 50px; height: 50px; border: solid black 1px; background-color: #aaa; } </style> </head> <body> <div> <span>想要速度</span><input type="text" value="10" id="wantsudu"> <div id="cv-box" class="box" ></div> <input id="cv-button" value="Start Animation" οnclick="startConstantVelocityAnimation()" type="button"/> </div> <script> var setupButton = function(button, label, onclickHandler) { button.value = label; button.onclick = onclickHandler; button.disabled = false; }; var startConstantVelocityAnimation=function () { //想取想要的速度 var velocity=parseFloat(document.getElementById("wantsudu").value); console.log(velocity); //获取要实现动画的对象必要时进行初始化 var box=document.getElementById("cv-box"); box.style.left=box.style.left || "0px"; //开始动画 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式 var intervalID=setInterval(function () { var newLeft=parseInt(box.style.left)+velocity; if((newLeft<0)||(newLeft>'2000px')){ velocity=-velocity; }else{ box.style.left=newLeft+"px"; } },500); //切换启动按钮停止动画 setupButton(document.getElementById("cv-button"),"Stop Animation", function () { clearInterval(intervalID); //切换启动按钮以停止动画 setupButton(document.getElementById("cv-button"), "Start Animation",startConstantVelocityAnimation ); } ) } </script> </body> </html>
转载于:https://my.oschina.net/u/3161974/blog/860731