zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    OC-为何用copy修饰block
    OC-RunLoop运行循环
    苹果审核之遇到IPV6问题被拒的解决方法
    LeetCode学习_day1:原地算法
    OC-加载h5富文本的代码,并计算高度
    OC-bug: Undefined symbols for architecture i386: "_OBJC_CLASS_$_JPUSHRegisterEntity", referenced from:
    了解iOS各个版本新特性总结
    iOS 快速打包方法
    iOS tableView侧滑删除的第三方控件
    Object_C 集成环信时,中文环境下不显示中文
  • 原文地址:https://www.cnblogs.com/liu-heng/p/6873826.html
Copyright © 2011-2022 走看看