DIY旋轉時鐘

2021-07-25 04:59:54 字數 1919 閱讀 7252

純css,原生js編寫旋轉指標時鐘,附詳細講解

/*html***/

lang="en">

charset="utf-8">

diy旋轉時鐘title>

rel="stylesheet"

href="diyclock.css">

src="diyclock.js">

script>

head>

diy旋轉時鐘div>

class="box">

id="clock"

class="clock">

id="center"

class="center">

div>

id="center-01"

class="center-01">

div>

id="date"

class="date">

div>

id="hour"

class="hour">

div>

id="min"

class="min">

div>

id="sec"

class="sec">

div>

div>

div>

body>

html>

這裡是鐘錶的外觀,主要用了css一些屬性,可以根據自己喜歡的製作不同外觀的鐘錶

/*css**片*/

body

.box

.clock

.center

.center-01

.date

.hour

.min

.sec

.clock

em.clock

em.ishour

.clock

em.ishour

i

/*js**片*/

window.onload=function

() temp.style.csstext="left:"+pos.x+"px;top:"+pos.y+"px;-webkit-transform:rotate("+(i*6)+"deg);"

}/*獲取點的座標*/

function

getpose

(dep)

}/*獲取時間*/

function

currenttime

() if(day==2)

if(day==3)

if(day==4)

if(day==5)

if(day==6)

if(day==7)

odate.innerhtml=year+"-"+month+"-"+date+" 星期"+day;

/*讓時針,分針,秒針走起來*/

function

gotime

() if(m==60)

if(h>12)

h_dep=math.floor(m/12*6);/*時針偏移距離*/

ohour.style.csstext="-webkit-transform:rotate("+(h*30-90+h_dep)+"deg);";/*90是初始的位置*/

omin.style.csstext="-webkit-transform:rotate("+(m*6-90)+"deg);";

osec.style.csstext="-webkit-transform:rotate("+(s*6-90)+"deg);";

}gotime();

}currenttime();

setinterval(currenttime,1000);/*設定定時器,每秒獲取一次時間*/

}

html實現旋轉時鐘

旋轉時鐘 html,body clock label let monthtext 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 let daytext 一號 二號 三號 四號 五號 六號 七号 八號 九號 十號 十一號 十二號 十三號 十四號 十五號 十六號 十七號 十...

3D旋轉的時鐘

var hour new date gethours if hour 11 varmins new date getminutes var sec newdate getseconds 秒針,每週走60個單位 varunitsec 2 math.pi 60 分鐘,每週走60 60個單位 varuni...

Leetcode順時鐘旋轉90度

問題 you are given annx n2d matrix representing an image.rotate the image by 90 degrees clockwise follow up could you do this in place?結合查詢到的資料做個總結。1.對角...