五步轻松实现JavaScript HTML时钟效果

学了一段时间的HTML、CSS和射流研究…后，给大家做一款漂亮的不像实力派的超文本标记语言时钟，先看图：

涉及到的知识点有：CSS3动画、DOM操作、定时器、圆点坐标的计算（好多人是不是已经还给自己的老师了~)接下来，我们用5步来制作它

第一步，准备超文本标记语言

首先，我们需要准备超文本标记语言结构，背景、表盘、指针（时针、分针、秒针)、数字。

div id=' clock ' div class=' BG ' div class=' point ' div id=' hour '/div div id=' minute '/div div id=' second '/div div class=' circle '/div/div/div step 2、准备半铸钢钢性铸铁(铸造半钢)

定义好指针的颜色和大小，需要说明的是变压器：旋转(-90度);用来旋转指针，transform-origin :0 6px；用来设置旋转中心点。

样式* { margin : 0；padd : 0；} #时钟{边际：5%自动；宽度： 400像素；高度： 400像素；边框半径： 10px背景技术# aaa相对位置：变压器：旋转(-90度);} #时钟BG { width : 360 pxh three : 360 px边界半径： 50%;背景# fff绝对位置：左侧： 50%;前：名50%；边距-左侧：-180像素；边距-top :-180 px；} #时钟。点{位置：绝对值；左侧： 50%;前：名50%；左边距：-14px；边距-top :-14px；} # clock # hour { width : 80px three : 16px背景技术： # 000;余量： 6px 0 0 14px/*变压器： 旋转(30度);*/transform-origin :0 8px；/*animation:小时3s线性100!*候补*!*/边框-半径： 16px} # clock # minute { width : 120 px；高度： 12px背景技术： # 000;边距：-14px 0 0 14px；变换原点：0 6px边界半径： 12px} #时钟#秒{宽度： 160像素重量： 6px背景技术# f00 margin :-9px 0 0 14px；变换原点：0 3px边界半径： 6px} #时钟。重点。圆形{ width: 28px高度： 28px边界半径： 50%;背景技术： # 000;绝对位置：左： 0；top : 0；} @关键帧小时{从{ transform :旋转(0)；}转到{ transform :旋转(360)；} } #时钟编号{ position:绝对值；font-size : 34px宽度： 50px高度： 50px线高： 50px文本对齐：中心；变压器： 旋转(90度);} /stylestep3、计算时针位置

射流研究…通过日期对象获取当前时间，getHours获取小时、获取分钟获取分钟、获取秒获取秒。时针转动一周是12格，每格角度就是360 /12,分钟和秒都是60格，每格角度360 /60。

函数clock(){ var Date=new Date()；//获取当前时间//时(0-23) 分(0-59)秒(0-59) //计算转动角度var hour deg=date。gethours()* 360/12；var分钟deg=日期。getminutes()* 360/60；var秒deg=日期。getseconds()* 360/60；//console.log(hourDeg，minuteDeg，second deg)；//设置指针一小时。风格。transform=' rotate '(' HourDeg ' deg ')；等一下。风格。transform=' rotate '(' minuteDeg ' deg ')；其次。风格。transform=' rotate '(' second deg ' deg ')'；}第四步，时钟转动

通过setInterval设置定时器，每秒刷新一次。注意，需要初始化执行一次，否则会在1s后才能看到效果。

//初始化执行一次clock()；setInterval(时钟，1000);第五步，绘制数字时间

数字时间也是在一个圆周上，我们只用确定好半径，然后得到半径上的坐标。通过左边来定位每个数字就好了。看一下圆坐标系的计算规则：

* 圆半径坐标计算：* x=pointX r*cos(角度);* y=pointY r*sin(角度);但是注意，我们计算的坐标是圆弧上点的坐标，当定位每个数字时，都是以元素的左上角点进行定位，这样我们的数字就会存在偏移。也就是说数字的中心点不在圆弧上，解决办法就是把坐标点(x，y)平移自身的一半(x-w/2，y-h/2)，这样数字的中心点就在圆弧上了。

var PointX=200 var PointY=200 var r=150函数drawNumber(){ var deg=Math .PI * 2/12；//360为(var I=1；i=12i ) { //计算每格的角度变化角度=度*一；//计算圆上的坐标var x=pointX r*Math.cos(角度);var y=pointY r*Math.sin(角度);//创建div，写入数字var number=文档。创建元素(' div ')；number.className=' numbernumber。innerhtml=I；//减去自身的一半，让差异的中心点在圆弧上号码。风格。left=x-25 ' px '；号码。风格。top=y-25 ' px '；//添加到页面myClock.appendChild(数字);}}完整射流研究…代码：

脚本/*** *时钟： * 1 旋转：度旋转(90度)* 2旋转中心点：变换原点* *///TODO步骤1:获取时钟的指针var hour=文档。getelementbyid(' hour ')；//时针定义变量分钟=document.getElementById('分钟');//分针var second=文档。getelementbyid(' second ')；//秒针var myClock=文档。getelementbyid(' clock ')；//时钟//TODO步骤2:获取当前时间，把指针放在正确的位置函数clock(){ var Date=new Date()；//获取当前时间//时(0-23) 分(0-59)秒(0-59) //计算转动角度var hour deg=date。gethours()* 360/12；var分钟deg=日期。getminutes()* 360/60；var秒deg=日期。getseconds()* 360/60；//console.log(hourDeg，minuteDeg，second deg)；//设置指针一小时。风格。transform=' rotate '(' HourDeg ' deg ')；等一下。风格。transform=' rotate '(' minuteDeg ' deg ')；其次。风格。transform=' rotate '(' second deg ' deg ')'；} //初始化执行一次clock()；//TODO步骤3:设置定时器setInterval(时钟，1000);/*** * 圆半径坐标计算：* x=pointX r*cos(角度);* y=pointY r*sin(角度);* */var PointX=200；var pointY=200var r=150//TODO步骤4:画时钟数字函数drawNumber(){ var deg=Math .PI * 2/12；//360为(var I=1；i=12i ) { //计算每格的角度变化角度=度*一；//计算圆上的坐标var x=pointX r*Math.cos(角度);var y=pointY r*Math.sin(角度);//创建div，写入数字var number=文档。创建元素(' div ')；number.className=' numbernumber。innerhtml=I；//减去自身的一半，让差异的中心点在圆弧上号码。风格。left=x-25 ' px '；号码。风格。top=y-25 ' px '；//添加到页面myClock.appendChild(数字);} }抽奖号码()；/script怎么样，会了吗？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。