canvas时钟效果
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<script>
function run() {
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
var H = window.innerHeight
var W = window.innerWidth
canvas.height = H
canvas.width = W
//设置背景渐变
var gradient = context.createRadialGradient(W / 2, H / 2, 5, W /
2, H / 2, H / 2)
gradient.addColorStop(0, 'purple')
gradient.addColorStop(1, 'black')
context.fillStyle = gradient
context.fillRect(0, 0, W, H)
var date = new Date()
var hours = date.getHours()
var minutes = date.getMinutes()
var seconds = date.getSeconds()
var milliseconds = date.getMilliseconds()
hour = hours >= 12 ? hours - 12 : hours
var Hour = hour + minutes / 60
var Minute = minutes + seconds / 60
var Second = seconds + milliseconds / 1000
context.strokeStyle = '#57faff'
context.lineWidth = 10
context.beginPath()
context.arc(W / 2, H / 2, H / 3, -0.5 * Math.PI, (2 * Math.PI) / 12 * Hour - 0.5 * Math.PI)
context.stroke()
context.beginPath()
context.arc(W / 2, H / 2, H / 4, -0.5 * Math.PI, (2 * Math.PI) / 60 * Minute - 0.5 * Math.PI)
context.stroke()
context.beginPath()
context.arc(W / 2, H / 2, H / 5, -0.5 * Math.PI, (2 * Math.PI) / 60 * Second - 0.5 * Math.PI)
context.stroke()
//时 分 秒 小于10自动补0方法
function change(x) {
return x < 10 ? '0' + x : x
}
//毫秒 小于100或10自动补0方法
function ch(x) {
if (x < 10) {
return '00' + x
} else if (x < 100) {
return '0' + x
} else {
return x
}
}
//画布中心写数字时间
var text = change(hours) + ':' + change(minutes) + ':' + change(seconds) + '.' + ch(milliseconds)
context.fillStyle = '#57faff'
context.font = '20px Consolas'
context.textAlign = 'center'
context.fillText(text, W / 2, H / 2)
}
setInterval(run, 1)
window.onresize = function () {
setInterval(run, 1)
}
</script>
</body>
css时钟效果
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 400px;
height: 400px;
position: relative;
border-radius: 50%;
border: 1px solid black;
margin: 200px auto;
}
ul {
list-style: none;
}
ul li {
position: absolute;
background: black;
width: 2px;
height: 10px;
top: 0;
left: 199px;
transform-origin: center 200px;
}
ul li:nth-child(5n) {
height: 20px;
}
.hour {
position: absolute;
background: black;
width: 3px;
height: 145px;
top: 70px;
left: 198.5px;
transform-origin: center 130px;
}
.minute {
position: absolute;
background: black;
width: 2px;
height: 160px;
top: 60px;
left: 199px;
transform-origin: center 140px;
}
.second {
position: absolute;
background: black;
width: 1px;
height: 180px;
top: 50px;
left: 199.5px;
transform-origin: center 150px;
}
</style>
</head>
<body>
<div class='container'>
<ul></ul>
<div class='hour'></div>
<div class='minute'></div>
<div class='second'></div>
</div>
<script>
//先将时钟刻度按圆心旋转相应的度数
var ul = document.querySelector('ul')
for (var i = 0; i < 60; i++) {
var li = document.createElement('li')
ul.appendChild(li)
}
var allLi = document.querySelectorAll('li')
for (var k = 0; k < 60; k++) {
allLi[k].style.transform = `rotate(${(k+1)*6}deg)`
}
var hour = document.querySelector('.hour')
var minute = document.querySelector('.minute')
var second = document.querySelector('.second')
//获取当前时间,将时 分 秒 指针旋转相应度数
function run() {
var date = new Date()
var hours = date.getHours()
var minutes = date.getMinutes()
var seconds = date.getSeconds()
hour.style.transform = `rotate(${(hours + minutes / 60) * 30}deg)`
minute.style.transform = `rotate(${(minutes + seconds / 60) * 6}deg)`
second.style.transform = `rotate(${seconds * 6}deg)`
}
setInterval(run, 500)
</script>
</body>