【javascript】计时器和计时器的应用

最新推荐文章于 2024-06-05 15:33:33 发布

草莓味少女vv

最新推荐文章于 2024-06-05 15:33:33 发布

阅读量348

点赞数 1

分类专栏： B/S ——JavaScript

本文链接：https://blog.csdn.net/hdy14/article/details/86520492

版权

B/S 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

——JavaScript

1 篇文章 0 订阅

订阅专栏

前言

在vb中曾经学习过计时器，但是在BS中，计时器又是什么样的呢？

正文

在页面加载计时器，并显示当前时间，同时可以用按钮控制开始和停止。

在这里插入图片描述
Js代码：
1.页面加载事件
(里边包含javascript所有的代码，即以下所有代码)

onload = function(){}

2.将计时器的时间给页面的标签

 window.date.innerHTML = new Date().toLocaleString();

3.计时器运行代码（1秒/变化）

 var intervalId = setInterval(function () {
                if (isRun) {
                    window.date.innerHTML = new Date().toLocaleString();
                }

            }, 1000);

4.按钮点击事件
（注释的代码是没有优化之前的，当然也可以成功运行）
获取按钮中的事件就是：document.getElementById("")

 document.getElementById("btn").onclick = function () {

                /*
                if (this.value == "点击停止") {

                    isRun = !isRun;

                    this.value = "点击开始";
                } else {
                    //就是要开始
                    isRun = !isRun;
                    this.value = "点击停止";
                };
                */

                isRun = !isRun;
                this.value = "点击" + "开始,停止".split(',')[Number(isRun)];
            };

5.body中添加标签和按钮

<body>
    <p>现在时刻：<span id="date"></span></p>
    <input type="button" name="name" value="点击停止" id="btn"/>
</body>

计时器的应用：倒数跳转

我们在很多网页可以看到一些倒数为0之后页面跳转的例子，那么这是怎么做的呢？
先看一个倒数跳转的小李子
在这里插入图片描述
实现方法：
在计时器的基础上加一个数字倒数和跳转页面的代码即可。

1.代码如下
新建一个html页

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        onload = function () {
            var span = document.getElementById("second");        
               var intervalId =  setInterval(function () {
                  //设置计时器
                  //倒数的代码
                    var num = span.innerHTML - 1;
                    span.innerHTML = num;

                    if (num <= 0) {
                        //跳转
                        //停下计数器
                        clearInterval(intervalId);
                        location.href = "https://blog.csdn.net/hdy14";
                    }
            },1000);
            
        };


        
    </script>
</head>
<body>
    <p>请等待<span id="second">10</span>秒后跳转</p>
</body>
</html>

计时器的应用2：走马灯

效果如下
在这里插入图片描述
代码：

<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        onload = function () {
            var p = document.getElementById("p");
            setInterval(function () {
                var txt = p.innerHTML;
                var head = txt.charAt(0);
                var body = txt.substr(1);

                p.innerHTML = body + head;
            }, 200);
        };

    </script>
</head>
<body>
    <p id="p">欢迎来到Winni的世界，这里有你想要的快乐鸭?~~~~</p>

</body>