Native js implémente la fonction de compte à rebours des jours fériés (code ci-joint)-js tutoriel-php.cn

Native js implémente la fonction de compte à rebours des jours fériés (code ci-joint)

亚连

Libérer： 2018-05-19 13:37:30

original

3276 Les gens l'ont consulté

Cet article partage principalement l'exemple de code pour implémenter la fonction de compte à rebours des vacances en js natif. Les amis intéressés peuvent venir le voir ensemble.

Points clés de connaissance

Principe de mise en œuvre :

Utiliser l'heure de fin - actuelle. time = Différence horaire

Le décalage horaire de l'heure actuelle diminuera naturellement de 1 seconde à chaque fois qu'une seconde passe

L'heure actuelle doit donc être mise à jour toutes les 1 seconde pour obtenir l'effet compte à rebours

2. Ce à quoi il faut prêter attention, c'est la conversion entre les temps et le traitement des valeurs obtenues

3. Méthodes utilisées :

obj.getTime() //换算成毫秒
Math.floor() //把小数点向下舍入结果取一个整数
50%24 // 这是对数值求余的方法，意思是 假如有50个小时，一天24个小时 这个得出的结果就是 余数是2

Copier après la connexion

Il y a des commentaires détaillés dans le code complet pour des calculs numériques spécifiques

Code complet

Remarque : le code est joint pour afficher le format standard actuel de l'heure et du compte à rebours

<!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>
 <p id="time"></p>
 <br/>
 <p id="day"></p>
 <br/>
 <p id="tm"></p>
 <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>

Copier après la connexion

est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir. .

Articles associés :

Explication détaillée de l'utilisation de la délégation d'événements dans JS

Yuansheng JS crée une page de loterie

p5.jsImplémentation de l'animation en spirale dorée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!