Cet article décrit l'effet de l'horloge numérique du compte à rebours implémenté par JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Countdown Clock implémenté par JavaScript </Title>
<style>
corps, div {marge: 0; rembourrage: 0;}
Corps {couleur: #ffff; police: 16px / 1.5 / 5fae / 8f6f / 96c5 / 9ed1;}
#CountDown {largeur: 300px; Text-Align: Centre; arrière-plan: # 1A1A1A; marge: 10px auto; rembourrage: 20px 0;}
entrée {Border: 0; largeur: 283px; hauteur: 50px; curseur: pointeur; margin-top: 20px; arrière-plan: url (// www.vevb.com/jscsss/demoimg/201210/btn-1.png) no-repeat;}
input.cancel {position d'arrière-plan: 0 -50px;}
Span {Color: # 000; largeur: 80px; line-height: 2; arrière-plan: #fbfbfb; bordure: 2px solide # b4b4b4; marge: 0 10px; padding: 0 10px;}
</ style>
<cript>
window.onload = function ()
{
var octountDown = document.getElementById ("Countdown");
var ainput = ocntrod.getElementsByTagName ("Input") [0];
var timer = null;
ainput.onclick = function ()
{
this.classname == ""? (Timer = setInterval (UpdateTime, 1000), UpdateTime ()): (ClearInterval (Timer));
this.className = this.classname == ''? "Annuler" : '';
};
Format de fonction (a)
{
retour a.toString (). Remplacer (/ ^ (/ d) $ /, '0 1 $')
}
fonction updatetime ()
{
var aspan = ocountDown.getElementsByTagName ("span");
var oremain = aspan [0] .innerhtml.replace (/ ^ 0 /, '') * 60 + paSeInt (aspan [1] .innerHtml.replace (/ ^ 0 /, ''));
if (oremain <= 0)
{
ClearInterval (temporisateur);
Retour
}
Oremain--;
aspan [0] .InnerHtml = format (parseInt (oremain / 60));
Oremain% = 60;
aspan [1] .InnerHtml = format (parseInt (oremain));
}
}
</cript>
</ head>
<body>
<div id = "Countdown">
<span> 01 </span> min <span> 40 </span> secondes
<input type = "bouton" value = "" />
</div> wulin.com www.vevb.com Code Effets spéciaux
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.