JavaScript中实现时钟效果

利用Math和定时器实现时钟效果

思路：首先创建一个获取年、月、日、星期、小时、分钟、秒的函数，这里需要注意两点
1.JavaScript中的月份是 从0开始的，所以要在月份上加1，能够得到正确的月份
2.JavaScript中规定获取星期的结果是0-6的数值，0表示星期日，1表示星期一…6表示星期六

在这里我们要将获得的星期数转化为汉字：
定义一个数组，其中的数据内容为var arr = ['日','一','二','三','四','五','六']，返回值中利用模板字符串调用数组中的数据即可

封装好setTime函数后要在定时器中调用它，定时器中有一个问题，程序的第一次执行是在规定的间隔时间之后，才会执行，所以在这里提前调用一次函数。定时器中的时间间隔设为1000，也就是1秒，这样时钟就完成了

function setTime(){
	var d = new Date();
	var year = d.getFullYear();
	var month = d.getMonth()+1;
	var date = d.getDate();
	var week = d.getDay();
	var hour = d.getHours( );
	var minute = d.getMinutes( );
	var second = d.getSeconds( );
	
	var arr = ['日','一','二','三','四','五','六']
	return `现在时间是 ${year}年 ${month}月 ${date}日 星期${arr[week]} ${hour}点 ${minute}分 ${second}秒 `
}


function num(){
  var c1 = parseInt(Math.random()*256);
  var c2 = parseInt(Math.random()*256);
  var c3 = parseInt(Math.random()*256);
  return `rgb(${c1},${c2},${c3})`
}
d.innerHTML = setTime();
setInterval(function(){
  d.innerHTML = setTime();
  d.style.color = num();
},1000)
        

这里我们给时间加了个样式，利用随机数，跟随定时器，随机改变时钟的颜色

效果图