欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 20:39:29
学了一段时间的html、css和js后,给大家做一款漂亮的不像实力派的html时钟,先看图: 涉及到的知识点有: css3动画、dom操作、定时器、圆点坐标的计算(好...

学了一段时间的html、css和js后,给大家做一款漂亮的不像实力派的html时钟,先看图:

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

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

step1、准备html

首先,我们需要准备html结构,背景、表盘、指针(时针、分针、秒针)、数字。

<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>
< /div>

step2、准备css

定义好指针的颜色和大小,需要说明的是transform: rotate(-90deg); 用来旋转指针,transform-origin:0 6px; 用来设置旋转中心点。

<style>
 *{
  margin: 0;
  padding: 0;
 }
 #clock{
  margin: 5% auto;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  background: #aaa;
  position: relative;
  transform: rotate(-90deg);
 }
 #clock .bg{
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -180px;
  margin-top: -180px;
 }
 #clock .point{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -14px;
  margin-top: -14px;
 }
 #clock #hour{
  width: 80px;
  height: 16px;
  background: #000;
  margin: 6px 0 0 14px;
  /*transform: rotate(30deg);*/
  transform-origin:0 8px;
  /*animation: hour 3s linear 100!* alternate*!;*/
  border-radius: 16px;
 }

 #clock #minute{
  width: 120px;
  height: 12px;
  background: #000;
  margin: -14px 0 0 14px;
  transform-origin:0 6px;
  border-radius: 12px;
 }
 #clock #second{
  width: 160px;
  height: 6px;
  background: #f00;
  margin: -9px 0 0 14px;
  transform-origin:0 3px;
  border-radius: 6px;
 }
 #clock .point .circle{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
 }
 @keyframes hour {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
 }

 #clock .number{
  position: absolute;
  font-size: 34px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  transform: rotate(90deg);
 }
< /style>

step3、计算时针位置

js通过date对象获取当前时间,gethours获取小时、getminutes获取分钟、getseconds获取秒。时针转动一周是12格,每格角度就是360°/12,分钟和秒都是60格,每格角度360°/60。

function clock(){
 var date = new date();//获取当前时间
 //时(0-23) 分(0-59)秒(0-59)
 //计算转动角度
 var hourdeg = date.gethours()*360/12;
 var minutedeg = date.getminutes()*360/60;
 var seconddeg = date.getseconds()*360/60;
 //console.log(hourdeg, minutedeg, seconddeg);
 //设置指针
 hour.style.transform = 'rotate('+hourdeg+'deg)';
 minute.style.transform = 'rotate('+minutedeg+'deg)';
 second.style.transform = 'rotate('+seconddeg+'deg)';
}

step4、时钟转动

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

//初始化执行一次
clock();
setinterval(clock,1000);

step5、绘制数字时间

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

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

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

var pointx = 200;
var pointy = 200;
var r = 150;
function drawnumber(){
 var deg = math.pi*2/12;//360°
 for (var i = 1; i <= 12; i++) {
  //计算每格的角度
  var angle = deg*i;
  //计算圆上的坐标
  var x = pointx + r*math.cos(angle);
  var y = pointy + r*math.sin(angle);
  //创建div,写入数字
  var number = document.createelement('div');
  number.classname = 'number';
  number.innerhtml = i;
  //减去自身的一半, 让div的中心点在圆弧上
  number.style.left = x - 25 + 'px';
  number.style.top = y - 25 + 'px';
  //添加到页面
  myclock.appendchild(number);
 }
}

完整js代码:

<script>
 /***
  * 时钟:
  * 1> 旋转: rotate(90deg)
  * 2> 旋转中心点: transform-origin
  * */
 //todo step1: 获取时钟的指针
 var hour = document.getelementbyid('hour');//时针
 var minute = document.getelementbyid('minute');//分针
 var second = document.getelementbyid('second');//秒针
 var myclock = document.getelementbyid('clock');//时钟

 //todo step2: 获取当前时间,把指针放在正确的位置
 function clock(){
  var date = new date();//获取当前时间
  //时(0-23) 分(0-59)秒(0-59)
  //计算转动角度
  var hourdeg = date.gethours()*360/12;
  var minutedeg = date.getminutes()*360/60;
  var seconddeg = date.getseconds()*360/60;
  //console.log(hourdeg, minutedeg, seconddeg);
  //设置指针
  hour.style.transform = 'rotate('+hourdeg+'deg)';
  minute.style.transform = 'rotate('+minutedeg+'deg)';
  second.style.transform = 'rotate('+seconddeg+'deg)';
 }
 //初始化执行一次
 clock();
 //todo step3: 设置定时器
 setinterval(clock,1000);

 /***
  * 圆半径坐标计算:
  * x = pointx + r*cos(angle);
  * y = pointy + r*sin(angle);
  * */
 var pointx = 200;
 var pointy = 200;
 var r = 150;
 //todo step4: 画时钟数字
 function drawnumber(){
  var deg = math.pi*2/12;//360°
  for (var i = 1; i <= 12; i++) {
   //计算每格的角度
   var angle = deg*i;
   //计算圆上的坐标
   var x = pointx + r*math.cos(angle);
   var y = pointy + r*math.sin(angle);
   //创建div,写入数字
   var number = document.createelement('div');
   number.classname = 'number';
   number.innerhtml = i;
   //减去自身的一半, 让div的中心点在圆弧上
   number.style.left = x - 25 + 'px';
   number.style.top = y - 25 + 'px';
   //添加到页面
   myclock.appendchild(number);
  }
 }
 drawnumber();
< /script>

怎么样,会了吗?

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