HTML+CSS+JS实现动态时钟

HTML+CSS+JS实现动态时钟

（此实例将三者都写在了一起）

step 1 先画一个圆

在body里面创建一个div

<div class="clock"></div>

在head里利用style标签设置clock的css

.clock{
   
            height: 500px;
            width: 500px;
            border-radius: 50%;
            border: 1px solid black;
            position: relative;
        }

step 2 画时钟刻度

在body里利用script标签写js代码

先对clock进行选择，才能对标签里面进行操作

var clock = document.querySelector('.clock');

每一个刻度就是一个模块，即都是一个div

有两种画刻度的方法：第一种一个一个画，第二个利用循环结构

两种方法都需要计算角度

第一种方法

以12点和1点为例，假设12的div叫做twelve，1叫one，其他数字同理

.twelve{
   
    top:0px;
    left:250px;/*半径的长度*/
}
.one{
   
    top: x px; /*x=250-r*cos(θ)*/
    left: 250+r*sin(θ);
}

第二种方法

循环结构

for (var i = 0; i<12 ;i++){
   
	
    }

(下面代码写在循环体内)

1.先使用createElement()创建一个元素

var scale = document.createElement('div');

2.为刻度添加数字innerText，且要注意刻度是从1开始的，且如果i为0，其实就是12，所以要增加一个条件判断

if (i === 0){
   
    scale.innerText = 12
}else{
   
    scale.innerText = i
}

3.为div设置一个属性class且命名，用来给数字定位

scale.setAttribute('class', 'scale');

4.利用坐标来定位，先确定圆心坐标，然后计算每个数字的坐标

var center = {
   
    x: 250,
    y: 250,
}
var raduis = 250px//设置半径
//定位
var alpha = i*30*Math.PI/180
            var x = center.x +raduis*Math.sin(alpha)
            var y = center.y - raduis*Math.cos(alpha)
            scale.style = `position:absolute; top: ${
     y}px; left:${
     x}px;`;//注意不是单引号是tab键上面那个符号`
            clock