溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關(guān)JavaScript中怎么圖片實時時鐘，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p p { float: left; width: 30px; font-size: 120px; } #hours0,#hours1,#minute0,#minute1,#second0,#second1 { width: 200px; height: 165px; background-image: url("img/sztp.jpg"); } </style></head><body> <p> <p id="hours0"></p> <p id="hours1"></p> <p>:</p> <p id="minute0"></p> <p id="minute1"></p> <p>:</p> <p id="second0"></p> <p id="second1"></p> </p><script> var hours0,hours1,minute0,minute1,second0,second1; var imgPositionList=[];//各數(shù)字的位置 init(); function init() { hours0=document.getElementById("hours0");//小時1 hours1=document.getElementById("hours1");//小時2 minute0=document.getElementById("minute0");//分鐘1 minute1=document.getElementById("minute1");//分鐘2 second0=document.getElementById("second0");//秒針1 second1=document.getElementById("second1");//秒針2 for(var i=0;i<10;i++){ //循環(huán)賦值各數(shù)字的位置 if(i<5){ //第一排 imgPositionList.push({x:-i*208,y:0}); continue; } imgPositionList.push({x:-(i-5)*208,y:-173}) //第二排 } console.log( imgPositionList); imgPositionList.unshift(imgPositionList.pop());//將0 ：最末尾的圖片 刪除 ，返回的值提到最前面。 setInterval(animation,16); } function animation() { var date=new Date(); var hour=date.getHours().toString().split("").map(function (t) { return getNum(t) }); var minutes=date.getMinutes().toString().split("").map(function (t) { return getNum(t) }); var seconds=date.getSeconds().toString().split("").map(function (t) { return getNum(t) }); getDoubleArr(hour); getDoubleArr(minutes); getDoubleArr(seconds); setTimeDiv(hours0,hour[0]); setTimeDiv(hours1,hour[1]); setTimeDiv(minute0,minutes[0]); setTimeDiv(minute1,minutes[1]); setTimeDiv(second0,seconds[0]); setTimeDiv(second1,seconds[1]); } function getDoubleArr(arr) { //字符串轉(zhuǎn)化數(shù)組 if(arr.length===1) arr.unshift(0); return arr; } function setTimeDiv(elem,num) { //時間與圖片的對應(yīng) clone(elem.style,{ backgroundPositionX: imgPositionList[num].x+"px", backgroundPositionY: imgPositionList[num].y+"px" }); } function getNum(str) { if(isNaN(Number(str))) return str; return Number(str); } function clone(target,source) { for(var key in source){ target[key]=source[key]; } }</script></body></html>
看完上述內(nèi)容，你們對JavaScript中怎么圖片實時時鐘有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
