JavaScript实现前端倒计时效果


Posted in Javascript onFebruary 09, 2021

本文实例为大家分享了JavaScript实现前端倒计时效果的具体代码,供大家参考,具体内容如下

JavaScript实现前端倒计时效果

代码:

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

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      padding: 10px;
      font-size: 100px;
    }
    
    p {
      float: left;
      width: 300px;
      height: 300px;
      border: 1px solid #000000;
      color: #ffffff;
      background-color: #333333;
      text-align: center;
      line-height: 300px;
    }
  </style>
</head>

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

      function countDown() {
        var nowTime = +new Date(); //返回的是当前时间总的毫秒数
        var times = (inputTime - nowTime) / 1000; //tiems是剩余时间总的毫秒数
        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;
      }
    })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 #Javascript
详解Vue的七种传值方式
Feb 08 #Vue.js
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 #Javascript
js 执行上下文和作用域的相关总结
Feb 08 #Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 #Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 #Javascript
You might like
PHP 简单日历实现代码
2009/10/28 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python实现音乐下载的统计
2018/06/20 Python
python递归法解决棋盘分割问题
2019/07/17 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python命令 -u参数用法解析
2019/10/24 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
会议开场欢迎词
2014/01/15 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
杭白菊导游词
2015/02/10 职场文书
费城故事观后感
2015/06/10 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android