原生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实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
jquery 模板的应用示例
Nov 12 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
JS监听组合按键思路及实现过程
Apr 17 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
十天学会php之第八天
2006/10/09 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python占位符输入方式实例
2019/05/27 Python
Python发展史及网络爬虫
2019/06/19 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
护士演讲稿优秀范文
2014/04/30 职场文书
钢琴师观后感
2015/06/12 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
原生JS实现分页
2022/04/19 Javascript