原生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 相关文章推荐
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP远程采集图片详细教程
2014/07/01 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
javascript读取RSS数据
2007/01/20 Javascript
JS之小练习代码
2008/10/12 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
如何运行Python程序的方法
2013/04/21 Python
浅析使用Python操作文件
2017/07/31 Python
Python异常处理操作实例详解
2018/08/28 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
招股说明书范本
2014/05/06 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
工人先进事迹材料
2014/12/26 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书