HTML5做一个时钟，并且加上背景音乐和背景图片
这是浏览器打开的效果
奉上代码
<!DOCTYPE html>
<html>
<head>
<title>时钟</title>
</head>
<body">
<center>
<canvas width="500" height="500" margin:50px auto; display:block; " id="clock">
您的浏览器当前版本不支持canvas表签
</canvas>
<script>
var clock = document.getElementById("clock");
var cxt = clock.getContext('2d');
function drawClock(){
cxt.clearRect(0,0,500,500); //清除画布
//获取时间
var now = new Date(); //定义时间
var sec = now.getSeconds(); //获取秒
var minute = now.getMinutes(); //获取分钟
var hour = now.getHours(); //获取小时
//小时必须获取浮点类型，产生偏移（小时+分钟比）
hour = hour + minute/60;
//将24小时转换为12小时
hour=hour>12?hour-12:hour;
//刻度
//时针刻度
for(var i=0; i<12; i++){
cxt.save();
//设置时针的样式
cxt.lineWidth=7;
cxt.strokeStyle="#a9a9a9";
//设置异次元空间原点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170); //画线， 从坐标0，-170开始
cxt.lineTo(0,-190); //到坐标0，-190结束
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//分针刻度
for(var i=0; i<60;i++){
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="#a9a9a9";
cxt.translate(250,250);
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//时针
cxt.save();
//时针样式
cxt.lineWidth = 7;
cxt.strokeStyle="#a9a9a9";
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.stroke();
cxt.closePath();
cxt.restore();
//分针
cxt.save();
//分针样式
cxt.lineWidth = 5;
cxt.strokeStyle="#a9a9a9";
cxt.translate(250,250);
cxt.rotate(minute*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.stroke();
cxt.closePath();
cxt.restore();
//秒针
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle="#a9a9a9";
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-185);
cxt.lineTo(0,20);
cxt.stroke();
cxt.closePath();
//画出时针，分针，秒针交叉点
cxt.beginPath();
cxt.strokeStyle="#a9a9a9";
cxt.arc(0,0,5,0,360,false);
cxt.fillStyle="#fff"; //填充颜色
cxt.fill(); //填充
cxt.stroke();
cxt.closePath();
//秒针装饰
cxt.beginPath();
cxt.strokeStyle="#f00";
cxt.arc(0,-160,5,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//使用setinterval();让时钟动起来
drawClock();
setInterval(drawClock,1000);
</script>
<audio autoplay="autoplay" loop="loop" preload="auto"
src="https://nj01ct01.baidupcs.com/file/9a0cb84855a678eaf976dbfb91bbb7fd?bkt=p3-14009a0cb84855a678eaf976dbfb91bbb7fda550bbd300000010538d&fid=4187048366-250528-833429510540241&time=1541485015&sign=FDTAXGERLQBHSKW-DCb740ccc5511e5e8fedcff06b081203-%2FPCDb6JE9IcQmwOZU23l9EWJ4cU%3D&to=63&size=1069965&sta_dx=1069965&sta_cs=1&sta_ft=mp3&sta_ct=5&sta_mt=5&fm2=MH%2CYangquan%2CAnywhere%2C%2Cguangdong%2Cct&ctime=1526541198&mtime=1526541542&resv0=cdnback&resv1=0&vuk=4187048366&iv=0&htype=&newver=1&newfm=1&secfm=1&flow_ver=3&pkey=14009a0cb84855a678eaf976dbfb91bbb7fda550bbd300000010538d&sl=76480590&expires=8h&rt=pr&r=784764042&mlogid=7180383717541960870&vbdid=462734660&fin=%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80+-+%E5%87%A4%E6%B1%82%E5%87%B0.mp3&fn=%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80+-+%E5%87%A4%E6%B1%82%E5%87%B0.mp3&rtype=1&dp-logid=7180383717541960870&dp-callid=0.1.1&hps=1&tsl=80&csl=80&csign=1xfXWaODMyPBR0bq3Ls1VTXchHM%3D&so=0&ut=6&uter=4&serv=0&uc=3073435127&ti=5902310e0d478cb66ec39ff6665d0bf45324a4534cb63f8a&by=themis">
你的浏览器不支持audio标签
</audio>
<h2>
</h2>
</center>
<div id="Layer1" style="position: absolute; width: 100%; height: 100%; z-index: -1; left: 0; top: 0;">
<img src="http://shp.qpic.cn/ishow/2735012715/1485500432_1644740874_17754_sProdImgNo_6.jpg/0" height="100%" width="100%" style="left: 0; top: 0;"/>
</div>
</body>
</html>注意：背景音乐音频是百度云的。有可能你看见，复制过去玩，已经失效了，背景图片王者荣耀官网的凤求凰