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)化為中國漢字的星期 // 星期映射表
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í)間插入到頁面
}
// 讓定時(shí)器每間隔一秒就執(zhí)行一次setTime這個(gè)方法（這是實(shí)現(xiàn)時(shí)鐘的核心）
setInterval(setTime, 1000)
</script>
</body>
</html>
素材
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家
相關(guān)文章
經(jīng)常用到對xml的操作，Java里面有dom和dom4j等工具類，但是Javascript就沒有，所以自己寫了一個(gè)，目前算作第一個(gè)版本吧?？隙ㄟ€有很多地方需要改進(jìn)，如果有需要用的朋友，可以把bug和需要完善改進(jìn)的地方留言或評(píng)論。2009-10-10
JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
JS實(shí)現(xiàn)的文字與圖片定時(shí)切換效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的文字與圖片定時(shí)切換效果代碼,可實(shí)現(xiàn)定時(shí)切換及鼠標(biāo)點(diǎn)擊切換兩種效果,涉及JavaScript鼠標(biāo)事件控制頁面樣式的相關(guān)技巧,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JS模擬按鈕點(diǎn)擊功能的方法,結(jié)合實(shí)例形式分析了JavaScript模擬點(diǎn)擊按鈕事件的實(shí)現(xiàn)技巧,并附帶了JavaScript模擬點(diǎn)擊鏈接的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-12-12
基于javascript實(shí)現(xiàn)的搜索時(shí)自動(dòng)提示功能
這篇文章主要介紹了基于javascript實(shí)現(xiàn)的搜索時(shí)自動(dòng)提示功能，非常實(shí)用，推薦給需要的小伙伴參考下。2014-12-12
js版掃雷實(shí)現(xiàn)代碼 原理不錯(cuò)
前一段時(shí)間在圖書館看了本關(guān)于JavaScript的書，上面講怎樣用js編推箱子小游戲。我想，那掃雷也當(dāng)然能編出來，然后就用DW試了試，結(jié)果如下。2009-11-11
UniApp中Scroll-View設(shè)置占滿下方剩余高度的方法記錄
在使用uniapp開發(fā)項(xiàng)目過程中有時(shí)候會(huì)想讓一些組件占有屏幕剩余的高度,下面這篇文章主要給大家介紹了關(guān)于UniApp中Scroll-View設(shè)置占滿下方剩余高度的方法,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了JavaScript中變量、指針和引用功能與操作,結(jié)合實(shí)例形式分析了javascript變量、指針與引用的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
JS實(shí)現(xiàn)十分鐘倒計(jì)時(shí)代碼實(shí)例
在本篇文章里我們給大家分享了關(guān)于JS實(shí)現(xiàn)十分鐘倒計(jì)時(shí)的相關(guān)實(shí)例代碼，有需要的朋友們可以學(xué)習(xí)下。2018-10-10
本文中，我將會(huì)通過類數(shù)組對象（array like object），探索javascript中的length屬性的一些秘密。2011-07-07