Maison >interface Web >js tutoriel >Méthode de mise en œuvre de l'horloge d'arrière-plan JavaScript_compétences Javascript
L'exemple de cet article décrit la méthode d'implémentation de l'horloge d'arrière-plan javascript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Ce qui suit est le code complet de cet effet. [Mieux vaut commencer avec une page vide]
<html> <head> <TITLE>背景时钟</TITLE> <script language=javaScript> <!--// function clockon() { thistime= new Date() var hours=thistime.getHours() var minutes=thistime.getMinutes() var seconds=thistime.getSeconds() if (eval(hours) <10) {hours="0"+hours} if (eval(minutes) < 10) {minutes="0"+minutes} if (seconds < 10) {seconds="0"+seconds} thistime = hours+":"+minutes+":"+seconds if(document.all) { bgclocknoshade.innerHTML=thistime bgclockshade.innerHTML=thistime } if(document.layers) { document.bgclockshade.document.write('<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:152px">'+thistime+'</div>') document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px">'+thistime+'</div>') document.close() } var timer=setTimeout("clockon()",200) } //--> </script> <link rel="stylesheet" href="../style.css"></head> <body onLoad="clockon()"> <div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px"></div> <div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:DDDDDD;font-size:120px;top:100px;left:150px"></div> <div id="mainbody" style="position:absolute; visibility:visible"> </div> </body> </html>
Remarque : la position de l'affichage de l'horloge doit être déterminée en modifiant les paramètres TOP et LEFT. TOP représente la valeur en pixels du calque en haut de l'écran et LEFT représente la valeur en pixels du calque à gauche.
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.