How to use CSS3+js to achieve simple clock effects
Editor to share with you how to use CSS3+js to achieve simple clock effects, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
The html code is as follows:
The css code is as follows:
* {
Margin: 0
Padding: 0
}
.main {
Position: relative
Margin: 100px auto
Width: 300px
Height: 300px
Border-radius: 300px
Border: 1px solid # 000
Box-shadow:2px 5px
}
# timeLabel {
Position: absolute
Background-color:pink
Width:100px
Height:30px
Left:100px
Top:180px
}
# hour {
Width: 100px
Height: 10px
Background-color: red
Position:absolute
Left:150px
Top:145px
}
# minute {
Width:120px
Height:8px
Background-color:blue
Position:absolute
Left:150px
Top:146px
}
# second {
Width: 140px
Height: 4px
Background-color: green
Position: absolute
Left: 150px
Top: 148px
}
two。 Initialize the default time, and dial scale:
The changed css code:
* {
Margin: 0
Padding: 0
}
.main {
Position: relative
Margin: 100px auto
Width: 300px
Height: 300px
Border-radius: 300px
Border: 1px solid # 000
Box-shadow: 2px 5px # 808080
}
# timeLabel {
Position: absolute
Background-color: pink
Width: 80px
Height: 25px
Left: 110px
Top: 180px
Color: # fff
Line-height: 25px
Text-align: center
}
# hour {
Width: 100px
Height: 10px
Background-color: red
Position: absolute
Left: 150px
Top: 145px
Transform-origin: 0.50%
}
# minute {
Width: 120px
Height: 8px
Background-color: blue
Position: absolute
Left: 150px
Top: 146px
Transform-origin: 0.50%
}
# second {
Width: 140px
Height: 4px
Background-color: green
Position: absolute
Left: 150px
Top: 148px
Transform-origin: 0.50%
}
.hourPointer, .minuterPointer, .secondPointer {
Position: absolute
Transform-origin: 0.50%
}
.hourPointer {
Height: 10px
Width: 12px
Left: 150px
Top: 145px
Background-color: # f00
Z-index:3
}
.minuterPointer {
Height: 8px
Width: 10px
Left: 150px
Top: 146px
Background-color: # b6ff00
Z-index: 2
}
.secondPointer {
Height: 6px
Width: 8px
Left: 150px
Top: 147px
Background-color: # fa8
Z-index: 1
}
Initialize the js code:
Copy the code
The code is as follows:
_ window.onload = function () {
InitClock ()
}
Var timer = null
Function $(id) {
Return document.getElementById (id)
}
Function CreateKeDu (pElement, className, deg, translateWidth) {
Var Pointer = document.createElement ("div")
Pointer.className = className
Pointer.style.transform = "rotate (" + deg + "deg) translate (" + translateWidth + "px)"
PElement.appendChild (Pointer)
}
Function initClock () {
Var main = $("biaopan")
Var timeLabel = $("timeLabel")
Var hour = $("hour")
Var minute = $("minute")
Var second = $("second")
Var now = new Date ()
Var nowHour = now.getHours ()
Var nowMinute = now.getMinutes ()
Var nowSecond = now.getSeconds ()
/ / initialize timeLabel
TimeLabel [XSS _ clean] = nowHour + ":" + nowMinute + ":" + nowSecond
/ / initialize the dial
For (var index = 0; index < 4; index++) {
CreateKeDu (main, "hourPointer", index * 90,138)
}
For (var index = 0; index < 12; index++) {
CreateKeDu (main, "minuterPointer", index*30, 140)
}
For (var index = 0; index < 60; index++) {
CreateKeDu (main, "secondPointer", index * 6142)
}
/ / minute and second hand at initialization
Second.style.transform = "rotate (" + (nowSecond * 6-90) + "deg)"
Minute.style.transform = "rotate (" + (nowMinute * 6 + 1 / 10 * nowSecond-90) + "deg)"
Hour.style.transform = "rotate (" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond-90) + "deg)"
}
3. Add a timer:
The js code is as follows:
Copy the code
The code is as follows:
/ / timer
Function startMove () {
ClearInterval (timer)
Timer = setInterval (function () {
Var now = new Date ()
Var nowSecond = now.getSeconds ()
Var nowMinute = now.getMinutes ()
Var nowHour = now.getHours ()
Second.style.transform = "rotate (" + (nowSecond * 6-90) + "deg)"
Minute.style.transform = "rotate (" + (nowMinute * 6 + 1 / 10 * nowSecond-90) + "deg)"
Hour.style.transform = "rotate (" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond-90) + "deg)"
TimeLabel [XSS _ clean] = nowHour + ":" + nowMinute + ":" + nowSecond
}, 1000)
}
4. Use OOP to change:
The modified js code is as follows:
Copy the code
The code is as follows:
Function Clock () {
/ / define attributes
This.main = this.$ ("biaopan")
This.timeLabel = this.$ ("timeLabel")
This.hour = this.$ ("hour")
This.minute = this.$ ("minute")
This.second = this.$ ("second")
This.nowHour = null
This.nowMinute = null
This.nowSecond = null
This.timer = null
Var _ this = this
/ / initialize function
Var init = function () {
_ this.getNowTime ()
_ this.initClock ()
_ this.InterVal ()
}
Init ()
}
Clock.prototype.$ = function (id) {
Return document.getElementById (id)
}
Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {
Var Pointer = document.createElement ("div")
Pointer.className = className
Pointer.style.transform = "rotate (" + deg + "deg) translate (" + translateWidth + "px)"
This.main.appendChild (Pointer)
}
Clock.prototype.getNowTime = function () {
Var now = new Date ()
This.nowHour = now.getHours ()
This.nowMinute = now.getMinutes ()
This.nowSecond = now.getSeconds ()
}
Clock.prototype.setPosition = function () {
This.second.style.transform = "rotate (" + (this.nowSecond * 6-90) + "deg)"
This.minute.style.transform = "rotate (" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond-90) + "deg)"
This.hour.style.transform = "rotate (" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond-90) + "deg)"
}
Clock.prototype.initClock = function () {
/ / initialize timeLabel
TimeLabel [XSS _ clean] = this.nowHour + ":" + this.nowMinute + ":" + this.nowSecond
/ / initialize the dial
For (var index = 0; index < 4; index++) {
This.CreateKeDu ("hourPointer", index * 90,138)
}
For (var index = 0; index < 12; index++) {
This.CreateKeDu ("minuterPointer", index * 30,140)
}
For (var index = 0; index < 60; index++) {
This.CreateKeDu ("secondPointer", index * 6142)
}
This.setPosition ()
}
Clock.prototype.InterVal = function () {
ClearInterval (this.timer)
Var _ this = this
This.timer = setInterval (function () {
_ this.getNowTime ()
_ this.second.style.transform = "rotate (" + (_ this.nowSecond * 6-90) + "deg)"
_ this.minute.style.transform = "rotate (" + (_ this.nowMinute * 6 + 1 / 10 * _ this.nowSecond-90) + "deg)"
_ this.hour.style.transform = "rotate (" + (_ this.nowHour * 30 + 1 / 2 * _ this.nowMinute + 1 / 120 * _ this.nowSecond-90) + "deg)"
_ this.timeLabel [XSS _ clean] = _ this.nowHour + ":" + _ this.nowMinute + ":" + _ this.nowSecond
}, 1000)
}
Finally, the call is as follows:
Copy the code
The code is as follows:
_ window.onload = function () {
New Clock ()
}
Final page code:
Copy the code
The code is as follows:
* {
Margin: 0
Padding: 0
}
.main {
Position: relative
Margin: 100px auto
Width: 300px
Height: 300px
Border-radius: 300px
Border: 1px solid # 000
Box-shadow: 2px 5px # 808080
}
# timeLabel {
Position: absolute
Background-color: pink
Width: 80px
Height: 25px
Left: 110px
Top: 180px
Color: # fff
Line-height: 25px
Text-align: center
}
# hour {
Width: 100px
Height: 10px
Background-color: red
Position: absolute
Left: 150px
Top: 145px
Transform-origin: 0.50%
}
# minute {
Width: 120px
Height: 8px
Background-color: blue
Position: absolute
Left: 150px
Top: 146px
Transform-origin: 0.50%
}
# second {
Width: 140px
Height: 4px
Background-color: green
Position: absolute
Left: 150px
Top: 148px
Transform-origin: 0.50%
}
.hourPointer, .minuterPointer, .secondPointer {
Position: absolute
Transform-origin: 0.50%
}
.hourPointer {
Height: 10px
Width: 12px
Left: 150px
Top: 145px
Background-color: # f00
Z-index: 3
}
.minuterPointer {
Height: 8px
Width: 10px
Left: 150px
Top: 146px
Background-color: # b6ff00
Z-index: 2
}
.secondPointer {
Height: 6px
Width: 8px
Left: 150px
Top: 147px
Background-color: # fa8
Z-index: 1
}
Function Clock () {
/ / define attributes
This.main = this.$ ("biaopan")
This.timeLabel = this.$ ("timeLabel")
This.hour = this.$ ("hour")
This.minute = this.$ ("minute")
This.second = this.$ ("second")
This.nowHour = null
This.nowMinute = null
This.nowSecond = null
This.timer = null
Var _ this = this
/ / initialize function
Var init = function () {
_ this.getNowTime ()
_ this.initClock ()
_ this.InterVal ()
}
Init ()
}
Clock.prototype.$ = function (id) {
Return document.getElementById (id)
}
Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {
Var Pointer = document.createElement ("div")
Pointer.className = className
Pointer.style.transform = "rotate (" + deg + "deg) translate (" + translateWidth + "px)"
This.main.appendChild (Pointer)
}
Clock.prototype.getNowTime = function () {
Var now = new Date ()
This.nowHour = now.getHours ()
This.nowMinute = now.getMinutes ()
This.nowSecond = now.getSeconds ()
}
Clock.prototype.setPosition = function () {
This.second.style.transform = "rotate (" + (this.nowSecond * 6-90) + "deg)"
This.minute.style.transform = "rotate (" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond-90) + "deg)"
This.hour.style.transform = "rotate (" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond-90) + "deg)"
}
Clock.prototype.initClock = function () {
/ / initialize timeLabel
TimeLabel [XSS _ clean] = this.nowHour + ":" + this.nowMinute + ":" + this.nowSecond
/ / initialize the dial
For (var index = 0; index < 4; index++) {
This.CreateKeDu ("hourPointer", index * 90,138)
}
For (var index = 0; index < 12; index++) {
This.CreateKeDu ("minuterPointer", index * 30,140)
}
For (var index = 0; index < 60; index++) {
This.CreateKeDu ("secondPointer", index * 6142)
}
This.setPosition ()
}
Clock.prototype.InterVal = function () {
ClearInterval (this.timer)
Var _ this = this
This.timer = setInterval (function () {
_ this.getNowTime ()
_ this.second.style.transform = "rotate (" + (_ this.nowSecond * 6-90) + "deg)"
_ this.minute.style.transform = "rotate (" + (_ this.nowMinute * 6 + 1 / 10 * _ this.nowSecond-90) + "deg)"
_ this.hour.style.transform = "rotate (" + (_ this.nowHour * 30 + 1 / 2 * _ this.nowMinute + 1 / 120 * _ this.nowSecond-90) + "deg)"
_ this.timeLabel [XSS _ clean] = _ this.nowHour + ":" + _ this.nowMinute + ":" + _ this.nowSecond
}, 1000)
}
_ window.onload = function () {
New Clock ()
}
These are all the contents of the article "how to use CSS3+js to achieve simple clock effects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
