原生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 相关文章推荐
js 采用delete实现继承示例代码
May 20 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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
第十四节 命名空间 [14]
2006/10/09 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
关于js类的定义
2011/06/28 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
python实现简单的socket server实例
2015/04/29 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
python 实现倒排索引的方法
2018/12/25 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
集团薪酬管理制度
2014/01/13 职场文书
经典促销广告词大全
2014/03/19 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
2014年行政执法工作总结
2014/12/11 职场文书