JS基础-修改div移动练习-尚硅谷-P129

最新推荐文章于 2025-06-06 23:16:04 发布

原创最新推荐文章于 2025-06-06 23:16:04 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JS 专栏收录该内容

23 篇文章

订阅专栏

本视频讲解了如何使用JavaScript实现div元素的平滑移动，并修复了初学者常遇到的点击开始移动时的卡顿问题。内容涵盖前端开发中的JavaScript基础应用。

视频链接
视频
这次解决了之前的刚开始按的时候卡顿的问题
上次的：
键盘移动div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#box1{
			height: 100px;
			width: 100px;
			background-color: #6495ED;
			position: absolute;
		}
		</style>
		
		<script type="text/javascript">
		/**
		 * 使div根据不同按键移动
		 * 按上向上移
		 * 按下向下移
		 * 左右移动修改left 上下移动修改top
		 * ........
		 */
			window.onload=function(){
				/**
				 * 开启一个定时器
				 * 控制div的移动
				 */
				var speed=10;
				var dir;
				setInterval(function(){
					/**
					 * 37左 * 38上* 39右 * 40下
					 */
					switch(dir){
						case 37:
							box1.style.left=box1.offsetLeft-speed+"px";
							break;
						case 39:
							box1.style.left=box1.offsetLeft+speed+"px";
							break;
						case 38:
							box1.style.top=box1.offsetTop-speed+"px";
							break;
						case 40:
							box1.style.top=box1.offsetTop+speed+"px";
							break;
					}
				},30);
				
				
				var box1=document.getElementById("box1");
				document.onkeydown=function(event){
					event=event||window.event;		
				
					//当用户按了Ctrl之后速度加快
					if(event.ctrlKey){
						speed=50;
					}else{
						speed=10;
					}
					//使dir等于按键的值
					dir=event.keyCode;
				}
				//松手的时候取消
				document.onkeyup=function(){
					dir=0;
				}
			}
		</script>
	</head>
	<body>
		<div id="box1"> </div>
	</body>
</html>