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

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

廖万里2年前 (2022-09-09)学习笔记106943

效果图：

代码：

<!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 转载需授权！

分享到：

添加博主微信共同交流探讨信息差网赚项目： 19528888767 ，请猛戳这里→点我添加

返回列表

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

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

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

PHP环境搭建（推荐宝塔面板）

初学者推荐安装集成环境，不建议分别安装，集成环境包含php、mysql、apache、其他php、mysql、apache分别安装的需要相互之间配置，对初学者不友好，一般开发也不需要，特殊生产环境才需要；Windows：宝塔面板（推荐）、phpstudy（https://www.xp.cn/）Mac...

如何配置mybatis并且自动生成实体类pojo和mapper

1如何配置mybatis1.1 复制jar 点击下载mybatis和mysql的jar包：mybatis和mysql的jar包 - 万策云盘编辑1.2 复制配置文件 resources配置文件下载： resources配置文件 - 万策云盘编辑1.3...

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

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