做一个时钟，并且加上背景音乐和背景图片"/>
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="=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=".jpg/0" height="100%" width="100%" style="left: 0; top: 0;"/></div>
</body>
</html>注意：背景音乐音频是百度云的。有可能你看见，复制过去玩，已经失效了，背景图片王者荣耀官网的凤求凰
更多推荐
HTML5做一个时钟,并且加上背景音乐和背景图片
发布评论