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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
javascript call方法使用说明
Jan 11 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
JS实现换肤功能的方法实例详解
Jan 30 Javascript
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将任何格式视频转为flv的代码
2009/09/03 PHP
php 一元分词算法
2009/11/30 PHP
PHP 变量的定义方法
2010/01/26 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python的词法分析与语法分析
2013/05/18 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
python中with用法讲解
2020/02/07 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
幼师自荐信
2013/10/26 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
就业协议书怎么填
2014/04/11 职场文书
美术专业自荐信
2014/07/07 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers