js源生实时时钟

Date对象

• var nowtime = new Date()获取当前的客户端时间【包括年月日】
• var diyTime = new Date("2019/12/12 12:12:12") 自定义时间
• var month = nowtime.getMonth()获取当前的时间的月份【返回值：0-11】
• var year= nowtime.getFullYear() 获取当前的年份
• var date = nowtime.getDate()获取当前的日期
• var hour = nowtime.getHours() 获取当前时间的小时
• var minute = nowtime.getMinutes() 获取当前时间的分钟
• var second= nowtime.getSeconds() 获取当前时间的秒
• var millsecond= nowtime.getMillseconds() 获取当前时间的秒
• var time= nowtime.getTime() 获取从1970年到现在的毫秒数

注：
在计算某一时间的时间间距，可以用time.getTime()获取两个时间分别距离1970年的毫秒数，做减法，再进行运算，根据换算计算两个时间的时间间距

html

<canvas id="clock" width="500" height="500"></canvas>

设置canvas画布标签，设置宽高值

js

获取实时的时间

var now = new Date();  //获取当前时间
var second = now.getSeconds(); //获取当前的秒数
var minute = now.getMinutes();// 获取当前的分钟
var minute1 =  minute + second / 60; // 获取当前的分钟加上秒数 ,也就是当前分针所指向的位置的时间
var hour1 = now.getHours();//获取当前的小时
var hour = hour1 + minute / 60;// 获取当前的小时加上分钟 ,也就是当前时针所指向的位置的时间
    hour = hour > 12 ? hour - 12 : hour; //设置12时间制
//获取年月日
var year = now.getFullYear(); 
var month = now.getMonth();
var day = now.getDate()

绘制表盘

//绘制线条
cxt.beginPath();
//设置线条的宽度
cxt.lineWidth = 8;
//渐变样式
var gradient = cxt.createLinearGradient(0,0,500,0);
// gradient.addColorStop(value1,color) 中，第一个参数value的取值在0-1之间，表示在总区域的当前百分制位置的颜色为color 向两边扩散，此处地方的颜色值最深
//起始值为0，结尾值为1
//cxt.createLinearGradient(0,0,500,0); 为线性渐变，前两个值为起始渐变的坐标，后面为结束渐变的坐标
gradient.addColorStop(0,"plum");
gradient.addColorStop(0.5,"#abcdee");
gradient.addColorStop(1,"blue");
//线条的样式设为设置好的渐变样式
cxt.strokeStyle = gradient;
//绘制一个圆，起始坐标为250,250，半径为200 起始的角度，结束的角度，绘制的方向（可选参数，默认false 顺时针，true 为逆时针）
cxt.arc(250,250,200,0,360);
//绘制的线条
cxt.stroke();
//路径结束
cxt.closePath();

绘制时钟的刻度

for(var i = 0;i<12;i++){
//保存上一次原点的位置
	cxt.save();
	cxt.lineWidth = 5;
	cxt.strokeStyle = "black";
	//改变原点的位置
	cxt.translate(250,250);
	// 旋转的  30 * i 度
	//计算表盘的每一小时的角度，每过一个小时，当前的角度为 30*i
	cxt.rotate(30 * Math.PI / 180 * i);
	cxt.beginPath();
	//起始点 这里的起始点的为值为 12点的位置
	cxt.moveTo(0,-196);
	cxt.lineTo(0,-180);
	cxt.stroke();
	cxt.closePath();
	//旋转后，返回到原来保存的原点的位置 （不作保存和恢复状态的操作，旋转的角度会累加）
	cxt.restore();
}

绘制时针

 for(var i = 0;i < 60;i++){
	cxt.save();
	cxt.lineWidth = 3;
	cxt.strokeStyle = "black";
	cxt.translate(250,250);
	//改变旋转的角度  分针，秒针度只是改变 旋转的角度
	cxt.rotate(6 * Math.PI / 180 * i);
	cxt.beginPath();
	cxt.moveTo(0,-196);
	cxt.lineTo(0,-186);
	cxt.stroke();
	cxt.closePath();
	cxt.restore();
}
//时针
    cxt.save();
	cxt.lineWidth = 8;
	cxt.strokeStyle = "black";
	cxt.translate(250,250);
	cxt.rotate(Math.PI/180*30 * hour)
	cxt.beginPath();
	cxt.moveTo(0,0);
	cxt.lineTo(0,-100);
	cxt.closePath();
	cxt.stroke();
	cxt.restore();


	//分针
	cxt.save();
	cxt.lineWidth = 5;
	cxt.strokeStyle = "red";
	cxt.translate(250,250);
	cxt.rotate(Math.PI/180 * 6 * minute1)
	cxt.beginPath();
	cxt.moveTo(0,0);
	cxt.lineTo(0,-150);
	cxt.closePath();
	cxt.stroke();
	cxt.restore();

	//秒针
	cxt.save();
	cxt.lineWidth = 2;
	cxt.strokeStyle = "black";
	cxt.translate(250,250);
	cxt.rotate(Math.PI/180 * 6 * second)
	cxt.beginPath();
	cxt.moveTo(0,0);
	cxt.lineTo(0,-180);
	cxt.closePath();
	cxt.stroke();
	cxt.restore();

最后用计时器控制页面的动画，每1000毫秒运行一次