JavaScript實現鐘錶樣式
阿新 • • 發佈：2021-11-20
效果如圖所示
程式碼如下
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 225px; height: 225px; margin: 100px auto 0; background: url("img/QQ圖片20211120091043.jpg") no-repeat; position: relative; background-position: -33px -8px; /*背景進行水平和垂直移動*/ border-radius: 50%; } #dian { width: 2px; height: 2px; background: green; position: absolute; left: 112px; top: 112px; } #shi { width: 6px; height: 60px; position: absolute; left: 110px; top: 70px; background: #000; transform-origin: 50% 72% /*焦點對焦，把線段固定到一點轉動*/ } #fen { width:4px; height: 80px; position: absolute; left: 111px; top: 50px; background: #000; transform-origin: 50% 79% } #miao { width: 2px; height: 100px; background: red; position: absolute; left: 112px; top: 40px; transform-origin: 50% 73%; /*transform: rotate(90deg)*/ } </style> </head> <body> <div id="box"> <div id="shi"></div> <div id="fen"></div> <div id="miao"></div> <div id="dian"></div> </div> </body> </html> <script> var miao = document.getElementById('miao') var fen = document.getElementById('fen') var shi = document.getElementById('shi') setInterval(function () { var time = new Date(), s = time.getSeconds(), m = time.getMinutes(), h = time.getHours() miao.style.transform = 'rotate(' + s * 6 + 'deg)' fen.style.transform = 'rotate(' + (m + s / 60) * 6 + 'deg)' shi.style.transform ='rotate(' + (h + m/60 +s/3600) * 30 + 'deg)' }, 1000) // console.log(new Date()) // console.log(new Date().getSeconds()) // console.log(new Date().getMinutes()) // console.log(new Date().getHours()) // console.log(new Date().getDate()) // console.log(new Date().getMonth()) // console.log(new Date().getFullYear()) // console.log(new Date().getDay()) </script>
首先我們要實現這個效果，我們先要實現秒針的效果
我們思考
首先定義一個盒子，我們把它叫做miao
思考
秒針轉動一格是6°
我們利用動畫讓他轉動6°不就行了
開始實踐
html程式碼如下
<div id="box">
<div id="shi"></div>
<div id="fen"></div>
<div id="miao"></div>
<div id="dian"></div>
</div>
css程式碼如下
#miao {
width: 2px;
height: 100px;
background: red;
position: absolute;
left: 112px;
top: 40px；
}
js程式碼如下
var miao = document.getElementById('miao')
var time = new Date(),
s = time.getSeconds(),
miao.style.transform = 'rotate(' + s * 6 + 'deg)'
當我們實現以上的程式碼時候
我們會發現秒針在頁面中是不動的
只有我們將頁面不斷重新整理的時候才能實現秒針轉的效果
我們可以加入一個定時器，每隔一段時間獲取當前的秒數，然後進行計算後，得出需要旋轉的度數，這樣我們就可以實現秒針自動旋轉了
修改js程式碼如下
var miao = document.getElementById('miao')
setInterval(function () {
var time = new Date(),
s = time.getSeconds(),
miao.style.transform = 'rotate(' + s * 6 + 'deg)'
}, 1000)
這樣我們就實現了秒針的效果
但是我們為了下一步更加便捷，我們在css中加入
transform-origin: 50% 72%
/*焦點對焦，把線段固定到一點轉動*/
此行程式碼的作用是將秒針分針時針都固定到一個點上，觀看更加直白
這樣我們再考慮分針的效果實現
我們可以思考到
分針的效果也是移動一格，一分鐘也是6°
應該和秒針差不多
我們開始實踐
html程式碼如下
<div id="box">
<div id="shi"></div>
<div id="fen"></div>
<div id="miao"></div>
<div id="dian"></div>
</div>
css程式碼如下
#fen {
width: 4px;
height: 80px;
position: absolute;
left: 111px;
top: 50px;
background: #000;
transform-origin: 50% 79%
}
js程式碼如下
var fen = document.getElementById('fen')
setInterval(function () {
var time = new Date(),
m = time.getMinutes(),
fen.style.transform = 'rotate(' + m* 6 + 'deg)'
}, 1000)
但這樣我們發現這樣的話，分針會，直接跳一個格，但是我們實際生活中是，分針緩慢的移動
所以他是跟著相應秒數的變化而進行旋轉的
所以我們修改js程式碼如下
fen.style.transform = 'rotate(' + (m + s / 60) * 6 + 'deg)'
最後我們來實現時針的效果
同上，分針是根據秒數，分鐘數的變化來旋轉，但是需要注意，一小時的變化是旋轉30°
html程式碼如下
<div id="box">
<div id="shi"></div>
<div id="fen"></div>
<div id="miao"></div>
<div id="dian"></div>
</div>
css程式碼如下
#shi {
width: 6px;
height: 60px;
position: absolute;
left: 110px;
top: 70px;
background: #000;
transform-origin: 50% 72%
/*焦點對焦，把線段固定到一點轉動*/
}
js程式碼如下
var shi = document.getElementById('shi')
setInterval(function () {
var time = new Date(),
h = time.getHours()
shi.style.transform ='rotate(' + (h + m/60 +s/3600) * 30 + 'deg)'
}, 1000)
這樣我們就實現了鐘錶的效果了
補充
// console.log(new Date().getSeconds())
// console.log(new Date().getMinutes())
// console.log(new Date().getHours())
// console.log(new Date().getDate())
// console.log(new Date().getMonth())
// console.log(new Date().getFullYear())
// console.log(new Date().getDay())
以上的是控制檯獲取當前的值
效果為
console.log(new Date().getDay())
這是控制檯獲取當前是星期六
console.log(new Date().getSeconds())
這是控制檯獲取當前的秒數
console.log(new Date().getMinutes())
這是控制檯獲取當前的分鐘數
console.log(new Date().getHours())
這是控制檯獲取當前的小時數
console.log(new Date().getDate())
這是控制檯獲取當前的日期
console.log(new Date().getMonth())
這是控制檯獲取當前的月份
console.log(new Date().getFullYear())
這是控制檯獲取當前的年份