Comment implémenter un simple effet de compte à rebours en js-js tutoriel-php.cn

Comment implémenter un simple effet de compte à rebours en js

王林

Libérer： 2020-04-22 09:20:36

avant

2712 Les gens l'ont consulté

Comment implémenter un simple effet de compte à rebours en js

Pour mettre en œuvre la fonction de compte à rebours, obtenez d'abord l'heure cible, puis soustrayez l'heure cible de l'heure actuelle, et enfin convertissez le décalage horaire en jours, heures, minutes et secondes. Étant donné que le temps obtenu ne peut pas être calculé directement, la méthode object.getTime() peut être utilisée pour le convertir dans le même type pour le calcul.

Instructions associées :

Si vous souhaitez que l'interface d'affichage soit plus belle, vous pouvez ajouter un style.

Comment implémenter un simple effet de compte à rebours en js

<script>
 function show(){
  //获取目的日期
  var myyear=document.getElementById("year").value;
  var mymonth=document.getElementById("month").value-1;
  var myday=document.getElementById("day").value;
  var myhour=document.getElementById("hour").value;
  var myminute=document.getElementById("minute").value;
  var mysecond=document.getElementById("second").value;
  var time=Number(new Date(myyear,mymonth,myday,myhour,myminute,mysecond));
  // var time=new Date(myyear,mymonth,myday,myhour,myminute,mysecond).getTime();
  //获取当前时间
  var nowTime=Date.now();
  // var nowTime=new Date().getTime();
  //获取时间差
  var timediff=Math.round((time-nowTime)/1000);
  //获取还剩多少天
  var day=parseInt(timediff/3600/24);
  //获取还剩多少小时
  var hour=parseInt(timediff/3600%24);
  //获取还剩多少分钟
  var minute=parseInt(timediff/60%60);
  //获取还剩多少秒
  var second=timediff%60;
  //输出还剩多少时间
  document.getElementById("1").innerHTML=day;
  document.getElementById("2").innerHTML=hour;
  document.getElementById("3").innerHTML=minute;
  document.getElementById("4").innerHTML=second;
  setTimeout(show,1000);
  if(timediff==0){return;}
  }
 </script>

Copier après la connexion

Comment implémenter un simple effet de compte à rebours en js

<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 input{width:50px;height: 20px;border:1px solid black;}
 .time1 span{display:inline-block;width:40px;height: 20px;}
 </style>
</head>
<body>
 <form>目的日期：
 <input type="text" id="year"><span>年</span>
 <input type="text" id="month"><span>月</span>
 <input type="text" id="day"><span>日</span>
 <input type="text" id="hour"><span>时</span>
 <input type="text" id="minute"><span>分</span>
 <input type="text" id="second"><span>秒</span>
 <input type="button" value="确定" οnclick="show()">
 </form>
 <div class="time1">还剩时间：
 <span id="1"></span>天 
 <span id="2"></span>时
 <span id="3"></span>分
 <span id="4"></span>秒
 </div>

Copier après la connexion

La difficulté du compte à rebours est principalement la conversion du format de l'heure et du format des nombres en plus de l'objet.getTime(). méthode, il existe une méthode Number(object).

Tutoriel recommandé : Tutoriel js

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!