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


Posted in Javascript onJanuary 18, 2017

知识要点

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
Javascript模块化编程详解
Dec 01 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
原生js实现返回顶部缓冲效果
Jan 18 #Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 #Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 #Javascript
js实现简单的网页换肤效果
Jan 18 #Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 #Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 #Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 #Javascript
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
PHP守护进程实例
2015/03/06 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
python中元类用法实例
2014/10/10 Python
给Python入门者的一些编程建议
2015/06/15 Python
基于python实现聊天室程序
2018/07/27 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
python编写计算器功能
2019/10/25 Python
如何基于Python实现自动扫雷
2020/01/06 Python
Django 返回json数据的实现示例
2020/03/05 Python
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
《海底世界》教学反思
2014/04/16 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
自我检讨报告
2015/01/28 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
新闻通讯稿模板
2015/07/22 职场文书
小学感恩主题班会
2015/08/12 职场文书
初中政治教师教学反思
2016/02/23 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
redis数据结构之压缩列表
2022/03/21 Redis