欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js實現(xiàn)節(jié)日時間倒計時功能

 更新時間:2017年01月18日 16:46:30   作者:夏天不做夢  
本文主要分享了原生js實現(xiàn)節(jié)日時間倒計時功能的示例代碼。具有一定的參考價值,下面跟著小編一起來看下吧

知識要點

1.實現(xiàn)原理:

用結(jié)束時間-當前時間=時間差

當前時間每過1秒時間差自然也就少了1秒

所以要1秒更新一次當前時間就達到了倒計時的效果

2.需要注意的就是時間之間的轉(zhuǎn)換和對得出數(shù)值的處理

3.用到的方法:

obj.getTime() //換算成毫秒
Math.floor() //把小數(shù)點向下舍入結(jié)果取一個整數(shù)
50%24 // 這是對數(shù)值求余的方法,意思是 假如有50個小時,一天24個小時 這個得出的結(jié)果就是 余數(shù)是2

具體的數(shù)值的運算處理完整代碼里有詳細的注釋

完整代碼

注:代碼附帶顯示當前時間的標準格式以及倒計時天數(shù)

<!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"> 
 //在頁面加載完后立即執(zhí)行多個函數(shù)完美方案。
 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);
 //在頁面加載完后立即執(zhí)行多個函數(shù)完美方案over。
 //天時秒分倒計時
 function tb(){
 var myDate=new Date();//獲取當前時間
 var endtime=new Date("2018,1,1");//獲取結(jié)束時間
 //換算成秒 小數(shù)點向下舍入取整
 var ltime=Math.floor((endtime.getTime()-myDate.getTime())/1000);
 //console.log(ltime)
 //換算成天 小數(shù)點向下舍入取整
 var d=Math.floor(ltime/(24*60*60));
 //換算成小時取去掉天數(shù)的余數(shù)(也就是小時) 小數(shù)點向下舍入取整
 var h=Math.floor(ltime/(60*60)%24);
 //換算成分鐘取去掉小時的余數(shù)(也就是分鐘) 小數(shù)點向下舍入取整
 var m=Math.floor(ltime/60%60);
 //換算成分鐘取去掉分鐘的余數(shù)(也就是秒) 小數(shù)點向下舍入取整
 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);
 }
 //當秒數(shù)為個位數(shù)時前面+字符串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的數(shù)字所以+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); 
 }
 //倒計時天數(shù)計算
 function day(){
 var myDate=new Date();//獲取當前時間
 var endtime=new Date("2018,1,1");//獲取結(jié)束時間
 //先換算成毫秒再相減就是時間差,再除以一天的毫秒數(shù)結(jié)果是帶有小數(shù)點的,用math方法進一位取整
 var ltime=Math.ceil((endtime.getTime()-myDate.getTime())/(24*60*60*1000));
 document.getElementById("day").innerHTML="距2018年元旦還有:"+ltime+"天";
 }
 </script>
</body> 
</html> 

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!

相關(guān)文章

  • 完全不用基礎(chǔ)的HTML5入門篇教程

    完全不用基礎(chǔ)的HTML5入門篇教程

    HTML的全稱為超文本標記語言,是一種標記語言。它包括一系列標簽.通過這些標簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等
    2022-03-03
  • javascript之函數(shù)直接量(function(){})()

    javascript之函數(shù)直接量(function(){})()

    javascript之函數(shù)直接量(function(){})()...
    2007-06-06
  • 淺談一下JavaScript與C++的差異

    淺談一下JavaScript與C++的差異

    這篇文章主要介紹了淺談一下JavaScript與C++的差異,本來兩門語言各有各的戰(zhàn)場,并沒什么交集,但自從?Node.js?框架出現(xiàn)之后,JavaScript?就擺脫了瀏覽器的樊籠,開始滲透進入系統(tǒng)應(yīng)用的領(lǐng)域
    2023-04-04
  • 老生常談 關(guān)于JavaScript的類的繼承

    老生常談 關(guān)于JavaScript的類的繼承

    下面小編就為大家?guī)硪黄仙U?關(guān)于JavaScript的類的繼承。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • AngularJS 指令詳細介紹

    AngularJS 指令詳細介紹

    本文主要介紹AngularJS 指令,這里詳細介紹AngularJS 指令知識并提供實例代碼,有需要的小伙伴可以參考下
    2016-07-07
  • Javascript SHA-1:Secure Hash Algorithm

    Javascript SHA-1:Secure Hash Algorithm

    Javascript SHA-1:Secure Hash Algorithm...
    2006-12-12
  • javascript數(shù)據(jù)類型基礎(chǔ)示例教程

    javascript數(shù)據(jù)類型基礎(chǔ)示例教程

    今天總結(jié)一下javascript中的數(shù)據(jù)類型,希望大家能對javascript數(shù)據(jù)類型基礎(chǔ)有扎實的掌握,祝大家多多進步,早日升職加薪
    2022-03-03
  • js中top/parent/frame概述及案例應(yīng)用

    js中top/parent/frame概述及案例應(yīng)用

    top:永遠指分割窗口最高層次的瀏覽器窗口;parent:包含當前分割窗口的父窗口,本文將圍繞js中top、parent、frame進行講述及他們的應(yīng)用案例
    2013-02-02
  • JavaScript門道之標準庫

    JavaScript門道之標準庫

    標準庫指的是js的標準內(nèi)置對象,是js這門語言本身初始時提供的在全局范圍的對象,需要的朋友可以參考下
    2018-05-05
  • JavaScript Math.ceil 方法(對數(shù)值向上取整)

    JavaScript Math.ceil 方法(對數(shù)值向上取整)

    js Math.ceil用于對數(shù)值向上取整,即得到大于或等于該數(shù)值的最小整數(shù),需要的朋友可以參考下
    2015-01-01

最新評論