定时器、秒表、BOM、倒计时

最新推荐文章于 2023-10-25 11:30:55 发布

半塘潮汐

最新推荐文章于 2023-10-25 11:30:55 发布

阅读量440

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_41340792/article/details/112316319

版权

笔记专栏收录该内容

45 篇文章 0 订阅

订阅专栏

定时器

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

		// 定时器声明（执行语句，间隔时间），间隔多久执行一次
  		var time1 = setInterval(refresh, 1000);
        var time2 = setInterval(refresh, 1000);
         alert(time1 + " " + time2);

在这里插入图片描述

		//每间隔1000毫秒（1秒）执行一次
  		var time1 = setInterval(refresh, 1000);
        var i = 0;

        function refresh() {
            document.write(i);
            //i加一
            i++;
            if (i == 5) {
                // 当i=5的时候定时器停止
                clearInterval(time);
            }
        }

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

		//（执行语句，间隔时间）间隔1000毫秒开始执行，且只执行一次
        var time2 = setTimeout(refresh, 1000);
        var i = 0;

        function refresh() {
            document.write(i);
            // 观察是否只执行一次
            i++;
        }
        //关闭定时器
        clearInterval(time2);

秒表

	<style>
        .box {
            width: 400px;
            margin: 0 auto;
            text-align: center;
        }
        
        .time {
            font-size: 60px;
            margin-bottom: 30px;
        }
        
        button {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: none;
            outline: none;
            font-size: 24px;
            margin: 0 25px;
            cursor: pointer;
        }
    </style>
	<script>
        window.onload = function() {
            // 分
            var min = 0;
            // 秒
            var sec = 0;
            // 毫秒
            var ms = 0;
            // 获取所有span标签，放到伪数组中（通过标签名获取标签）
            var spans = document.getElementsByTagName("span");
            // 定时器
            var timer = null;
            
			function $(str) {
                // 通过id获取标签
                return document.getElementById(str);
            }
            
            // 复位操作
            $("resetBtn").onclick = function() {
                min = 0;
                sec = 0;
                ms = 0;
                // 复位分
                spans[0].innerHTML = "00";
                // 复位秒
                spans[2].innerHTML = "00";
                // 复位毫秒
                spans[4].innerHTML = "00";
                //关闭定时器
                clearInterval(timer);
                //当秒表在进行时，点击复位按钮，计时器停止且数据清零
                if ($("startBtn").innerHTML == "停止") {
                    $("startBtn").innerHTML = "开始";
                    // alert($("startBtn").innerHTML);
                    // 防止出现bug，最好在启动定时器之间，先清除定时器。
                    clearInterval(timer);
                    // timer = setInterval(show, 10);
                }
            }
            $("startBtn").onclick = function() {
                //点击了开始按钮
                // 1.启动定时器，
                // 2.将按钮的文本修改为停止

                if ($("startBtn").innerHTML == "开始") {
                    $("startBtn").innerHTML = "停止";
                    // alert($("startBtn").innerHTML);
                    // 防止出现bug，最好在启动定时器之间，先清除定时器。
                    clearInterval(timer);
                    timer = setInterval(show, 10);
                } else {
                    //    点击停止按钮
                    // 1.停止计时器
                    // 2.将按钮的文本修改为开始
                    $("startBtn").innerHTML = "开始";
                    clearInterval(timer);
                }
            }

            

            function show() {
                ms++;
                // 毫秒等于1000，秒进一
                if (ms == 100) {
                    sec++;
                    ms = 0;
                }
                // 秒等于60，分进一
                if (sec == 60) {
                    min++;
                    sec = 0;
                }
                //利用三元运算对小于10的数进行补0
                spans[0].innerHTML = min < 10 ? "0" + min : min;
                spans[2].innerHTML = sec < 10 ? "0" + sec : sec;
                spans[4].innerHTML = ms < 10 ? "0" + ms : ms;
            }
        }
    </script>

<body>
    <div class="box">
        <div class="time">
            <span>00</span>
            <span>:</span>
            <span>00</span>
            <span>:</span>
            <span>00</span>
        </div>

        <div class="btn">
            <button id="resetBtn">复位</button>
            <button id="startBtn">开始</button>
        </div>

    </div>
</body>

BOM

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

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

常见的BOM对象：
1.window 代表整个浏览器窗口，window对象是BOM中的顶级对象。
2.Navigator 表示浏览器的一些信息。
3.Location 表示浏览器当前的地址信息。
4.History 浏览器的历史记录信息。
5.Screen 表示用户的屏幕信息。
在这里插入图片描述

window对象的常用方法：
1.弹出系统对话框。
(1) alert()
(2) prompt()
(3) confirm()
2.打开新窗口
open(URL,name,specs,replace)
url :要打开的地址
name:指定target属性或窗口的名称
specs：用于设置浏览器窗口的特征（如大小、位置、滚动条等），多个特性之间使用逗号分隔
replace：设置值为true时，表示替换浏览历史中的当前条目，设置false（默认值）表示在浏览历史中创建新的条目在这里插入图片描述

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

		var newwindows = null;
        function func() {
            // 网页地址为https://www.baidu.com，网页名字："百度"，网页宽400像素，高400像素，距离浏览器顶部200像素，左边100像素
            newwindows = window.open("https://www.baidu.com", "百度",  "width=400, height=400, top=200,left=100");
        }

<body>
	//当点击此按钮是会调用func()函数
    <button onclick="func()">打开一个新窗口</button>
    //当点击此按钮是会调用closeWindow()函数
    <button onclick="closeWindow()">关闭新窗口</button>
    //当点击此按钮是会调用closeNew()函数
    <button onclick="closeNew()">关闭当前窗口</button>
</body>

在这里插入图片描述

代码在线生成器

<body>
    <textarea id="compile" cols="30" rows="10"></textarea>
    //点击运行按钮时，调用newWindow()函数
    <button onclick="newWindow()">运行</button>
</body>

<script>
        var newOpen = null;

        function newWindow() {
        	//在新标签页打开一个网页
            newOpen = window.open("_blank");
            //textare文本域获取内容时要使用value方法
            var code = document.getElementById("compile").value;
            //在新网页中写入id选择器选中的标签里面的代码，并自行解析，
            newOpen.document.write(code)
        }
    </script>

在这里插入图片描述

倒计时

 	<style>
        .container {
            width: 234px;
            height: 300px;
            background-color: #f1eded;
            padding-top: 39px;
            text-align: center;
            border-top: 1px solid #e53935;
            ;
            margin: 0 auto;
            margin-top: 100px;
        }
        
        .time {
            color: #ef3a3b;
            font-size: 21px;
            padding-top: 15px;
        }
        
        .info {
            font-size: 15px;
            color: rgba(0, 0, 0, .54);
        }
        
        .icon img {
            width: 34px;
            margin: 25px 0;
        }
        
        .countDown {
            width: 168px;
            margin: 28px auto 0;
            display: flex;
            justify-content: space-around;
        }
        
        .countDown span {
            display: block;
            float: left;
            line-height: 46px;
        }
        
        .countDown span:nth-child(2n+1) {
            width: 46px;
            height: 46px;
            background-color: #605751;
            color: #fff;
            font-size: 24px;
        }
        
        .countDown span:nth-child(2n) {
            width: 15px;
            font-size: 28px;
            color: #605751;
        }
    </style>
    <script>
        window.onload = function() {
            var timer = null;
            timer = setInterval(time, 1000);
            var spans = document.getElementsByTagName("span");
            var info = document.getElementById("info");

            function time() {
                //开场时间
                var nextDate = new Date("2021-01-08 19:30:00");
                // 当前时间
                var nowDate = new Date();

                // 转换为毫秒数
                var today = Date.parse(nowDate);
                var tomorrow = Date.parse(nextDate);
                // 当前时间距离开场时间的时间差（秒差）
                var timeMiss = parseInt((tomorrow - today) / 1000);
                // 当前时间距离开场时间小时数
                var hourMiss = parseInt(timeMiss / 3600);
                // 当前时间距离开场时间分钟数
                var minuteMiss = parseInt(timeMiss / 60 % 60);
                // 当前时间距离开场时间秒数
                var secondMiss = parseInt(timeMiss % 60);
                //当倒计时结束，定时器停止
                if (secondMiss <= 0 && hourMiss <= 0 && hourMiss <= 0) {
                    clearInterval(timer);
                    info.innerHTML = "活动已结束";
                }
				//利用三元算法对小于10的数补0
                spans[0].innerHTML = hourMiss < 10 ? "0" + hourMiss : hourMiss;
                spans[2].innerHTML = minuteMiss < 10 ? "0" + minuteMiss : minuteMiss;
                spans[4].innerHTML = secondMiss < 10 ? "0" + secondMiss : secondMiss;
            }

        }
    </script>

<div class="container">
        <div class="time">12:00场</div>
        <div class="icon"><img src="img/下载" alt=""></div>
        <div id="info">距离开始还有</div>
        <div class="countDown">
            <span>00</span>
            <span>:</span>
            <span>00</span>
            <span>:</span>
            <span>00</span>
        </div>
    </div>