当前位置：首页 > 学习笔记 > 正文内容

js实现单击移动和暂停小球并显示小球的左边界距离距离上边距距离元素可见宽度元素可见高度元素的偏移容器

廖万里3年前 (2022-09-09)学习笔记107030

效果图：

代码：

Markup

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js实现单击移动和暂停小球并显示小球的左边界距离距离上边距距离元素可见宽度元素可见高度元素的偏移容器 </title>
		<!-- 来源：kkkliao，廖万里，廖万里主页。
			官网：www.kkkliao.cn
			一封云来信：nmx.kkkliao.cn -->
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#box{
				width: 100px;;
				height: 100px;
				border: 1px solid rgb(83,83,83);
				line-height: 100px;
				text-align: center;
				font-size: 18px;
				border-radius: 100px;
				position: absolute;
				top: 300px;
				left: 100px;
			}
			h3{
				margin-top: 200px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<h3 id="content"></h3>
		<div id="box" onclick="isMove()">
			单击移动
		</div>
	</body>
	<script type="text/javascript">
		var box=document.getElementById("box");
		var flag=false;
		var t;
		function isMove(){
			if(!flag){
				flag=true;
				box.innerHTML="单击停止";
				move();
			}else{
				flag=false;
				box.innerHTML="单击移动";
				stop();
			}
		}
		function move(){
			var style=window.getComputedStyle(box);
			var left=parseInt(style.left);
			left++;
			box.style.left=left+"px";
			t=setTimeout(move,20);
		}
		function stop(){
			clearTimeout(t);
			var content=document.getElementById("content");
			content.innerHTML="距离左边界距离"+box.offsetLeft+"距离上边距距离"+box.offsetTop+"<br>元素可见宽度"+box.offsetWidth+
			"元素可见高度"+box.offsetHeight+"<br> 元素的偏移容器"+box.offsetParent
		}
		
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js实现单击移动和暂停小球并显示小球的左边界距离距离上边距距离元素可见宽度元素可见高度元素的偏移容器 </title>
		<!-- 来源：kkkliao，廖万里，廖万里主页。
			官网：www.kkkliao.cn
			一封云来信：nmx.kkkliao.cn -->
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#box{
				width: 100px;;
				height: 100px;
				border: 1px solid rgb(83,83,83);
				line-height: 100px;
				text-align: center;
				font-size: 18px;
				border-radius: 100px;
				position: absolute;
				top: 300px;
				left: 100px;
			}
			h3{
				margin-top: 200px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<h3 id="content"></h3>
		<div id="box" onclick="isMove()">
			单击移动
		</div>
	</body>
	<script type="text/javascript">
		var box=document.getElementById("box");
		var flag=false;
		var t;
		function isMove(){
			if(!flag){
				flag=true;
				box.innerHTML="单击停止";
				move();
			}else{
				flag=false;
				box.innerHTML="单击移动";
				stop();
			}
		}
		function move(){
			var style=window.getComputedStyle(box);
			var left=parseInt(style.left);
			left++;
			box.style.left=left+"px";
			t=setTimeout(move,20);
		}
		function stop(){
			clearTimeout(t);
			var content=document.getElementById("content");
			content.innerHTML="距离左边界距离"+box.offsetLeft+"距离上边距距离"+box.offsetTop+"<br>元素可见宽度"+box.offsetWidth+
			"元素可见高度"+box.offsetHeight+"<br> 元素的偏移容器"+box.offsetParent
		}
		
	</script>
</html>

复制成功！

本文链接：https://www.kkkliao.cn/?id=16 转载需授权！

阅读剩余的36%

返回列表

上一篇：使用js技术制作的贪吃蛇小游戏_贪吃蛇html代码

下一篇：js技术调用高德api实现精准定位

“js实现单击移动和暂停小球并显示小球的左边界距离距离上边距距离元素可见宽度元素可见高度元素的偏移容器” 的相关文章

JavaWeb项目打包成war包的方法

当开发人员在自己的开发机器上调试所有代码并通过后，为了交给测试人员测试和未来进行产品发布，都需要将开发人员的源码打包成War包进行发布。javaWeb项目（maven项目）打包的方式有以下几种：1.直接使用Ecilpse打包（有三种）在ecilpse中右键项目，选择Export——>...

网站一直被篡改首页文件index以及indax怎么办

近期发现公司网站首页文件经常被篡改为indax.php或indax.html,导致网站的功能无法正常使用，百度搜索关键词,在显示结果中点击公司网站,打开后跳转到别的网站上去了，尤其我们在百度做的推广，导致客户无法访问到我们公司网站上，给公司带来很大的影响，领导让尽快解决这个问题。这样的问题已经连续出...

如何选择服务器？大厂与小厂的区别是什么

什么云服务器好？这个无法以偏概全的直接指定一家服务商，针对云服务器的选择自己有些建议可以供您参考：首先，要了解自己的业务具体是什么？应用场景是什么?对于安全要求又是什么?其实上云是大势所趋，在前几年大家对于云的使用可能更关注于安全，在当前网络安全快速发展的今天，大可以放开安全这个层面的东西，去考虑使...

Python所有的库都在这里了！！强烈建议收藏

前言嗨喽，大家好呀~又到了学Python时刻~随着大数据和人工智能的发展，Python也与多种科技深深绑定。比如自动化测试，运维，爬虫，数据分析，机器学习，金融领域，后端开发，云计算，游戏开发都有涉及。万丈高楼平地起，Python这座大厦能够如此强大，就是拥有强大的成千上万的库的支持无数牛x的轮子在...

MyBatis-写分页的几种方法，怎么写分页最简单

1、就是直接使用我们的SQL语句进行分页，也就是在Mapper里面加上分页的语句就好了。比如MySQL添加一个limit 2,4。这种方式弊端很大，比如我们不用MySQL了，所有的代码都要修改。2、MyBatis中的分页的插件PageHelper，3、自己手写分页框架。这种用的比较少，不是说写不出来...