跟Pink老师学习JavaScript核心 DOM和 BOM操作之倒计时效果

于 2022-09-23 18:33:51 发布
阅读量314 收藏 2
点赞数
文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46278178/article/details/127014032
版权

倒计时效果

案例分析

① 这个倒计时时不断变化的，因此需要定时器来自动变化（setInterval） 注意：Int的I是i的大写! val的l是小写的L。容我啰嗦一句。
② 三个黑色盒子里面分别存放时分秒。
③ 三个黑色盒子利用innerHTML放入计算的小时分钟秒数。
④ 第一次执行也是间隔毫秒数，因此刚刷新页面会有空白。
⑤ 最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题。
⑥ 过了倒计时后提示已过信息。
⑦ 优化，清除定时器clearInterval()。
实现效果图：
在这里插入图片描述

代码实现

基本构架

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12-倒计时效果</title>
    <style>
      div {
        margin: 200px;
      }
      div>span {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #333;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
      /* 倒计时已过小提示 先是隐藏的 */
      .tisp {
        display: none;
        position: absolute;
        top: 65px;
        left: 25%;
        width: 300px;
        color: red;
        background-color: skyblue;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div>
      <span class="hour">14</span>
      <span class="minute">59</span>
      <span class="second">14</span>
    </div>
    <span class="tisp">已过倒计时时间，下次尽早~</span>
  </body>
</html>

在这里插入图片描述

new Date()

Date 对象
Date 对象用于处理日期与时间。
创建 Date 对象： new Date()
详情可浏览：Date - Javascript | MDN
由于受够了JavaScript代码片在body下方这次用学习到的load来做

代码实现：

// 以下的js语句将都会被放入到function(){}内
// 也就是function(){这里面！}
window.addEventListener('load', function(){} )

我用封装一个倒计时的函数
parseInt()是得到一个整数
为了整体美观特地使用三元表达式给10以下的数字补0显示
例:h = h < 10 ? ‘0’ + h : h

代码实现：

window.addEventListener('load', function(){
// 
    var hour = document.querySelector('.hour')      // 时
    var minute = document.querySelector('.minute')  // 分
    var second = document.querySelector('.second')  // 秒
    // 设定目标时间格式：'YYYY-MM-DD HH:mm:ss'
    var inputDate = +new Date('2022-09-23 16:54:00')
    // 封装一个倒计时函数
    function countDown(){
    // 获取调用的时间戳
      var nowData = +new Date()
      // 目标时间 - 当前时间 / 1000 得到 剩余秒数
      times = (inputDate - nowData)/1000 
      // 转化成时钟
      var h = parseInt(times/60/60%24)
      // 为了整体美观给10以下的数字补0
      h = h < 10 ? '0' + h : h
      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
        }
      })

到这一步时，我们就完成一半啦，只是运行的时候只执行一次，所以我们就需要用到定时器。

定时器 - setInterval()

在window中有两种定时器方法，在调用时都可以省略window，这个延时时间单位是毫秒 1000毫秒 = 1秒，可以省略，省略则是默认的是0。
① setTimeout(执行函数,延时时间)
如果你只想执行一次可以选择setTimeout
② setInterval(执行函数,延时时间)
如果你想不停地调用函数可以选择setInterval
我们需要不停的调用倒计时函数所以我们选择setInterval来实现倒计时效果

代码实现：

// 开启定时器
// 给定时器加标识符（名字）方便后续调用
var timer = setInterval(countDown,1000)

在这里插入图片描述设定目标时间是 2022-09-23 17:50:00 据目前时间还有一两分钟的样子。我们实现啦！不过 细心的朋友就发现，我们开始运行或刷新倒计时效果时会有短暂的静止时间

问题示例图：

在这里插入图片描述
这个问题是因为我们第一次执行也是间隔毫秒数，因此刚刷新页面会有空白。解决方法可以才开启定时器之前就调用一次倒计时函数。

// 加载页面时就调用一次防止有空白
countDown()

倒计时已过提示

我们不应该只管实现倒计时效果，为了给用户更好的体验，我们可以再新增一个提示。

示例代码：

// times是剩余的秒数
// 如果秒数小于0 即为已过倒计时时间，则隐藏时间，显示提示语
// 需要先去获取时间的div元素和提示的div元素
// 此代码片放置在倒计时函数countDown()的最后
if (times < 0) {
  div.style.display = 'none'
  tisp.style.display = 'block'
  // 此处还有一句
  } else {
  div.style.display = 'block'
  tisp.style.display = 'none'
}

示例效果图：
在这里插入图片描述

优化 清除定时器 - clearInterval()

前面我们提过setInterval()定时器会不停调用，我们以为时间到了它就也休息了吗？不，它还在调用。
上图！
在这里插入图片描述即使时间已过，定时器仍在调用，这些时候我们需要清除定时器。clearInterval()
我们前面给定时器加的名字在这里也有用处啦。

示例代码：

// 此js代码片放置在判断剩余秒数是小于0内
clearInterval(timer)

代码示例图：
在这里插入图片描述
看图中，我们的清除定时器成功了。倒计时已过就不再调用定时器。

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12-倒计时效果</title>
    <style>
      div {
        margin: 200px;
        position: absolute;
        top: 65px;
        left: 25%;
      }
      div>span {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #333;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
      .tisp {
        display: none;
        position: absolute;
        top: 65px;
        left: 25%;
        width: 300px;
        color: red;
        background-color: skyblue;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
      }
    </style>
    <script>
      window.addEventListener('load', function(){
        var hour = document.querySelector('.hour')      // 时
        var minute = document.querySelector('.minute')  // 分
        var second = document.querySelector('.second')  // 秒
        var div = document.querySelector('div')
        var tisp = document.querySelector('.tisp')
        // 你记得修改这个时间哟 
        var inputDate = +new Date('2022-09-23 18:31:00')
        // 加载页面时就调用一次防止有空白
        countDown()
        // 开启定时器
        var timer = setInterval(countDown,1000)
        // 封装一个倒计时函数
        function countDown(){
          var nowData = +new Date()
          times = (inputDate - nowData)/1000 
          var h = parseInt(times/60/60%24)
          h = h < 10 ? '0' + h : h
          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
          if (times < 0) {
            div.style.display = 'none'
            tisp.style.display = 'block'
            clearInterval(timer)
          } else {
            div.style.display = 'block'
            tisp.style.display = 'none'
          }
        }
      })
    </script>
  </head>
  <body>
    <div>
      <span class="hour">14</span>
      <span class="minute">59</span>
      <span class="second">14</span>
    </div>
    <span class="tisp">已过倒计时时间，下次尽早~</span>
  </body>
</html>
赵云澜
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Pink老师JavaScript课堂案例 - 倒计时
Codefreyy
03-19 598
function countDown() { var nowTime = +new Date(); //现在时间 var times = (inputTime - nowTime) / 1000; //现在时间和用户输入时间的时间差（单位为ms） var h = parseInt(times / 60 / 60 % 24); //时，最后用取余号是因为，我们只需要不满24小时的时，满的会升为天 h = h
pink老师 JavaScript基础 简易ATM案例
09-26
题目描述： - 里面现存有 100 块钱。 - 如果存钱，就用输入钱数加上先存的钱数, 之后弹出显示余额提示框 - 如果取钱，就减去取的钱数，之后弹出显示余额提示框 - 如果显示余额，就输出余额 - 如果退出，弹出退出信息提示框
倒计时效果 2020-11-24
weixin_50286102的博客
11-25 239
倒计时效果 <!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
dom操作html页面计时，倒计时
weixin_44168784的博客
06-18 311
纯代码
基于JavaScript实现活动倒计时效果
01-19
本文实例为大家分享了js倒计时效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <title>countDown</title> <style type=text/css> #mydiv{ width:...
pink老师Javascript基础PPT.zip
02-06
2021年pink老师线下班 Javascript基础班的PPT
四、pink老师的学习笔记——元素的显示与隐藏
01-08
1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 ... 1.1 display 显示（重点） display 设置或检索对象是否及如何显示。 display: none 隐藏对象 display：block 除了转换为块级元素之外，同时还有...
JavaScript零基础学习（超详细）
02-19
根据pink老师的课程做的学习笔记 学习JavaScript看这篇就够了
pink老师的js全视频配套资料.zip
05-10
pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频...
Dom中的倒计时现
04-13
本篇主要介绍网页中秒杀的Dom原生代码
jQuery基础自学笔记（pink老师jQuery全内容）
04-12
pink老师jQuery
前端基础之BOM和DOM和三个小示例(计时器、搜索框、select联动)
weixin_30785593的博客
12-09 125
一、BOM和DOM JavaScript分为 ECMAScript，DOM，BOM。 BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。 DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 二、window对象 所有浏览...
js学习笔记之日期倒计时DOM操作
weixin_34297300的博客
07-27 120
1.访问html元素 getElementById() 方法 返回对拥有指定 id 的第一个对象的引用，只有dom对象有效 getElementsByName() 方法 返回指定名称的对象集合 getElementsByTagName() 方法 返回指定标签名的对象集合 getElementsByClassName() 方法 返回文档中所有指定类名的元素集合，ie8及之前版本不支...
Dom 倒计时按钮
Lu_1u的博客
07-14 447
web前端 Dom 倒计时按钮
js+dom娱乐之一个夸张的倒计时
03-17 562
用dom节点来显示数字，哈哈，用盒子模型的border模拟数字屏显示； talk is cheap ,show the code<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> .up{ height:100p
用js实现倒计时，可以自己设定时间
suxiaotie的博客
11-17 2931
这个轮子应该是烂大街了，但是身为新手，我还是自己写了一下。虽然成功了，但是还是有一些问题，还待提高。 js代码： function show(){ var year=Number(document.getElementById("inyear").value); var month=Number(document.getElementById("inmonth").value)-1; var
jq中动态加DOM后进行循环倒计时
qq_41590018的博客
07-10 213
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>循环倒计时</title> </head> <body> <div id="app"&g
JS的DOM(获取元素、元素属性、value属性、显示时间、计时器、节点增删改查等)...
weixin_30296405的博客
03-02 368
一. 获取元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function test() { ...
pink老师javascript笔记
最新发布
06-28
非常感谢您对pink老师的javascript笔记的关注。这份笔记是一份非常实用的学习资料，适合初学者和进阶者使用。它包含了javascript的基础知识、语法、常用函数和DOM操作等内容，讲解详细、易懂。如果您想学习...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值