鱼C论坛

 找回密码
 立即注册
查看: 2138|回复: 16

[每日一练] 技法57 (◐‿◑) 用Js实现div自动移动(600px循环)

[复制链接]
发表于 2017-7-28 09:51:43 | 显示全部楼层 |阅读模式

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

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

x

                               
登录/注册后可看大图


按照提示,完成代码,秀秀你的编程能力!

不许看答案,否则打屁屁





程序分析:
实现div移动,周期内移动
1.定时器
2.onload事件
3.offsetLeft
4.style.left       


源代码:
游客,如果您要查看本帖隐藏内容请回复

7月-28-2017 09-51-08.gif






如果喜欢,请订阅
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-9-6 11:20:39 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8" />
  5.         <title>Javascript Test</title>
  6.         <style>
  7.                 .container {
  8.                         position : relative;
  9.                         margin : 50px auto;
  10.                         width : 600px;
  11.                         height : 90px;
  12.                         overflow : hidden;
  13.                         background-color : #ccc;
  14.                 }
  15.                 .runner {
  16.                         position : absolute;
  17.                         top : 5px;
  18.                         left : 0;
  19.                         width : 80px;
  20.                         height : 80px;
  21.                         background-color : #00fdff;
  22.                 }
  23.         </style>
  24. </head>

  25. <body>
  26.         <div class="container">
  27.                 <div class="runner" id="runner"></div>
  28.         </div>

  29.         <script>
  30.                 window.onload = function () {

  31.                         let runner = document.getElementById('runner');
  32.                         let speed = 2;
  33.                         let timer = null;

  34.                         timer = setInterval(function () {

  35.                                 let left = runner.offsetLeft;

  36.                                 if (left === 520) {
  37.                                         runner.style.left = '0px';
  38.                                         left = 0;
  39.                                 }

  40.                                 runner.style.left = left + speed + 'px';

  41.                         }, 30);

  42.                 };
  43.         </script>
  44. </body>
  45. </html>
复制代码

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-9-6 11:38

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 支持楼主!

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-9-4 09:45:57 | 显示全部楼层
看一看offset
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-11-14 21:59:32 | 显示全部楼层
要看要看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-5-5 11:18:45 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-7-9 06:37:53 | 显示全部楼层
  1. window.onload = function(){
  2.                                 var d = document.getElementById("d1");
  3.                                 d.style.left = "200px";
  4.                                 var n = 0;
  5.                                 var dir = 5;
  6.                                 var t = setInterval(function(){
  7.                                        
  8.                                 if(n > 600){
  9.                                         dir = -5;
  10.                                 }
  11.                                 if(n < 0){
  12.                                         dir = 5;
  13.                                 }
  14.                                 n+=dir;
  15.                                         d.style.left = n + "px";
  16.                                 },20);
  17.                         };
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-25 08:47:20 | 显示全部楼层
看一下它的原理
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-6 11:58:45 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-9-25 18:27:17 | 显示全部楼层
嘿嘿嘿
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-14 15:46:47 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-4-19 22:38:03 | 显示全部楼层
做完了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-11-8 10:37:34 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-11-19 19:45:46 | 显示全部楼层
答案
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-3-1 16:55:52 | 显示全部楼层
LIH
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-3-10 22:44:40 | 显示全部楼层
6666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-3-17 23:16:32 | 显示全部楼层
芝麻开门
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-3-29 14:06

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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