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>

  • 相关阅读:
    HDFS常用命令总结
    mac 安装zmap
    使用scrapy-redis搭建分布式爬虫环境
    xpath选择兄弟节点、返回上一级和选择多个属性
    什么是套接字(Socket)
    socket编程——一个简单的例子
    python之 __getattr__、__getattr__、__getitem__、__setitem__ 使用
    如何快速转载文章
    如何让类也变成可以迭代的对象
    leecode 第二题 简单
  • 原文地址:https://www.cnblogs.com/liu-heng/p/6873826.html
Copyright © 2011-2022 走看看