Maison > Article > interface Web > Comment implémenter un simple effet de compte à rebours en js
Comment implémenter un simple effet de compte à rebours en js
- 王林avant
- 2020-04-22 09:20:362657parcourir
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.
<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>
<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>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!