设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 为何点击了盒子。没有移动，指正下，非常感谢
返回列表 发新帖
查看: 3400|回复: 3

[已解决]为何点击了盒子。没有移动，指正下，非常感谢

[复制链接]
小黄练编程
发表于 2022-4-10 14:23:06 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>练习</title>
  6.                 <style>
  7.                 div{
  8.                         width:100px;
  9.                         height:200px;
  10.                         background-color:red;
  11.                 }
  12.                 </style>
  13.         </head>
  14.         <body>
  15.                 <div>1</div>
  16.                 <script>
  17.                 var div=document.querySelector('div');
  18.                 function animate(obj,target){
  19.                         div.addEventListener('click',function(){
  20.                         var timer=setInterval(function(){
  21.                                 if(obj.offsetleft>=target){
  22.                                         clearInterval(timer);
  23.                                 }
  24.                                 obj.style.left= obj.offsetleft + 1 + 'px';
  25.                         },30);
  26.                 });
  27.         };
  28.                 animate(div,300);
  29.                 </script>


  32.         </body>
  33. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
kogawananari
2022-4-10 15:01:04
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>练习</title>
  7.     <style>
  8.         div {
  9.             width: 100px;
  10.             height: 200px;
  11.             background-color: red;
  12.             position: relative;
  13.         }
  14.     </style>
  15. </head>

  17. <body>
  18.     <div style="left:0">1</div>
  19.     <script>
  20.         var div = document.querySelector('div');
  21.         function animate(obj, target) {
  22.             obj.addEventListener('click', function () {
  23.                 var timer = setInterval(function () {
  24.                     if (Number.parseInt(obj.style.left) >= target) {
  25.                         console.log(1);
  26.                         clearInterval(timer);
  27.                     }
  28.                     obj.style.left = Number.parseInt(obj.style.left) + 1 + 'px';
  29.                 }, 60);
  30.             });
  31.         };
  32.         animate(div, 30);
  33.     </script>


  36. </body>

  38. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

kogawananari
发表于 2022-4-10 15:01:04 | 显示全部楼层    本楼为最佳答案   
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>练习</title>
  7.     <style>
  8.         div {
  9.             width: 100px;
  10.             height: 200px;
  11.             background-color: red;
  12.             position: relative;
  13.         }
  14.     </style>
  15. </head>

  17. <body>
  18.     <div style="left:0">1</div>
  19.     <script>
  20.         var div = document.querySelector('div');
  21.         function animate(obj, target) {
  22.             obj.addEventListener('click', function () {
  23.                 var timer = setInterval(function () {
  24.                     if (Number.parseInt(obj.style.left) >= target) {
  25.                         console.log(1);
  26.                         clearInterval(timer);
  27.                     }
  28.                     obj.style.left = Number.parseInt(obj.style.left) + 1 + 'px';
  29.                 }, 60);
  30.             });
  31.         };
  32.         animate(div, 30);
  33.     </script>


  36. </body>

  38. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-10 16:52:42 | 显示全部楼层
kogawananari 发表于 2022-4-10 15:01

Number.parseInt(obj.style.left)这是啥意思啊
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

kogawananari
发表于 2022-4-10 17:03:40 | 显示全部楼层
小黄练编程 发表于 2022-4-10 16:52
Number.parseInt(obj.style.left)这是啥意思啊

str转int 单位会被去掉
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 02:35

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表