JS通过定时器移动div

最新推荐文章于 2021-12-27 21:17:22 发布

❀XXH❀

最新推荐文章于 2021-12-27 21:17:22 发布

阅读量391

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/xxhsym/article/details/104717035

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
#div{
width:150px;
height:150px;
background-color:yellowgreen;
position:absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var speed=5;
var dir=0;
setInterval(function(){
switch(dir){
 case 37:
 div.style.left=div.offsetLeft-speed+"px";
 break;
 case 39:
 div.style.left=div.offsetLeft+speed+"px";
 break;
 case 38:
 div.style.top=div.offsetTop-speed+"px";
 break;
 case 40:
 div.style.top=div.offsetTop+speed+"px";
 break;
 }

},30);

document.onkeydown=function(event){
event=event||window.event;
 if(event.ctrlKey){
 speed=30;
 }
 else{
	 speed=5;
 }
 dir=event.keyCode;
 document.onkeyup=function(){
	 dir=0;
	 
 }
 
}
}
</script>
  </head>
  
  <body>
   <div id="div"></div>
  </body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

❀XXH❀

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS通过定时器移动div

<!DOCTYPE html><html> <head> <title>MyHtml.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" con...
复制链接

扫一扫