本文實例為大家分享了js實現(xiàn)圖片實時時鐘的具體代碼,供大家參考,具體內(nèi)容如下
創(chuàng)新互聯(lián)專注于瑞安企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站開發(fā)。瑞安網(wǎng)站建設(shè)公司,為瑞安等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站設(shè)計,專業(yè)設(shè)計,全程項目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)描述:
將下圖作為時間的背景,實現(xiàn)隨時時鐘的效果。
效果:
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div div { 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> <div> <div id="hours0"></div> <div id="hours1"></div> <div>:</div> <div id="minute0"></div> <div id="minute1"></div> <div>:</div> <div id="second0"></div> <div id="second1"></div> </div> <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>
當(dāng)前文章:js實現(xiàn)圖片實時時鐘-創(chuàng)新互聯(lián)
網(wǎng)站地址:http://muchs.cn/article4/dheioe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、企業(yè)網(wǎng)站制作、微信公眾號、品牌網(wǎng)站制作、網(wǎng)頁設(shè)計公司、虛擬主機(jī)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容