h5时钟

Posted 2020-09-18 Harry-

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5时钟相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>H5时钟</title>
</head>
<body>
<canvas height="500" width="500" id="clock" style="background:url(bg.jpg)"></canvas>
<audio src="7987.wav" loop autoplay="autoplay"></audio>
<script>
    var can = document.getElementById("clock");
    var con = can.getContext("2d");
    
    function clock(){
        con.clearRect(0,0,500,500);
            //开始画圆
        con.beginPath();
        con.lineWidth=5;
        con.arc(250,250,200,0,360,false);
        con.closePath();
        con.stroke();
        //注释部分为刻度
        /*for(var i=0;i<12;i++){
            con.save();
            con.translate(250,250);
            con.rotate(i*30*Math.PI/180);
            con.beginPath();
            con.lineWidth=10;
            con.moveTo(0,200);
            con.lineTo(0,170);
            con.closePath();
            con.stroke();
            con.restore();
        }
        
        for(var j=0;j<60;j++){
            con.save();
            con.translate(250,250);
            con.rotate(j*6*Math.PI/180);
            con.beginPath();
            con.lineWidth=5;
            con.moveTo(0,200);
            con.lineTo(0,180);
            con.closePath();
            con.stroke();
            con.restore();    
        }*/
        //获得时间
        var tt = new Date();
        var hour = tt.getHours();
        var minu = tt.getMinutes();
        var sec = tt.getSeconds();
        hour = hour>12?hour-12:hour;
        //时针
        con.save();
        con.translate(250,250);
        con.beginPath();
        con.lineWidth=10;
        h = hour+minu/60;
        con.rotate(h*30*Math.PI/180);
        con.moveTo(0,-130);
        con.lineTo(0,20);
        con.closePath();
        con.stroke();
        con.restore();
        
        //分针
        con.save();
        con.translate(250,250);
        con.beginPath();
        con.lineWidth=7;
        m = minu+sec/60;
        con.rotate(m*6*Math.PI/180);
        con.moveTo(0,-170);
        con.lineTo(0,20);
        con.closePath();
        con.stroke();
        con.restore();
        //秒针
        con.save();
        con.translate(250,250);
        con.beginPath();
        con.rotate(sec*6*Math.PI/180);
        con.moveTo(0,-210);
        con.lineTo(0,20);
        con.closePath();
        con.stroke();
        con.restore();
        //小圆点填充
        con.save();
        con.translate(250,250);
        con.lineWidth=5;
        con.beginPath();
        con.arc(0,0,5,0,360,false);
        con.closePath();
        con.fillStyle="white";
        con.fill();
        con.stroke();
        con.restore();
        
    }
    clock();
    setInterval("clock()",1000);
</script>
</body>
</html>

以上是关于h5时钟的主要内容，如果未能解决你的问题，请参考以下文章