La clé de la mise en œuvre de cet effet est l'utilisation d'objets de date et de setTimeout.
Il y a trois exemples au total. La structure HTML est la suivante, donc aucun style CSS n'est ajouté.
<body> Heure actuelle: <p id = "p1"> </p> Count-on de l'examen d'entrée du collège: <p id = "p2"> </p>
Comprendre principalement la mise en œuvre de JavaScript
window.onload = function () {var p1 = document.getElementyid ("p1"), p2 = document.getElementById ("p2"); p3 = document.getElementById ("p3"); showTime1 (); showTime2 (); showTime3 ();}1. Implémentation simple de l'affichage d'heure actuel
Fonction ShowTime1 () {var NowDate = new Date (); // Créez l'objet Date NowDate pour obtenir le temps actuel var année = NowDate.getlyEar (), // Get Year Month = NowDate.getMonth () + 1, // Get Month semaine = ["Sunday", "lundi", "mardi", "jeudi", "vendredi", "samedi", h = NowDate.Gethours (), M = NowDate.getMinutes (), S = NowDate.getSeconds (), H = Checktime (h), // Fonction Checktime est utilisé pour le formatage, les minutes, les seconds m = chèque (M), S = Checktime (S); p1.innerhtml = an + "année" + mois + "mois" + date + "jour" + semaine [jour] + h + ":" + m + ":" + s; setTimeout (showtime1, 1000); // répéter la fonction elle-même}La fonction de contrôle est la suivante:
Fonction Checktime (i) {if (i <10) {i = "0" + i; } retour i;}Parce que le format de temps que vous voyez habituellement est généralement 00:00:01, et Gethours, GetMinutes, GetSeconds obtient des formats 0 à 9, pas 00 à 09. Par conséquent, en train de passer de 9 à 10, il y a un seul chiffre qui devient un double chiffre, et il devient également 0 lorsque la charge est de 59 secondes à 0 seconde ou 59 minutes à 0 ou 23.
Par exemple, 23:59:59 devrait passer à 00:00:00 dans la seconde suivante; Si la fonction de vérification n'est pas utilisée pour le traitement, elle passera à 0: 0: 0, ce qui rendra le format un peu incohérent, et il existe également des mutations visuelles du nombre de mots croissant ou décroissant. (Les deux exemples suivants n'utilisent pas la fonction de vérification pour traiter le temps, la minute et le deuxième !!!)
2. L'effet de compte à rebours de l'examen d'entrée au collège est réalisé
fonction showtime2 () {var nowTime = new Date (), // Obtenez le temps de fin de fin = new Date ("2017/6/6"); // définir la fin Var LeftTime = endtime.getTime () - NowTime.gettime (), // les millisecondes à partir de la fin de l'heure = Math.floor (gauche-temps / (1000 * 60 * * 24)), // le nombre de jours Leftth = math.floor (Leftime / (1000 * 60 * 60)% 24), // le nombre d'heures de gauche = math.floor (Leftime / (1000 * 60% 60); // le nombre de minutes Leftts = Math.floor (Leftime / 1000% 60); // le nombre de secondes p2.innerhtml = gauche + "jour" + lefth + ":": ":" + " setTimeout (ShowTime2, 1000); }Parmi eux, les points les plus importants:
① Définir l'heure de fin de fin = nouvelle date ("2017/6/6") est d'utiliser un nouvel objet de date avec les paramètres, et directement la nouvelle date () est d'obtenir directement l'heure actuelle;
② La méthode gettime () obtient le nombre de millisecondes à partir du 1er janvier 1970.
③ Calcul des jours, heures, minutes et secondes,% (opération de modulo). Obtenez les millisecondes (millisecondes restantes) à partir de la fin de l'heure, divisez par 1000 pour obtenir les secondes restantes, divisez par 60 pour obtenir les minutes restantes et divisez par 60 pour obtenir les heures restantes. Divisé par 24 pour obtenir les jours restants. Deux secondes restantes Le module de l'heure gauche / 1000 60 obtient le nombre de secondes, les minutes restantes du module à gauche / (1000 * 60) 60 obtient le nombre de minutes, le module de temps gauche / (1000 * 60 * 60) 24 obtient le nombre d'heures.
3. Effet à rebours de l'achat de précipitation à durée limitée
fonction showtime3 () {var nowtime = new Date (), endtime = new Date ("2020 / 1/1,00: 00: 00"), // définir la fin de l'heure restante = ParseInt ((endtime.gettime () - maintenant.gettime ()) / 1000), d = math.floor (Leftime / (60 *),), h = math. m = math.floor (gauche / 60% 60), s = math.floor (Leftime% 60); p3.innerhtml = d + "day" + h + "hour" + m + "minute" + s + "second"; setTimeout (ShowTime3, 1000); }En fait, il est similaire au deuxième exemple, la différence est que l'heure de fin est définie nouvelle date ("2020 / 1/1,00: 00: 00")
Vous trouverez ci-dessous le code complet
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> Effet à compteur </ title> <script type = "text / javascript"> Fonction Checktime (i) {if (i <10) {i = "0" + i; } return i; } window.onload = function () {var p1 = document.getElementById ("p1"), p2 = document.getElementById ("p2"); showTime1 (); showTime2 (); showTime3 (); } fonction showTime1 () {var NowDate = new Date (); var année = NowDate.getlyear (), // Année Mois = NowDate.getMonth () + 1, // Date de mois = NowDate.getDate (), // Day Week = ["Sunday", "lundi", "Mardi", "Jeudi", "Friday", "Saturday"], Day = NowDate.getDay (), // GetTay Get 0-6 H = NowDate.GethoUres (), H = H), HETDET, 0-6 H = NOWDAT m = NowDate.getMinutes (), m = Checktime (m), s = NowDate.getSeconds (), S = Checktime (S); p1.innerhtml = an + "année" + mois + "mois" + date + "jour" + semaine [jour] + h + ":" + m + ":" + s; setTimeout (ShowTime1, 1000); } fonction showtime2 () {var nowtime = new Date (), endtime = new Date ("2017/6/6"); var LeftTime = endtime.getTime () - NowTime.GetTime (), Leftd = Math.floor (LeftTime / (1000 * 60 * 60 * 24)), gauche = math.floor (Leftime / (1000 * 60 * 60 * 60), 24), Leftm = math.floor (gauche / 1000% 60); p2.InnerHtml = Leftd + "Day" + Lefth + ":" + LeftM + ":" + gauche; setTimeout (ShowTime2, 1000); } function showtime3() { var nowtime=new Date(), endtime=new Date("2020/1/1,00:00:00"), lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000), d=Math.floor(lefttime/(60*60*24)), h=Math.floor(lefttime/(60*60)%24), m = math.floor (gauche / 60% 60), s = math.floor (Leftime% 60); p3.innerhtml = d + "day" + h + "hour" + m + "minute" + s + "secondes"; setTimeout (ShowTime3, 1000); } </ script> </ head> <body> Heure actuelle: <p id = "p1"> </p> Count-coulage de l'examen d'entrée du collège: <p id = "p2"> </p>L'implémentation des effets spéciaux JavaScript ci-dessus - Un exemple simple de l'effet de temps et de compte à rebours actuel est tout le contenu que j'ai partagé avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.