JavaScript實(shí)現(xiàn)動(dòng)態(tài)數(shù)字時(shí)鐘
更新時(shí)間：2021年05月28日 17:14:37 作者：小脆筒style
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)數(shù)字時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)動(dòng)態(tài)數(shù)字時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)效果
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 1000px;
height: 300px;
background-image:url(1.jpg);
line-height: 300px;
text-align: center;
font-size: 50px;
font-weight: 500;
margin: 100px auto;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box = document.getElementById('box')
//不足十位補(bǔ)零
let addZero = val => val < 10 ? '0' + val : val
//把阿拉伯?dāng)?shù)字的星期轉(zhuǎn)化為中國(guó)漢字的星期 // 星期映射表
let trans = val => {
let obj = {
0: '日',
1: '一',
2: '二',
3: '三',
4: '四',
5: '五',
6: '六'
}
return obj[val]
}
setTime ()
//獲取時(shí)間的方法
function setTime() {
let time = new Date();
let year = time.getFullYear(); // 獲取年
let month = time.getMonth() + 1; // 獲取月（是從0到11，所以我們要給他加1）
let date = time.getDate(); // 獲取日
let day = time.getDay(); // 獲取星期幾(0是星期日)
let hour = time.getHours(); // 獲取小時(shí)
let min = time.getMinutes(); // 獲取分鐘
let sec = time.getSeconds(); // 獲取秒
let value = year + '年' + addZero(month) + '月' + addZero(date) + '日 星期' + trans(day) + ' '+addZero(hour) +
'時(shí)' + addZero(min) + '分' + addZero(sec) + '秒'
// 把所有的時(shí)間拼接到一起
box.innerText = value
// console.log(value)
// 把拼接好的時(shí)間插入到頁(yè)面
}
// 讓定時(shí)器每間隔一秒就執(zhí)行一次setTime這個(gè)方法（這是實(shí)現(xiàn)時(shí)鐘的核心）
setInterval(setTime, 1000)
</script>
</body>
</html>
素材
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家
相關(guān)文章
javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法
下面小編就為大家?guī)硪黄猨avascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
JavaScript設(shè)計(jì)模式之抽象工廠模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之抽象工廠模式介紹,抽象工廠模式就是對(duì)功能類單獨(dú)創(chuàng)建工廠類,這樣就不必修改之前的代碼,又?jǐn)U展了功能,需要的朋友可以參考下2014-12-12
JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼,通過鼠標(biāo)事件結(jié)合定時(shí)函數(shù)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
reveal.js是一款開源的HTML演示框架,由Hakim El Hattab開發(fā),遵循MIT許可證,它支持嵌套幻燈片、Markdown、自動(dòng)動(dòng)畫、PDF導(dǎo)出等多種功能,本文就來介紹一下如何使用,感興趣的可以了解一下2024-09-09
JavaScript知識(shí)點(diǎn)總結(jié)(十)之this關(guān)鍵字
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(十)之this關(guān)鍵字的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
支付寶小程序?qū)崿F(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了支付寶小程序?qū)崿F(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文給大家分享Bootstrap的圖片輪播示例代碼，小伙伴們快來圍觀吧。2015-08-08
element ui分頁(yè)多選,翻頁(yè)記憶的實(shí)例
今天小編就為大家分享一篇element ui分頁(yè)多選,翻頁(yè)記憶的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
boostrap模態(tài)框二次彈出清空原有內(nèi)容的方法
今天小編就為大家分享一篇boostrap模態(tài)框二次彈出清空原有內(nèi)容的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
基于JavaScript實(shí)現(xiàn)前端文件的斷點(diǎn)續(xù)傳
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)前端文件的斷點(diǎn)續(xù)傳的相關(guān)資料,需要的朋友可以參考下2016-10-10