原生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-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
javascript Select标记中options操作方法集合
Oct 22 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
详解jquery选择器的原理
Aug 01 jQuery
Vue 表单控件绑定的实现示例
Aug 11 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
工作中常用js功能汇总
Nov 07 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 定界符 使用技巧
2009/06/14 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
python实现多线程网页下载器
2018/04/15 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Django xadmin安装及使用详解
2020/10/26 Python
Python常用断言函数实例汇总
2020/11/30 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
法律进社区活动总结
2015/05/07 职场文书
Python实现简单得递归下降Parser
2022/05/02 Python
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技