JavaScript 制作圆形时钟

上次用html和css制作了CSS时钟、高级动画，不过上次的只是会动，时间不准的，今天做的这个是和电脑系统时间一致的，而且是用纯JavaScript制作的。下面看看代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>时钟</title>
<script src="js/control.js"></script>
<script src="js/dot.js"></script>
<script src="js/second.js"></script>
<script src="js/Minute.js"> </script>
<script src="js/hour.js"> </script>
<script src="js/Diamond.js"></script>
<script src="js/clock.js"></script>
<style>
</style>
</head>
<body>
<script>
new Clock()
</script>
</body>
</html>

control.js

// 控件类页面所有可见元素都从这里继承
// 提供了创建功能(render方法) 和布局功能(layout方法)
function Control(){
this.reader()
this.layout()
}
// 填充颜色
Control.prototype.fillColor = 'black'
// 添加到页面上
Control.prototype.reader = function(){
this.ele = document.createElement('div')
this.ele.style.backgroundColor = this.fillColor
this.ele.style.position = 'absolute'
document.body.appendChild(this.ele)
}
// 调整大小的页面上的位置
Control.prototype.layout = function(){}
Control.windowResized = function(){
Control.clientWidth = document.documentElement.clientWidth
Control.clientHeight = document.documentElement.clientHeight
Control.radius = Math.min(Control.clientWidth,Control.clientHeight) / 2
console.log('窗口工作区%d,%d',Control.clientWidth,Control.clientHeight,Control.radius)
}
Control.windowResized()

dot.js

function Dot(){
Control.call(this)
}
Dot.prototype = Object.create(Control.prototype)
Dot.prototype.constructor = Dot
Dot.prototype.reader = function(){
Control.prototype.reader.call(this)
this.ele.style.borderRadius = '50%'
this.ele.style.zIndex = 10
console.log(this.ele)
}
Dot.prototype.layout = function(){
var radius = Control.radius * 0.04
this.ele.style.width = radius * 2 + 'px'
this.ele.style.height = radius * 2 + 'px'
this.ele.style.top = Control.clientHeight / 2 - radius + 'px'
this.ele.style.left = Control.clientWidth / 2 - radius + 'px'
}

second.js

function Second(color){
this.fillColor = color || 'red'
Control.call(this)
}
Second.prototype = Object.create(Control.prototype)
Second.prototype.constructor = Second
Second.prototype.caclArgs = function(){
var args = {}
args.duration = 60
args.zIndex = 9
var time = new Date()
var s = time.getSeconds()*-1
args.delay = s - 15
return args
}
Second.prototype.calcLayoutArgs = function(){
var args ={}
args.radius = Control.radius * 0.9
args.width = args.radius * 1.15
args.height = args.radius * 0.01
return args
}
Second.prototype.reader = function(){
var args = this.caclArgs()
Control.prototype.reader.call(this)
this.ele.style.backgroundColor ='initial'
this.ele.style.animationName = 'rotate'
this.ele.style.animationTimingFunction = 'linear'
this.ele.style.animationIterationCount = 'infinite'
this.ele.style.animationDuration = args.duration + 's'
this.ele.style.animationDelay = args.delay +'s'
this.ele.style.zIndex= args.zIndex
this.el = document.createElement('span')
this.el.style.display = 'block'
this.el.style.backgroundColor = this.fillColor
this.ele.appendChild(this.el)
}
Second.prototype.layout = function(){
var args = this.calcLayoutArgs()
this.ele.style.width = args.radius * 2 + 'px'
this.ele.style.height = 10 +'px'
this.ele.style.top = Control.clientHeight / 2 - 5 + 'px'
this.ele.style.left = Control.clientWidth / 2 - args.radius + 'px'
this.el.style.width = args.width + 'px'
this.el.style.height = args.height + 'px'
this.el.style.marginTop = 5 - args.height / 2 + 'px'
this.el.style.borderRadius = args.height / 2 + 'px'
}

Minute.js

function Minute(color){
Second.call(this,color || 'black')
}
Minute.prototype = Object.create(Second.prototype)
Minute.prototype.constructor = Minute
Minute.prototype.caclArgs = function(){
var args = {}
args.duration = 3600
args.zIndex = 8
var time = new Date()
var s = time.getSeconds()*-1
var m = time.getMinutes() * -1
args.delay = (m * 60) - ( 15 * 60) + s;
return args
}
Minute.prototype.calcLayoutArgs = function(){
var args ={}
args.radius = Control.radius * 0.8
args.width = args.radius * 1.12
args.height = args.radius * 0.03
return args
}

hour.js

function Hour(color){
Second.call(this,color || 'black')
}
Hour.prototype = Object.create(Second.prototype)
Hour.prototype.constructor = Hour
Hour.prototype.caclArgs = function(){
var args = {}
args.duration = 43200
args.zIndex = 7
var time = new Date()
var s = time.getSeconds()*-1
var m = time.getMinutes() * -1
var h = time.getHours()
h = h>12?h-12:h
h = h*-1
args.delay =(h*60*60) - (3*60*60) + (m*60) + s
return args
}
Hour.prototype.calcLayoutArgs = function(){
var args ={}
args.radius = Control.radius * 0.6
args.width = args.radius * 1.13
args.height = args.radius * 0.05
return args
}

clock.js

function Clock(){
// 添加样式表
var i = 0
var style = document.createElement('style')
document.head.appendChild(style)
style.sheet.insertRule('html{height:100%}',i++)
style.sheet.insertRule('body{margin:0;height:100%}',i++)
style.sheet.insertRule('*{box-sizing:border-box}',i++)
style.sheet.insertRule('@keyframes rotate{from{ transform:rotate(0);} to{transform:rotate(360deg); }}',i++)
// 创建时钟
var dot = new Dot()
var second = new Second()
var minute = new Minute('yellow')
var hour = new Hour('blue')
var diamonds = []
for(var i = 0;i<60;i++){
var sizeRadio = i % 5 == 0 ? 0.02:0
diamonds.push(new Diamond(i,sizeRadio))
}
window.onresize = function(){
Control.windowResized()
dot.layout()
second.layout()
minute.layout()
hour.layout()
for(var i =0;i<60;i++){
diamonds[i].layout()
}
}
}

Diamond.js

// 时钟周围小圆点
function Diamond(minute,sizeRadio){
this.minute = minute
this.sizeRadio = sizeRadio || 0.01
// 弧度 = 角度*Math.PI / 180
this.arc = 6*(this.minute - 15)*Math.PI / 180
Control.call(this)
}
Diamond.prototype = Object.create(Control.prototype)
Diamond.prototype.constructor = Diamond
Diamond.prototype.reader = function(){
Control.prototype.reader.call(this)
this.ele.style.borderRadius = '50%'
this.ele.style.zIndex = 5
}
Diamond.prototype.layout =function(){
var size = Control.radius * this.sizeRadio
this.ele.style.width = size * 2 + 'px'
this.ele.style.height = size * 2 + 'px'
var radius = Control.radius * 0.9
var left = radius * Math.cos(this.arc)
var top = radius*Math.sin(this.arc)
this.ele.style.top = Control.clientHeight / 2 + top - size + 'px'
this.ele.style.left = Control.clientWidth / 2 + left - size + 'px'
}

演示效果：

时钟

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论