快捷導(dǎo)航

js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的數(shù)字時(shí)鐘效果

更新時(shí)間：2017年03月29日 10:06:36 作者：bad丶小

本文主要介紹了js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的數(shù)字時(shí)鐘效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧

效果圖：

代碼如下：

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
  <title>一個(gè)簡(jiǎn)單的數(shù)字時(shí)鐘</title>
  <script type="text/javascript" charset="utf-8">
   // 定義一個(gè)函數(shù)用以顯示當(dāng)前時(shí)間
   function displayTime() {
    var elt = document.getElementById("clock"); // 通過id= "clock"找到元素
    var now = new Date(); // 得到當(dāng)前時(shí)間
    elt.innerHTML = now.toLocaleTimeString(); //讓elt來顯示它
    setTimeout(displayTime,1000); //在1秒后再次執(zhí)行
   }
   window.onload = displayTime; //當(dāng)onload事件發(fā)生時(shí)開始顯示時(shí)間
  </script>
  <style type="text/css" media="all">
   #clock {
    font: bold 24pt sans;
    background: #ddf;
    padding: 10px;
    border: 2px solid black;
    border-radius: 10px;
   }
  </style>
 </head>
 <body>
  <h1>一個(gè)簡(jiǎn)單的數(shù)字時(shí)鐘</h1>
  <span id="clock"></span>
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

淺談ES6 模板字符串的具體使用方法
本篇文章主要介紹了淺談ES6 模板字符串的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
淺析JavaScript中的常用算法與函數(shù)
這篇文章主要介紹了JavaScript中的常用算法與函數(shù)。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
js獲取dom元素寬高的幾種方法
這篇文章主要給大家介紹了關(guān)于js獲取dom元素寬高的幾種方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-08-08
十大熱門的JavaScript框架和庫
這篇文章主要為大家詳細(xì)介紹了十大熱門的JavaScript框架和庫，前端必備，感興趣的小伙伴們可以參考一下
2017-03-03
JS中數(shù)組與對(duì)象相互轉(zhuǎn)換的實(shí)現(xiàn)方式
這篇文章主要介紹了JS中數(shù)組與對(duì)象相互轉(zhuǎn)換的實(shí)現(xiàn)方式，文章通過代碼示例講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-04-04
javascript 貪吃蛇實(shí)現(xiàn)代碼
最近在學(xué)Javascript，花了半個(gè)月的時(shí)間終于把《Javascript權(quán)威指南》(推薦此書，入門級(jí)) 掃完。在學(xué)習(xí)的過程中發(fā)現(xiàn)使用JS實(shí)現(xiàn)動(dòng)態(tài)效果挺有趣的。
2008-11-11
本地存儲(chǔ)cookie、localStorage和sessionStorage示例詳解
cookie、localStorage?和?sessionStorage都是在客戶端存儲(chǔ)數(shù)據(jù)的方式，但它們之間有一些區(qū)別,下面這篇文章主要給大家介紹了關(guān)于JavaScript中cookie、localStorage和sessionStorage的相關(guān)資料,需要的朋友可以參考下
2024-03-03
BootStrap 實(shí)現(xiàn)各種樣式的進(jìn)度條效果
這篇文章主要介紹了BootStrap 實(shí)現(xiàn)各種樣式的進(jìn)度條效果,代碼分為動(dòng)態(tài)和疊加兩種效果，需要的朋友可以參考下
2016-12-12
JS實(shí)現(xiàn)滾動(dòng)觸底的思路與代碼(附PC端滾動(dòng)分頁加載數(shù)據(jù))
Javascript實(shí)現(xiàn)當(dāng)頁面滾動(dòng)到底部時(shí)觸發(fā)加載事件,可以通過監(jiān)聽窗口的滾動(dòng)事件,同時(shí)判斷當(dāng)前滾動(dòng)條的位置和文檔總高度來實(shí)現(xiàn)該功能,這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)滾動(dòng)觸底的思路與代碼,文中還附PC端滾動(dòng)分頁加載數(shù)據(jù),需要的朋友可以參考下
2024-06-06
javascript中如何快速獲取數(shù)組最后一個(gè)值
這篇文章主要介紹了javascript中如何快速獲取數(shù)組最后一個(gè)值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01