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

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

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

效果图：

代码：

<!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实现单击移动和暂停小球并显示小球的左边界距离距离上边距距离元素可见宽度元素可见高度元素的偏移容器” 的相关文章

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

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

全网首发羊了个羊通关方法（推荐技巧四，最简单）

游戏介绍这是啥游戏？据悉，这是一款卡通背景的消除闯关游戏。玩家们需要点击上方卡牌，被选中的卡牌会下移到底部的木框中，框内最多可以储存7张卡牌，当有3张相同的卡牌同置于框内时，则可达成消除。效果截图羊了个羊无限道具版在线体验 --- >>>立即体验...

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

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