Heim > Web-Frontend > js-Tutorial > Hauptteil

Zeigen Sie die aktuelle Systemzeit basierend auf javascript_javascript-Kenntnissen dynamisch an

WBOY
Freigeben: 2016-05-16 15:17:19
Original
1887 Leute haben es durchsucht

Das Beispiel dieses Artikels erläutert den detaillierten Code von Javascript zur dynamischen Anzeige der aktuellen Systemzeit. Der spezifische Inhalt ist wie folgt

  • (1) Zeit- und Datumsinformationen sollten in einem
  • angezeigt werden
  • (2) Timer: Greifen Sie jede Sekunde erneut auf die Systemzeit zu, setTimeout() des Fensterobjekts
  • (3) Zeitpunkt der Uhranzeige (Ereignis): Wird nach dem Laden der Webseite angezeigt, Ereignis wird geladen
  • (4) So schreiben Sie Zeit- und Datumsinformationen in das angegebene
    , das innerHTML-Attribut im DOM-Objekt

Rendering:

Spezifischer Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">


//定义函数:构建要显示的时间日期字符串
function showTime()
{
 //创建Date对象
 var today = new Date();
 //分别取出年、月、日、时、分、秒
 var year = today.getFullYear();
 var month = today.getMonth()+1;
 var day = today.getDate();
 var hours = today.getHours();
 var minutes = today.getMinutes();
 var seconds = today.getSeconds();
 //如果是单个数,则前面补0
 month  = month<10  &#63; "0"+month : month;
 day  = day <10  &#63; "0"+day : day;
 hours  = hours<10  &#63; "0"+hours : hours;
 minutes = minutes<10 &#63; "0"+minutes : minutes;
 seconds = seconds<10 &#63; "0"+seconds : seconds;
 
 //构建要输出的字符串
 var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
 
 //获取id=result的对象
 var obj = document.getElementById("result");
 //将str的内容写入到id=result的<div>中去
 obj.innerHTML = str;
 //延时器
 window.setTimeout("showTime()",1000);
}
</script>
<style type="text/css">
#result{
 width:500px;
 border:1px solid #CCCCCC;
 background:#FFFFCC;
 margin:50px auto;
 font-size:24px;
 color:#FF0000;
 padding:20px;
}
</style>
</head>

<body onload="showTime()">
<div id="result"></div>
</body>
</html>
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage