JavaScript 制作圆形时钟

黄良钵

分类: 程序开发 893 0

JavaScript 制作圆形时钟

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

HTML:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>时钟</title>
  6.         <script src="js/control.js"></script>
  7.         <script src="js/dot.js"></script>
  8.         <script src="js/second.js"></script>
  9.         <script src="js/Minute.js"> </script>
  10.         <script src="js/hour.js"> </script>
  11.         <script src="js/Diamond.js"></script>
  12.         <script src="js/clock.js"></script>
  13.         <style>
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <script>
  18.             new Clock()
  19.         </script>
  20.     </body>
  21. </html>

control.js

  1. // 控件类 页面所有可见元素都从这里继承
  2. // 提供了创建功能(render方法) 和布局功能(layout方法)
  3. function Control(){
  4.         this.reader()
  5.         this.layout()
  6. }
  7. // 填充颜色
  8. Control.prototype.fillColor = 'black'
  9. // 添加到页面上
  10. Control.prototype.reader = function(){
  11.     this.ele = document.createElement('div')
  12.     this.ele.style.backgroundColor = this.fillColor
  13.     this.ele.style.position = 'absolute'
  14.     document.body.appendChild(this.ele)
  15. }
  16. // 调整大小的页面上的位置
  17. Control.prototype.layout = function(){}
  18. Control.windowResized = function(){
  19.     Control.clientWidth = document.documentElement.clientWidth
  20.     Control.clientHeight = document.documentElement.clientHeight
  21.     Control.radius = Math.min(Control.clientWidth,Control.clientHeight) / 2
  22.     console.log('窗口工作区%d,%d',Control.clientWidth,Control.clientHeight,Control.radius)
  23. }
  24. Control.windowResized()

dot.js

  1. function Dot(){
  2.     Control.call(this)
  3. }
  4. Dot.prototype = Object.create(Control.prototype)
  5. Dot.prototype.constructor = Dot
  6. Dot.prototype.reader = function(){
  7.     Control.prototype.reader.call(this)
  8.      this.ele.style.borderRadius = '50%'
  9.      this.ele.style.zIndex = 10
  10.      console.log(this.ele)
  11. }
  12. Dot.prototype.layout = function(){
  13.     var radius  = Control.radius * 0.04
  14.     this.ele.style.width = radius * 2 + 'px'
  15.     this.ele.style.height = radius * 2 + 'px'
  16.     this.ele.style.top = Control.clientHeight / 2 - radius + 'px'
  17.     this.ele.style.left = Control.clientWidth / 2 - radius + 'px'
  18. }

second.js

  1. function Second(color){
  2.     this.fillColor = color || 'red'
  3.     Control.call(this)
  4. }
  5. Second.prototype = Object.create(Control.prototype)
  6. Second.prototype.constructor = Second
  7. Second.prototype.caclArgs = function(){
  8.       var args = {}
  9.       args.duration = 60
  10.       args.zIndex = 9
  11.       var time = new Date()
  12.       var s = time.getSeconds()*-1
  13.       args.delay = s - 15
  14.       return args
  15. }
  16. Second.prototype.calcLayoutArgs = function(){
  17.     var args ={}
  18.     args.radius = Control.radius * 0.9
  19.     args.width = args.radius * 1.15
  20.     args.height = args.radius * 0.01
  21.     return args
  22. }
  23. Second.prototype.reader = function(){
  24.     var args = this.caclArgs()
  25.     Control.prototype.reader.call(this)
  26.     this.ele.style.backgroundColor ='initial'
  27.     this.ele.style.animationName = 'rotate'
  28.     this.ele.style.animationTimingFunction = 'linear'
  29.     this.ele.style.animationIterationCount = 'infinite'
  30.     this.ele.style.animationDuration = args.duration + 's'
  31.     this.ele.style.animationDelay = args.delay +'s'
  32.     this.ele.style.zIndex= args.zIndex
  33.     this.el = document.createElement('span')
  34.     this.el.style.display = 'block'
  35.     this.el.style.backgroundColor = this.fillColor
  36.     this.ele.appendChild(this.el)
  37. }
  38. Second.prototype.layout = function(){
  39.     var args = this.calcLayoutArgs()
  40.     this.ele.style.width = args.radius * 2  + 'px'
  41.     this.ele.style.height = 10 +'px'
  42.     this.ele.style.top = Control.clientHeight / 2 - 5 + 'px'
  43.     this.ele.style.left = Control.clientWidth / 2 - args.radius + 'px'
  44.     this.el.style.width = args.width + 'px'
  45.     this.el.style.height = args.height + 'px'
  46.     this.el.style.marginTop = 5 - args.height / 2 + 'px'
  47.     this.el.style.borderRadius = args.height / 2 + 'px'
  48. }

Minute.js

  1. function Minute(color){
  2.    Second.call(this,color || 'black')
  3. }
  4. Minute.prototype = Object.create(Second.prototype)
  5. Minute.prototype.constructor = Minute
  6. Minute.prototype.caclArgs = function(){
  7.       var args = {}
  8.       args.duration = 3600
  9.       args.zIndex = 8
  10.       var time = new Date()
  11.       var s = time.getSeconds()*-1
  12.       var m = time.getMinutes() * -1
  13.       args.delay = (m * 60) - ( 15 * 60) + s;
  14.       return args
  15. }
  16. Minute.prototype.calcLayoutArgs = function(){
  17.     var args ={}
  18.     args.radius = Control.radius * 0.8
  19.     args.width = args.radius * 1.12
  20.     args.height = args.radius * 0.03
  21.     return args
  22. }

hour.js

  1. function Hour(color){
  2.     Second.call(this,color || 'black')
  3. }
  4. Hour.prototype = Object.create(Second.prototype)
  5. Hour.prototype.constructor = Hour
  6. Hour.prototype.caclArgs = function(){
  7.       var args = {}
  8.       args.duration = 43200
  9.       args.zIndex = 7
  10.       var time = new Date()
  11.       var s = time.getSeconds()*-1
  12.       var m = time.getMinutes() * -1
  13.       var h = time.getHours()
  14.       h = h>12?h-12:h
  15.       h = h*-1
  16.       args.delay =(h*60*60) - (3*60*60) + (m*60) + s
  17.       return args
  18. }
  19. Hour.prototype.calcLayoutArgs = function(){
  20.     var args ={}
  21.     args.radius = Control.radius * 0.6
  22.     args.width = args.radius * 1.13
  23.     args.height = args.radius * 0.05
  24.     return args
  25. }

clock.js

  1. function Clock(){
  2.     // 添加样式表
  3.     var i = 0
  4.     var style = document.createElement('style')
  5.     document.head.appendChild(style)
  6.     style.sheet.insertRule('html{height:100%}',i++)
  7.     style.sheet.insertRule('body{margin:0;height:100%}',i++)
  8.     style.sheet.insertRule('*{box-sizing:border-box}',i++)
  9.     style.sheet.insertRule('@keyframes rotate{from{ transform:rotate(0);} to{transform:rotate(360deg); }}',i++)
  10.     // 创建时钟
  11.     var dot = new Dot()
  12.     var second = new Second()
  13.     var minute = new Minute('yellow')
  14.     var hour = new Hour('blue')
  15.     var diamonds = []
  16.     for(var i = 0;i<60;i++){
  17.         var sizeRadio = i % 5 == 0 ? 0.02:0
  18.         diamonds.push(new Diamond(i,sizeRadio))
  19.     }
  20.     window.onresize = function(){
  21.         Control.windowResized()
  22.         dot.layout()
  23.         second.layout()
  24.         minute.layout()
  25.         hour.layout()
  26.        for(var i =0;i<60;i++){
  27.            diamonds[i].layout()
  28.        }
  29.     }
  30. }

Diamond.js

  1. // 时钟周围小圆点
  2. function Diamond(minute,sizeRadio){
  3.     this.minute  = minute
  4.     this.sizeRadio = sizeRadio || 0.01
  5.     //  弧度 = 角度*Math.PI / 180
  6.     this.arc = 6*(this.minute - 15)*Math.PI / 180
  7.     Control.call(this)
  8. }
  9. Diamond.prototype = Object.create(Control.prototype)
  10. Diamond.prototype.constructor = Diamond
  11. Diamond.prototype.reader = function(){
  12.     Control.prototype.reader.call(this)
  13.     this.ele.style.borderRadius = '50%'
  14.     this.ele.style.zIndex = 5
  15. }
  16. Diamond.prototype.layout =function(){
  17.     var size = Control.radius * this.sizeRadio
  18.     this.ele.style.width = size * 2 + 'px'
  19.     this.ele.style.height = size * 2 + 'px'
  20.     var radius = Control.radius * 0.9
  21.     var left = radius * Math.cos(this.arc)
  22.     var top = radius*Math.sin(this.arc)
  23.     this.ele.style.top = Control.clientHeight / 2 + top - size + 'px'
  24.     this.ele.style.left = Control.clientWidth / 2 + left - size + 'px'
  25. }

演示效果:

时钟

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、时钟

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript 制作圆形时钟”

Loading...