第16天,计时器代码，轮播代码

19年8月

发布日期: 2019-08-29

阅读次数:

日报：写了两个计时器的简单代码和轮播图片的简单代码,还是比较急躁,看东西慌乱,不仔细了解其原理,导致今天学习效率较差.

1.计时器代码setinterval:

<body>
    <input type="text" id="aa">
    <script>
        var vv = setInterval("cc()", 1000);

        function cc() {
            var t = new Date();
            var f = t.toLocaleTimeString();
            document.getElementById("aa").value = f;
        }
        function ss() {
            clearInterval(vv);
        }
    </script>
    <button onclick="ss()">点我停止</button>
</body>

2.计时器代码setTimeout:

<body>
    <p>如果你想弹窗请点击</p>
    <button onclick="cc()">点击开始</button>

    <script>
        function cc() {
            setTimeout(function() {
                alert("弹出啊皮卡丘")
            }, 3000);
        }
    </script>
</body>

3.轮播图片的一个简单代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <img src="/home/yueyang/图片/1.jpg" id="pi">
    <script>
        window.onload = function() {
            setInterval(cho, 2000);
        }
        var ii = 1;

        function cho() {
            ii++;
            document.getElementById("pi").src = "/home/yueyang/图片/" + ii + ".jpg";
            if (ii == 4) {
                ii = 1;
            }
        }
    </script>
</body>

</html>