• 当前标签:时钟

程序开发 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 ={}

2017-08-07 19:57:28 50 0 0
阅读详情

程序开发 H5学习之制作时钟

效果图 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时钟</title> <style> main{ width: 680px; height: 680px; background-color: #EEEEEE; /*设置边框*/ border: 5px solid black; margin: 40px auto; /*设置边框角度*/ border-radius: 50%; } section{ width: 600px; border: 1px solid black; border-left: none; border-right: none; margin: 250px auto; /*使文本居中*/ text-align: center; } #time{ font-size: 150px; /*设置行高*/ line-height: 150px; color: #333333; } #date{ font-size: 40px; color: #aaaaaa; margin-right: 10px; } </style> </head> <body> <!--main定义了文档的主要内容,它里面的内容相对于文档里面的内容必须是唯一的--> <main> <section> <header id="date"></header> <div id="time"></div> <!--id唯一标示符--> </section> </main> <!--script脚本文件--> <script> // 定义一个函数 function是一个关键字 后面是函数名 // 函数名是自己定义的 但是要有实际意义 // 命名规范:驼峰命名法 首单词小写其余每个单词的首字母大写 function showTime(){ // var 是定义变量的关键字 now 是自己定义的 等号后面是给变量赋值的 // = 是赋值 也就是时候把右边的值赋值给左边 // 获取当前的时间 var now = new Date() // getHours获取当前的小时 var hour = now.getHours() var minute = now.getMinutes() var second = now.getSeconds() // console.log(minute) 调试用 打印到控制台 // 三元运算符 ? 号前面是一个判断语句 // 如果条件为真 执行第一个值 // 如果条件为假 执行第二个值 // 格式: 条件语句?值1:值2 second = second < 10 ? '0' + second:second minute = minute < 10 ? '0' + minute:minute hour = hour

2017-03-09 20:07:52 29 0 0
阅读详情
  • 1
前往