1. 程式人生 > 程式設計 >javascript實現智慧手環時間顯示

javascript實現智慧手環時間顯示

本文例項為大家分享了javascript實現智慧手環時間顯示的具體程式碼,供大家參考,具體內容如下

javascript實現智慧手環時間顯示

程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
  <style>
    #shijian{
      width: 500px;height: 120px;background-color:#117dbb;
      margin: 50px auto;line-height: 120px;
      color: white;font-size: 22px;
      text-align: center;
      border-radius: 60px;
      box-shadow:#4f535a 0px 5px 10px;
    }
  </style>
</head>
<body>
  <div id ="shijian">顯示當前時間</div>
  <script>
    function showtime(){
      var a = new Date()
      var year = a.getFullYear()
      var month =jiaLing(a.getMonth()+1) 
      var day =jiaLing(a.getDate()) 
      var week = weekUp(a.getDay()) 
      var houer =jiaLing(a.getHours()) 
      var minute =jiaLing(a.getMinutes()) 
      var second =jiaLing(a.getSeconds()) 
      var str=year+"年"+month+"月"+day+"日 星期"+week+" " +houer+"時"+minute+"分"+second+"秒"
      return str;
    }
    function weekUp(i){
      var arr = ["日","一","二","三","四","五","六"]
      return arr[i]
    }
    function jiaLing(i){
      if(i<10){
        return "0"+i;
      }else{
        return i;
      }
    }
    setInterval(function(){
      var oDiv= document.getElementById("shijian");
      oDiv.innerHTML = showtime()
    },1000)
  </script>
</body>
</html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。