js中的定时器与Dom基本属性

最新推荐文章于 2022-09-05 10:31:13 发布

吃瓜瓜瓜

最新推荐文章于 2022-09-05 10:31:13 发布

阅读量317

点赞数 1

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_53125449/article/details/112426049

版权

定时器

在js中定时器有两种：

setInterval()
setTimeout()

1、setInterval()

格式： var 变量名 = setInterval(“执行的语句”,每隔多久执行一次);

【注意】： 可以写执行的代码，也可以传入函数。

返回值： 启动定时器，系统分配的编号。
关闭定时器的方式：
1.关闭页面。
2.关闭定时器。
注： clearInterval函数需要一个参数：定时器的编号。

  var timer = setInterval(refresh,1000); //开启定时器并赋值
  var int2 = 0;
  function refresh() {
            console.log(int2);
            int2++;
            if(int2 ==5){
                clearInterval(timer);//关闭定时器，并填写定时器编号。
            }
        }

2、setTimeout（）

只在指定时间后执行一次。
关闭：clearTimeout();
【注意】 clearTimeout函数需要一个参数：定时器的编号。

var ti = setTimeout(helloWord,1000);
        clearTimeout(ti);

我们可以尝试做出一个秒表：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: seagreen;
        }

        .box {
            margin: 0 auto;
            width: 400px;
            height: 200px;
        }

        .text,
        .but {
            height: 100px;
        }

        .text {
            font-size: 70px;
            text-align: center;
        }

        #bu,
        #bu1 {
            width: 50px;
            height: 50px;
            font-size: 20px;
            border-radius: 50%;
            outline: none;
            background-color: skyblue;
            margin: 0 73px;
            border: skyblue solid 1px;
            color: seagreen;
        }
    </style>
    <script>
        window.onload = function () {
            var spans = document.getElementsByTagName('span');
            ms = 0;
            sec = 0;
            min = 0;
            var time = null;
            //开始键
            click("bu1").onclick = function () {
                if (click("bu1").innerHTML == "开") {
                    click("bu1").innerHTML = "暂";
                    clearInterval(time);
                    time = setInterval(show, 10);
                } else {
                    click("bu1").innerHTML = "开";
                    clearInterval(time);
                }
            }
            //复位键
            click("bu").onclick = function () {
                ms = 0;
                sec = 0;
                min = 0;
                spans[4].innerHTML = '00';
                spans[2].innerHTML = '00';
                spans[0].innerHTML = '00';
            }
            时间

            function show() {
                ms++;
                if (ms == 100) {
                    sec++;
                    ms = 0;
                }
                if(sec == 60){
                    min++;
                    sec = 0;
                }
                var msstr = ms;
                if (ms < 10) {
                    msstr = '0' + ms;
                }
                var secstr = sec;
                if (sec < 10) {
                    secstr = '0' + sec;
                }
                var minstr = min;
                if (min < 10) {
                    minstr = '0' + min;
                }
                spans[4].innerHTML = msstr;
                spans[2].innerHTML = secstr;
                spans[0].innerHTML = minstr;

            }

            function click(str) {
                return document.getElementById(str);
            }
        }
    </script>
</head>

<body>
    <div class="box">
        <div class="text">
            <span>00</span>
            <span>:</span>
            <span>00</span>
            <span>:</span>
            <span>00</span>
        </div>
        <div class="but">
            <button id="bu">复</button>
            <button id="bu1">开</button>
        </div>
    </div>
</body>

</html>

DOM

JavaScript 由三大部分组成:

ES：语法标准，函数，对象。
BOM：borwser object model 浏览器对象模型操作浏览器部分功能的
DOM：文档对象类型，操作网页上的元素。

window对象：

是JavaScript中的顶级对象
全局变量，自定义函数都属于window的属性或方法。
我们在使用window对象下的属性或方法时，可以省略window

常见的BOM对象：

window 代表整个浏览器窗口，window对象是BOM中的顶级对象。
Navigator 表示浏览器的一些信息。
Location 表示浏览器当前的地址信息。
History 浏览器的历史记录信息。
Screen 表示用户的屏幕信息。

window对象的常用方法：
1.弹出系统对话框。

alert()
prompt()
confirm()

2.打开窗口

window.open(url,target,param)
url :要打开的地址
target:新窗口的位置。 _blank,_self,_parent(父框架下)；
param:新窗口的一些设置。
（1）name：新窗口的名字，可以为空
（2）【注意】name需要写在target前面。
返回值：新窗口的句柄。

3。关闭窗口

window.close(); 关闭当前窗口
open返回值.close(); 关闭新窗口

吃瓜瓜瓜

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js中的定时器与Dom基本属性

定时器在js中定时器有两种：setInterval()setTimeout()1、setInterval()格式： var 变量名 = setInterval(“执行的语句”,每隔多久执行一次);【注意】：可以写执行的代码，也可以传入函数。返回值：启动定时器，系统分配的编号。关闭定时器的方式：1.关闭页面。2.关闭定时器。注： clearInterval函数需要一个参数：定时器的编号。 var timer = setInterval(refresh,1000); //
复制链接

扫一扫