原生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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
JavaScript 数组循环引起的思考
Jan 01 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
vue.js开发环境搭建教程
May 04 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
基于javascript实现日历功能原理及代码实例
May 07 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 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与数据库代码开发规范
2013/08/08 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
PHP反射基础知识回顾
2020/09/10 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
业务助理岗位职责
2013/11/18 职场文书
葬礼司仪主持词
2014/03/31 职场文书
创业女性典型材料
2014/05/02 职场文书
关于环保的演讲稿
2014/05/10 职场文书
村容村貌整治方案
2014/05/21 职场文书
摩登时代观后感
2015/06/03 职场文书
外出考察学习心得体会
2016/01/18 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers