原生JS实现简单的倒计时功能示例


Posted in Javascript onAugust 30, 2018

本文实例讲述了原生JS实现简单的倒计时功能。分享给大家供大家参考,具体如下:

1、第一种

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>3water.com JS倒计时</title>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
window.onload=clock;
function clock(){
var today=new Date(),//当前时间
    h=today.getHours(),
    m=today.getMinutes(),
    s=today.getSeconds();
  var stopTime=new Date("Feb 9 2019 00:00:00"),//结束时间
    stopH=stopTime.getHours(),
    stopM=stopTime.getMinutes(),
    stopS=stopTime.getSeconds();
  var shenyu=stopTime.getTime()-today.getTime(),//倒计时毫秒数
    shengyuD=parseInt(shenyu/(60*60*24*1000)),//转换为天
    D=parseInt(shenyu)-parseInt(shengyuD*60*60*24*1000),//除去天的毫秒数
    shengyuH=parseInt(D/(60*60*1000)),//除去天的毫秒数转换成小时
    H=D-shengyuH*60*60*1000,//除去天、小时的毫秒数
    shengyuM=parseInt(H/(60*1000)),//除去天的毫秒数转换成分钟
    M=H-shengyuM*60*1000;//除去天、小时、分的毫秒数
    S=parseInt((shenyu-shengyuD*60*60*24*1000-shengyuH*60*60*1000-shengyuM*60*1000)/1000)//除去天、小时、分的毫秒数转化为秒
    document.getElementById("div").innerHTML=(shengyuD+"天"+shengyuH+"小时"+shengyuM+"分"+S+"秒"+"<br>");
    // setTimeout("clock()",500);
    setTimeout(clock,500);
}
</script>
</body>
</html>

运行效果:

原生JS实现简单的倒计时功能示例

2、第二种

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com js倒计时</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    p {
      font-size: 80px;
      text-align: center;
    }
    p span {
      color: red;
    }
    p span.time {
      color: black
    }
    body{padding-top:200px;}
  </style>
</head>
<body>
<p>距离2019年还有</p>
<p><span></span></p>
<script>
  var oSpan = document.getElementsByTagName('span')[0];
  function tow(n) {
    return n >= 0 && n < 10 ? '0' + n : '' + n;
  }
  function getDate() {
    var oDate = new Date();//获取日期对象
    var oldTime = oDate.getTime();//现在距离1970年的毫秒数
    var newDate = new Date('2019/1/1 00:00:00');
    var newTime = newDate.getTime();//2019年距离1970年的毫秒数
    var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
    var day = Math.floor(second / 86400);//整数部分代表的是天;一天有24*60*60=86400秒 ;
    second = second % 86400;//余数代表剩下的秒数;
    var hour = Math.floor(second / 3600);//整数部分代表小时;
    second %= 3600; //余数代表 剩下的秒数;
    var minute = Math.floor(second / 60);
    second %= 60;
    var str = tow(day) + '<span class="time">天</span>'
        + tow(hour) + '<span class="time">小时</span>'
        + tow(minute) + '<span class="time">分钟</span>'
        + tow(second) + '<span class="time">秒</span>';
    oSpan.innerHTML = str;
  }
  getDate();
  setInterval(getDate, 1000);
</script>
</body>
</html>

运行效果:

原生JS实现简单的倒计时功能示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,即可得到上述运行结果。

Javascript 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
JavaScript获得选中文本内容的方法
Dec 02 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
js正则相关知识点专题
May 10 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
JavaScript fetch接口案例解析
Aug 30 #Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 #Javascript
原生JS实现的简单小钟表功能示例
Aug 30 #Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 #Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 #Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 #Javascript
简述vue状态管理模式之vuex
Aug 29 #Javascript
You might like
sql注入与转义的php函数代码
2013/06/17 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
python实现发送邮件及附件功能
2021/03/02 Python
python实现发送邮件功能代码
2017/12/14 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
中学教师教育感言
2014/02/21 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
后天观后感
2015/06/08 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers