javascript實現的動態時間日期效果

antzone發表於2017-03-21
JavaScript

很多網頁中都有這樣的效果，那就是時間日期是動態的，也就是能夠實時的變化，首先這比較人性化，第二個也可以讓網頁有動態的感覺，是一種提高網頁人性化程度和給瀏覽者留下較為深刻印象的舉措，下面就是一段能夠實現此功能的程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">  
function time(){ 
  var dt; 
  var date = new Date(); 
  dt = date.getFullYear() 
  + "/" 
  + date.getMonth() 
  + "/" 
  + date.getDate() 
  + " " 
  + (date.getHours()<= 9 ? '0'+date.getHours():date .getHours()) 
  + ":" 
  + ((date.getMinutes() <= 9 ? '0' + date.getMinutes():date.getMinutes())) 
  + ":" 
  + (date.getSeconds() <= 9 ? '0' + date.getSeconds():date.getSeconds()); 
  return dt; 
} 
setInterval("document.getElementById('ht').innerHTML=time()",1000); 
</script> 
</head> 
<body> 
<span id="ht"></span> 
</body> 
</html>

以上程式碼實現了我們的要求，程式碼比較簡單這裡就不多介紹了，可以參閱相關閱讀。

相關閱讀:

1.時間物件可以參閱JavaScript Date 物件一章節。 

2.setInterval()函式可以參閱JavaScript setInterval()一章節。 

3.innerHTML屬性可以參閱js innerHTML一章節。 

相關文章