这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了原生 js 实现节日时间倒计时功能的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
知识要点
1. 实现原理:
用结束时间 - 当前时间 = 时间差
当前时间每过 1 秒时间差自然也就少了 1 秒
所以要 1 秒更新一次当前时间就达到了倒计时的效果
2. 需要注意的就是时间之间的转换和对得出数值的处理
3. 用到的方法:
- obj.getTime() //换算成毫秒
- Math.floor() //把小数点向下舍入结果取一个整数
- 50$ // 这是对数值求余的方法,意思是 假如有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)$);
- //换算成分钟取去掉小时的余数(也就是分钟) 小数点向下舍入取整
- var m=Math.floor(ltime/60`);
- //换算成分钟取去掉分钟的余数(也就是秒) 小数点向下舍入取整
- var s=Math.floor(ltime`);
- 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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0529/328375.html