脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → 原生js 节日时间倒计时

原生js实现节日时间倒计时功能

 更新时间：2017年01月18日 16:46:30   作者：夏天不做梦  
本文主要分享了原生js实现节日时间倒计时功能的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧

知识要点

1.实现原理：

用结束时间-当前时间=时间差

当前时间每过1秒时间差自然也就少了1秒

所以要1秒更新一次当前时间就达到了倒计时的效果

2.需要注意的就是时间之间的转换和对得出数值的处理

3.用到的方法：

obj.getTime() //换算成毫秒
Math.floor() //把小数点向下舍入结果取一个整数
50%24 // 这是对数值求余的方法，意思是 假如有50个小时，一天24个小时 这个得出的结果就是 余数是2

具体的数值的运算处理完整代码里有详细的注释

完整代码

注：代码附带显示当前时间的标准格式以及倒计时天数

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
</style>
</head> 
<body>
 <div id="time"></div>
 <br/>
 <div id="day"></div>
 <br/>
 <div id="tm"></div>
 <script type="text/javascript"> 
 //在页面加载完后立即执行多个函数完美方案。
 function addloadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload !="function"){
   window.onload=func;
  }
  else{
   window.onload=function(){
    if(oldonload){
     oldonload(); 
    }
    func();
   }
  }
 }
 addloadEvent(showTime);
 addloadEvent(day);
 addloadEvent(tb);
 //在页面加载完后立即执行多个函数完美方案over。
 //天时秒分倒计时
 function tb(){
 var myDate=new Date();//获取当前时间
 var endtime=new Date("2018,1,1");//获取结束时间
 //换算成秒 小数点向下舍入取整
 var ltime=Math.floor((endtime.getTime()-myDate.getTime())/1000);
 //console.log(ltime)
 //换算成天 小数点向下舍入取整
 var d=Math.floor(ltime/(24*60*60));
 //换算成小时取去掉天数的余数（也就是小时） 小数点向下舍入取整
 var h=Math.floor(ltime/(60*60)%24);
 //换算成分钟取去掉小时的余数（也就是分钟） 小数点向下舍入取整
 var m=Math.floor(ltime/60%60);
 //换算成分钟取去掉分钟的余数（也就是秒） 小数点向下舍入取整
 var s=Math.floor(ltime%60);
 document.getElementById("tm").innerHTML="距2018年元旦还有:"+d+"天"+h+"小时"+m+"分钟"+s+"秒";
 if(ltime<=0){
  document.getElementById("tm").innerHTML="元旦快乐！";
  clearTimeout(tb);
 }
 setTimeout(tb,1000);
 }
 //当秒数为个位数时前面+字符串0
 function checkTime(i){
 return i<10? "0"+i:""+i;
 }
 //当前时间标准格式
 function showTime(){
 var myDate=new Date();//获取当前时间
 var year=myDate.getFullYear();//获取年份
 var month=myDate.getMonth()+1;//获取月份是0-11的数字所以+1
 var date=myDate.getDate();//日
 var day=myDate.getDay();//
 var h=myDate.getHours();//小时
 var m=myDate.getMinutes();//分钟
 var s=myDate.getSeconds();//秒
 checkTime(m);
 checkTime(s);
 //console.log(day)
 var week="日一二三四五六".charAt(day);
 document.getElementById("time").innerHTML=year+"年"+month+"月"+date+"日"+"星期"+week+h+":"+m+":"+s;
 setTimeout(showTime,1000); 
 }
 //倒计时天数计算
 function day(){
 var myDate=new Date();//获取当前时间
 var endtime=new Date("2018,1,1");//获取结束时间
 //先换算成毫秒再相减就是时间差，再除以一天的毫秒数结果是带有小数点的，用math方法进一位取整
 var ltime=Math.ceil((endtime.getTime()-myDate.getTime())/(24*60*60*1000));
 document.getElementById("day").innerHTML="距2018年元旦还有:"+ltime+"天";
 }
 </script>
</body> 
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 完全不用基础的HTML5入门篇教程

    完全不用基础的HTML5入门篇教程

    HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
    2022-03-03
  • javascript之函数直接量(function(){})()

    javascript之函数直接量(function(){})()

    javascript之函数直接量(function(){})()...
    2007-06-06
  • 浅谈一下JavaScript与C++的差异

    浅谈一下JavaScript与C++的差异

    这篇文章主要介绍了浅谈一下JavaScript与C++的差异,本来两门语言各有各的战场，并没什么交集，但自从 Node.js 框架出现之后，JavaScript 就摆脱了浏览器的樊笼，开始渗透进入系统应用的领域
    2023-04-04
  • 老生常谈 关于JavaScript的类的继承

    老生常谈 关于JavaScript的类的继承

    下面小编就为大家带来一篇老生常谈 关于JavaScript的类的继承。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • AngularJS 指令详细介绍

    AngularJS 指令详细介绍

    本文主要介绍AngularJS 指令,这里详细介绍AngularJS 指令知识并提供实例代码,有需要的小伙伴可以参考下
    2016-07-07
  • Javascript SHA-1：Secure Hash Algorithm

    Javascript SHA-1：Secure Hash Algorithm

    Javascript SHA-1：Secure Hash Algorithm...
    2006-12-12
  • javascript数据类型基础示例教程

    javascript数据类型基础示例教程

    今天总结一下javascript中的数据类型，希望大家能对javascript数据类型基础有扎实的掌握，祝大家多多进步，早日升职加薪
    2022-03-03
  • js中top/parent/frame概述及案例应用

    js中top/parent/frame概述及案例应用

    top:永远指分割窗口最高层次的浏览器窗口;parent:包含当前分割窗口的父窗口,本文将围绕js中top、parent、frame进行讲述及他们的应用案例
    2013-02-02
  • JavaScript门道之标准库

    JavaScript门道之标准库

    标准库指的是js的标准内置对象，是js这门语言本身初始时提供的在全局范围的对象,需要的朋友可以参考下
    2018-05-05
  • JavaScript Math.ceil 方法(对数值向上取整)

    JavaScript Math.ceil 方法(对数值向上取整)

    js Math.ceil用于对数值向上取整，即得到大于或等于该数值的最小整数,需要的朋友可以参考下
    2015-01-01

最新评论