Loading... <h2><center>js对dom的操作以及定时器的使用</center></h2><p>第一种类型</p><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { overflow: hidden; cursor: pointer; } * { margin: 0; padding: 0; } #cont { width: 150px; height: 200px; background: red; position: absolute; top: 200px; } #side { width: 20px; height: 90px; background: green; position: absolute; left: -20px; } </style> <script> window.onload = function() { let w = document.body.offsetWidth; //获取页面的宽度 console.log(w); //获取页面的长度 let cont = document.getElementById('cont'); let cw = cont.offsetWidth; //获取cont的长度 cont.style.left = w + 'px'; //cont所在的位置是页面的长度 let timer = null //设置定时器为null cont.onmouseover = function() { clearInterval(timer) //关闭定时器，防止定时器冲突 timer = setInterval(() => { if (cont.offsetLeft <= w - cw) { clearInterval(timer) } else { cont.style.left = cont.offsetLeft - 10 + 'px'; } }, 100); } cont.onmouseout = function() { clearInterval(timer) timer = setInterval(() => { if (cont.offsetLeft == w) { clearInterval(timer) } else { cont.style.left = cont.offsetLeft + 10 + 'px'; } }, 100); } } </script> </head> <body> <div id="cont"> <div id="side">查看更多</div> </div> </body> </html> </code></pre><h2>第二种类型</h2><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { overflow: hidden; } * { margin: 0; padding: 0; } #a { width: 40px; height: 40px; position: absolute; top: 200px; font-size: 40px; cursor: pointer; } #b { width: 40px; height: 40px; position: absolute; top: 200px; } </style> <script> window.onload = function() { let w = document.body.offsetWidth; let a = document.getElementById('a'); //红方块 let aw = a.offsetWidth //红方块的长度 a.style.left = w - aw + 'px' //红方块的位置 let b = document.getElementById('b'); //绿方块 let bw = b.offsetWidth //绿方块的长度 b.style.left = w + 'px' //绿方块的位置 let greenLift, redleft, greenRight = null //重置一下没个定时器 a.onclick = function() { //红方块的点击事件 clearInterval(greenLift, greenRight, redleft) //先清除一下定时器防止冲突 redleft = setInterval(() => { if (a.offsetLeft >= w) { clearInterval(redleft) } else { a.style.left = a.offsetLeft + 10 + 'px' } }, 100); //红方块向右移动 greenLift = setInterval(() => { if (b.offsetLeft <= w - bw) { clearInterval(greenLift) } else { b.style.left = b.offsetLeft - 10 + 'px' } }, 100); //绿方块向左移动 } b.onclick = function() { //小绿方块的点击事件 clearInterval(greenLift, greenRight, redleft) greenRight = setInterval(() => { if (b.offsetLeft >= w) { clearInterval(greenRight) } else { b.style.left = b.offsetLeft + 10 + 'px' } }, 100); redLeft = setInterval(() => { if (a.offsetLeft <= w - aw) { clearInterval(redLeft) } else { a.style.left = a.offsetLeft - 10 + 'px' } }, 100); } } console.log('在我写的时候上帝和我都知道要写什么,但是现在只有上帝才知道'); </script> </head> <body> <div id="a">&times;</div> <div id="b"><img src="bot.jpg"></div> </body> </html> </code></pre><p>拜拜</p> 猜你想看 JS网页计算器 每日一学：PHP 中的array_intersect_uassoc函数详解 Golang 中 printf 占位符详解 vue3使用ajax发送网络请求 linux安装企业版宝塔 ants2.0 SCDN策略介绍及配置 每日一学：PHP 中的array_replace_recursive函数详解 每日一学：PHP 中的array_uintersect_uassoc函数详解 typecho打开没有静态资源文件 JS离开窗口改变title 最后修改：2022 年 06 月 05 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏
