Maison > Article > interface Web > js timer implémentation de l'exemple d'analyse de l'effet de compte à rebours
js timer implémentation de l'exemple d'analyse de l'effet de compte à rebours
- 小云云original
- 2018-01-19 14:20:281452parcourir
Cet article présente principalement l'effet de compte à rebours de js en détail à tout le monde. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.
Fonction Date
Compte à rebours = Utiliser l'heure future - Heure actuelle
Problème : Distance temporelle future 1970 millisecondes - La distance entre aujourd'hui et 1970 est de 1
Utilisez le nombre de millisecondes dans le futur - le nombre de millisecondes maintenant et continuez simplement à convertir
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
font-size:30px;
text-align: center;
color:red;
}
</style>
<script>
window.onload = function(){
var demo = document.getElementById("demo");
var endTime = new Date("2017/11/12 17:30:00"); // 最终时间
setInterval(clock,1000); // 开启定时器
function clock(){
var nowTime = new Date(); // 一定是要获取最新的时间
// console.log(nowTime.getTime()); 获得自己的毫秒
var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
// 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整
// console.log(second);
// 一小时 3600 秒
// second / 3600 一共的小时数 /24 天数
var d = parseInt(second / 3600 / 24); //天数
//console.log(d);
var h = parseInt(second / 3600 % 24) // 小时
// console.log(h);
var m = parseInt(second / 60 );
//console.log(m);
var s = parseInt(second ); // 当前的秒
console.log(s);
/* if(d<10)
{
d = "0" + d;
}*/
d<10 ? d="0"+d : d;
h<10 ? h="0"+h : h;
m<10 ? m="0"+m : m;
s<10 ? s="0"+s : s;
demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
}
}
</script>
</head>
<body>
<p id="demo"></p>
</body>
</html>Plus Pour le contenu, veuillez vous référer à : Résumé de l'implémentation js de la fonction de compte à rebours
Recommandations associées :
Comment implémenter la fonction de barre de progression de la minuterie h5
Javascript implémente un exemple de fonction de barre de progression basé sur la minuterie
Partage de la façon d'utiliser le plug-in de minuterie de secteur jQuery pietimer
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!