JS實現(xiàn)圖片數(shù)字時鐘
更新時間：2021年10月04日 09:23:03 作者：是福不是禍
這篇文章主要為大家詳細介紹了JS實現(xiàn)圖片數(shù)字時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)圖片數(shù)字時鐘的具體代碼，供大家參考，具體內容如下
首先這是我們準備的圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<div>
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/10.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/10.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
</div>
<script type="text/javascript">
//函數(shù)
function get(){
//獲取頁面img
var img=document.getElementsByTagName('img');
//獲取時間
var date=new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var secind=date.getSeconds();
//補0
if(hour<10){
hour='0'+hour;
}else if(minute<0){
minute='0'+minute;
}else if (secind) {
secind='0'+secind;
}
//字符串拼接
img[0].src='img/'+parseInt(hour/10)+'.png';
img[1].src='img/'+hour%10+'.png';
img[3].src='img/'+parseInt(minute/10)+'.png';
img[4].src='img/'+minute%10+'.png';
img[6].src='img/'+parseInt(secind/10)+'.png';
img[7].src='img/'+secind%10+'.png';
}
get();
setInterval(get,1000);
//調用沒個一秒刷新一次
</script>
</body>
</html>
最后實現(xiàn)
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
函數(shù)就是一種封裝,由事件驅動的或者當它被調用時執(zhí)行的可重復使用的代碼塊,下面這篇文章主要給大家介紹了關于JavaScript函數(shù)的定義和基本使用方法的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關于前端在WebSocket中加入Token的解決方式,文中提供了3種解決方法,對大家學習或者使用WebSocket具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了BootStrap實用代碼片段之一，總結在使用BootStrap中遇到的問題，并記錄解決方法，感興趣的小伙伴們可以參考一下2016-03-03
基于JavaScript實現(xiàn)新增內容滾動播放效果附完整代碼
這篇文章主要介紹了基于JavaScript實現(xiàn)新增內容滾動播放效果,效果非常棒，實現(xiàn)代碼簡單易懂，需要的朋友可以參考下2017-08-08
本文給大家分享的是網(wǎng)易云課堂中金旭亮老師的課堂筆記，對于大家學習javascript非常有幫助，這里推薦給小伙伴們2015-07-07
Javascript iframe交互并兼容各種瀏覽器的解決方法
這篇文章主要介紹了Javascript iframe交互并兼容各種瀏覽器的解決方法的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
js實現(xiàn)hashtable的賦值、取值、遍歷操作實例詳解
這篇文章主要介紹了js實現(xiàn)hashtable的賦值、取值、遍歷操作,結合實例形式分析了哈希表的原理、哈希鍵值對操作相關技巧,需要的朋友可以參考下2016-12-12
js入門之Function函數(shù)的使用方法【新手必看】
本篇文章主要介紹js Function函數(shù)的使用方法，應該對初學Js的朋友們會有所幫助,下面就隨小編一起來看下吧2016-11-11
使用Bootstrap Tabs選項卡Ajax加載數(shù)據(jù)實現(xiàn)
這篇文章主要介紹了使用Bootstrap Tabs選項卡Ajax加載數(shù)據(jù)實現(xiàn),以及遇到的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了基于JS實現(xiàn)類似支付寶支付密碼輸入框功能，密碼框只準輸入數(shù)字且只可以輸入6位數(shù)字，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-09-09