JavaScript 動態時間日期

admin發表於2019-12-17
JavaScript

本文介紹一下如何實現簡單的動態時間日期效果。

實現原理非常簡單，就是每隔一秒獲取一次本地客戶度時間，並列印出來。

程式碼例項如下： 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  width:300px;
  height:30px;
  line-height:30px;
  margin:0px auto;
  text-align: center;
  border:1px dotted #ccc;
}
</style>  
<script type="text/javascript">
let newTimer =()=> {
  let date = new Date();
  let str = date.toLocaleDateString();
  str += "  " + week();
  str += "  " + date.toLocaleTimeString();
  let odiv = document.getElementById("ant");
  odiv.innerHTML = str;
  setTimeout(newTimer, 1000);
}    
let week=()=> {
  let d, day, x, s = " ";
  x=["星期日", "星期一", "星期二","星期三", "星期四", "星期五","星期六"];
  d = new Date();
  day = d.getDay();
  return (s += x[day]);
}

window.onload =()=>{
  newTimer();
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

上述程式碼實現了動態獲取本地時間日期的效果，下面對其進行詳細分析。

一.實現原理：

實現動態時間日期效果原理非常簡單，我們知道時鐘是每隔1秒走動一下。

那麼我們每隔1秒獲取一次當前客戶端的時間日期，並將其寫入div。

於是在視覺上就形成了動態的時間日期效果。

二.程式碼註釋： 

[JavaScript] 純文字檢視 複製程式碼
let newTimer =()=> {
  let date = new Date();
  let str = date.toLocaleDateString();
  str += "  " + week();
  str += "  " + date.toLocaleTimeString();
  let odiv = document.getElementById("ant");
  odiv.innerHTML = str;
  setTimeout(newTimer, 1000);
}

此方法是效果實現的核心。

建立Date物件例項，然後呼叫相應的方法獲取對應的時間日期。

在通過字串拼接操作，最終生成我們看到的時間日期字串，並寫入div。

此時還處於靜態狀態，要實現動態效果，最後一行程式碼setTimeout(newTimer, 1000)是關鍵。

利用setTimeout()實現遞迴呼叫newTimer()函式，最終實現動態效果。 

[JavaScript] 純文字檢視 複製程式碼
let week=()=> {
  let d, day, x, s = " ";
  x=["星期日", "星期一", "星期二","星期三", "星期四", "星期五","星期六"];
  d = new Date();
  day = d.getDay();
  return (s += x[day]);
}

此方法實現了將星期以中文方式顯示。

將中文星期寫入陣列，然後根據getDay()方法的返回值作為索引獲取。

getDay()返回值介於0-6之間，返回值為0表示是週一，以此類推。

相關文章