不二如是 发表于 2017-7-28 09:51:43

技法57 (◐‿◑) 用Js实现div自动移动（600px循环）

http://xxx.fishc.com/forum/201705/05/225545py2j222x5z6x55n2.png

按照提示，完成代码，秀秀你的编程能力！

不许看答案，否则打屁屁



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

源代码：
**** Hidden Message *****




○面试题索引贴●
如果喜欢，请订阅{:10_303:} ：
HTML5 - 庖丁解牛 + JavaScript - 庖丁解牛

yuyisuo 发表于 2017-9-6 11:20:39

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8" />
        <title>Javascript Test</title>
        <style>
                .container {
                        position : relative;
                        margin : 50px auto;
                        width : 600px;
                        height : 90px;
                        overflow : hidden;
                        background-color : #ccc;
                }
                .runner {
                        position : absolute;
                        top : 5px;
                        left : 0;
                        width : 80px;
                        height : 80px;
                        background-color : #00fdff;
                }
        </style>
</head>

<body>
        <div class="container">
                <div class="runner" id="runner"></div>
        </div>

        <script>
                window.onload = function () {

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

                        timer = setInterval(function () {

                                let left = runner.offsetLeft;

                                if (left === 520) {
                                        runner.style.left = '0px';
                                        left = 0;
                                }

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

                        }, 30);

                };
        </script>
</body>
</html>

shinningpika 发表于 2017-9-4 09:45:57

看一看offset

ellie 发表于 2017-11-14 21:59:32

要看要看

向一朵朵鲜花 发表于 2018-5-5 11:18:45

看看

dsa159245 发表于 2018-7-9 06:37:53

window.onload = function(){
                                var d = document.getElementById("d1");
                                d.style.left = "200px";
                                var n = 0;
                                var dir = 5;
                                var t = setInterval(function(){
                                       
                                if(n > 600){
                                        dir = -5;
                                }
                                if(n < 0){
                                        dir = 5;
                                }
                                n+=dir;
                                        d.style.left = n + "px";
                                },20);
                        };

热爱前端的肥仔 发表于 2018-8-25 08:47:20

看一下它的原理

sjh13140 发表于 2018-9-6 11:58:45

上

a211827754 发表于 2018-9-25 18:27:17

嘿嘿嘿

wangdxf 发表于 2019-4-14 15:46:47

{:5_102:}

hugejile1206 发表于 2019-4-19 22:38:03

做完了

小林白白 发表于 2019-11-8 10:37:34

看看

暴燥的马虫虫 发表于 2019-11-19 19:45:46

答案

小球鱼 发表于 2020-3-1 16:55:52

LIH

weiter 发表于 2020-3-10 22:44:40

6666

stevexyh 发表于 2020-3-17 23:16:32

芝麻开门
页: [1]
查看完整版本: 技法57 (◐‿◑) 用Js实现div自动移动（600px循环）