用js css 寫簡單時鐘

**如下：

<

!doctype html>
"en"
>
"utf-8"
>
時鐘<
/title>
"text/css"
>
/*表盤的圓*/
.clock-circle 
/*中間圓點*/
.clock-point
/*鐘錶刻度*/
ul li 
ul li.hour 
/*時針*/
#clock-hour 
/*分針*/
#clock-minute 
/*秒針*/
#clock-second 
<
/style>
<
/head>
="clock-circle"
>
="clock-point"
>
<
/div>
"father-scale"
>
<
/ul>
"clock-hour"
>
<
/div>
"clock-minute"
>
<
/div>
"clock-second"
>
<
/div>
<
/div>
<
/body>
//畫刻度
var fatherscale = document.
getelementbyid
('father-scale');
var scales ="";
//生成60個刻度
for(
var i =
0; i <
60; i++
)    fatherscale.innerhtml = scales;
//獲取每個刻度
var scale = document.
getelementsbytagname
("li");
for(
var i =
0; i <
60; i++
)//圓360度，乙個刻度是6度，每個都旋轉6度，第i個旋轉6*i
scale[i]
.style.transform =
"rotatez("
+i*6
+"deg)";}
var hourneedle = document.
getelementbyid
("clock-hour");
var minneedle = document.
getelementbyid
("clock-minute");
var secneedle = document.
getelementbyid
("clock-second");
var timer =
null
;function
start()
start()
;<
/script>
<
/html>

用原生JS寫簡單的時鐘

這是乙個簡單的時鐘方案，主要 是三個時針旋轉的思路，時鐘布局省去。step 1.獲取時分秒轉針 var hour document.getelementbyid hour var min document.getelementbyid m var sec document.getelementbyi...

js css簡單應用

新增 節點.classlist.add 類名 刪除 節點.classlist.remove 類名 nth child 4n 1 nth child 4n 2 每兩行變色,nth child 6n 1 nth child 6n 2 nth child 6n 3 每三行變色,border style h...

史上最簡單的js css3實現時鐘效果

對比樣子差了好多啊，但是基本功能都是實現了的，只要修改樣式就好了，我的美感特別差，所以就 我用的是css3和js實現的這個效果，漸變是由css3的linear gradient實現，當然js也有實現的辦法，不過js實現到底不如css3實現簡單，所以就不贅述了。有興趣的可以下來自己看看。時鐘的旋轉是由...