b站pink老师JavaScript的BOM案例代码——倒计时

目标效果:

1.inputTime输入比当前时间晚的时间

该案例写法的局限性:inputTime中的时间要和当前时间相差24小时之内

(如inputTime中的时间和当前时间相差大于24小时:var h = parseInt(times / 60 / 60 % 24);去掉%24取余 %24的方法是由于考虑封装的countDown()函数中还有一个天的倒计时 

即写成var h = parseInt(times / 60 / 60);)

2.浏览器打开,显示inputTime输入的时间到当前时间的时、分、秒倒计时

<!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>
    <style>
        div {
            margin: 200px;
        }

        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2022-9-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            //用三元表达式 条件表达式?表达式1:表达式2
            //条件表达式是true 返回表达式1
            //条件表达式是false 返回表达式2
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

</html>

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 非常感谢您对pink老师javascript笔记的关注。这份笔记是一份非常实用的学习资料,适合初学者和进阶者使用。它包含了javascript的基础知识、语法、常用函数和DOM操作等内容,讲解详细、易懂。如果您想学习javascript,这份笔记是一个不错的选择。 ### 回答2: Pink老师JavaScript笔记是关于前端开发学习过程中非常优秀的资料之一。这份笔记内容包括了JavaScript的基础知识、DOM、BOM、事件、Ajax等内容,非常全面地涵盖了前端开发所需要掌握的重要知识点。 在这份笔记中,Pink老师用通俗易懂的语言,将复杂的知识点进行了详细的解释和讲解。这不仅使得初学者能够轻松理解复杂的JavaScript语言,也让已经掌握一定JavaScript知识的开发者能够更深入地了解这门语言。此外,Pink老师还分享了大量实战案例,这些案例可以帮助学生们更好地掌握和运用大量的知识点。 笔记的布局设计非常清晰,内容及其丰富,并且与今天 Web 前端开发面临的实际问题有很大的联系,因而该笔记被包括许多开发者、爱好者和专家评为学习JavaScript的最佳资料之一。 综上所述,Pink老师JavaScript笔记是一份非常优质的前端开发学习资料,它不仅可以帮助初学者建立完备的JavaScript知识体系,也可以让已经掌握一定JavaScript知识的开发者更深入地了解这门语言。它是前端开发者不可错过的优秀资料。 ### 回答3: Pink老师JavaScript笔记覆盖了JavaScript语言的很多方面,包括数据类型、运算符、控制流、函数、数组、对象、DOM操作、事件处理等等。这份笔记相对来说比较简单易懂,很适合初学者入门学习。 首先,笔记中详细地介绍了JavaScript的数据类型,包括字符串、数字、布尔值、null、undefined和对象。这对于初学者来说是非常重要的基础,因为在JavaScript中一切皆为对象。 接着,笔记讲解了JavaScript中的运算符,包括算术运算符、比较运算符、逻辑运算符、赋值运算符等等。这些都是编程基础,也是JavaScript编程的必备知识点。 在控制流方面,笔记详细介绍了if语句、switch语句、for循环、while循环等等,让初学者能够清楚地了解JavaScript中的控制流程。 当然,函数也是JavaScript编程中非常重要的部分。笔记中对于函数的定义、参数、返回值以及作用域等方面都有详细的介绍,还有自定义函数和匿名函数的使用。 除此之外,JavaScript中的数组和对象也是非常重要的部分。笔记中讲解了如何创建数组和对象,以及如何使用它们的属性和方法。同时,笔记中也介绍了DOM操作和事件处理,让初学者能够掌握JavaScript中最常用的操作之一。 总的来说,Pink老师JavaScript笔记比较适合初学者学习,它详细介绍了JavaScript的基本语法和常用操作,非常有利于帮助初学者建立起一个扎实的编程基础。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值