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

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

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

效果图：

代码：

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

分享到：

返回列表

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

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

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

javaWeb如何连接数据库

一.概要首先可以通过dos环境下查看我的数据库有：其次可以查看其中一个数据库（就以数据库mydatabase为例吧）的内容，数据库下有一个tbl_user_info表，表的内容如下：我们就以这个表的内容为例，用java代码实现对这个表的查询。二.导入jar包&nb...

javaWeb邮箱验证

我们的日常生活中用到很多用户注册啦之类的，为了提高安全性和用户体验，我们也会遇到邮箱通过邮箱确定验证信息的例子。首先我们看一下需要哪些jar包，其中activation.jar和mail.jar是邮件发送不可少的，servlet和jstl在程序中也有用到，所以大家先将jar包导入项目中区。然后就是我...

Kali Linux渗透-DNS域名劫持与钓鱼

前言严正声明：本文仅限于技术讨论与分享，严禁用于非法途径。本文目的演示如何借助 Kali Linux 系统内置的一款基于ARP地址欺骗的网络嗅探工具Ettercap，对局域网内的 Win7 主机进行 DNS 域名劫持，从而使得受害主机访问新浪官网（或其他任意网站）的域名时跳转到 Kali 攻击机指定...

万策云网络工作室旗下高性能服务器，保证用户数据安全

万策云工作室旗下所有业务均使用1T高防高性能服务器，数据定时备份，多台服务器实时同步数据，保障用户数据安全！多台服务器定时备份，企业级安全，50m独享，大带宽抗cc文件实时同步备份，数据库定时备份。主服务器采用T级群防，150G单机防御的国内高性能服务器。秒解机器！真实可测客户数据丢了都可以找回来...