JS基础学习:定时器案例

作者: Merbng | 来源:发表于2019-04-08 23:55 被阅读0次

JS基础学习:定时器案例
2018.4.25 JS定时器学习
React 属性于事件
React Router 路由
React 组件
React 样式
React 配置
你真的了解同步和异步吗？
jQuery轮播（一）
jsvascript学习（八）- 基础内容综合案例

星星

<!DOCTYPE html>
<html lang="zh">
    <head>
        <title></title>
        <style type="text/css">
            div {
                width: 600px;
                height: 500px;
                border: 2px solid yellow;
                background-color: black;
                position: relative;
            }

            span {
                font-size: 30px;
                color: yellow;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <input type="button" name="" id="btn" value="亮起来" />
        <div id="dv"></div>
        <script src="js/common.js"></script>
        <script type="text/javascript">
            my$('btn').onclick = function() {

                setInterval(function() {
                    my$('dv').innerHTML = "<span></span>";
                    var x = parseInt(Math.random() * 600 + 1);
                    var y = parseInt(Math.random() * 600 + 1);
                    my$('dv').firstElementChild.style.left = x + "px";
                    my$('dv').firstElementChild.style.top = y + "px";
                }, 200);
            };
        </script>
    </body>
</html>

图片摇起来

<!DOCTYPE html>
<html lang="zh">
    <head>
        <title></title>
    </head>
    <style type="text/css">
        img {
            width: 200px;
            height: 200px;
        }

        div {
            position: absolute;
        }
    </style>
    <body>
        <input type="button" name="" id="btn1" value="摇起来" />
        <input type="button" name="" id="btn2" value="停止" />
        <div id="dv">
            <img src="../img/ercode.png">
            <img src="../img/ercode.png">
        </div>
        <script src="js/common.js"></script>
        <script type="text/javascript">
            var interId = "";
            my$('btn1').onclick = function() {
                interId = setInterval(function() {
                    var x = parseInt(Math.random() * 100 + 1);
                    var y = parseInt(Math.random() * 100 + 1);
                    my$('dv').style.left = x + "px";
                    my$('dv').style.top = y + "px";
                }, 100)

            };
            my$('btn2').onclick = function() {
                clearInterval(interId);
            };
        </script>
    </body>
</html>

美女时钟

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <img id="im" src="">
        <script src="js/common.js"></script>
        <script>
            function f1() {
                var dt = new Date();
                var hour = dt.getHours();
                hour = hour < 10 ? "0" + hour : hour;
                var second = dt.getSeconds();
                second = second < 10 ? "0" + second : second,
                    my$('im').src = "meimei/" + hour + "_" + second + ".jpg";
            }
            f1();
            setInterval(f1, 1000);
        </script>
    </body>
</html>

demo地址