zoukankan      html  css  js  c++  java
  • 时钟.html

    <!DOCTYPE html>
    <html charset="utf-8">
    <head>
    <title>时钟</title>
    <style>
    body{background:#42426F;}
    #c1{background:white;}
    span{color:white;}
    </style>
    <script>
    window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    function toDraw(){
    var x = 200;
    var y = 200;
    var r = 150;

    oGC.clearRect(0,0,oC.width,oC.height);
    //获取时间
    var oDate = new Date();
    var oHours = oDate.getHours();
    var oMin = oDate.getMinutes();
    var oSen = oDate.getSeconds();

    var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;
    var oMinValue = (-90 + oMin*6) * Math.PI/180;
    var oSenValue = (-90 + oSen*6) * Math.PI/180;
    var osen2Value = oSenValue+Math.PI;

    oGC.beginPath();
    for(var i = 0; i < 60; i++){
    oGC.moveTo(x,y);
    oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

    }
    oGC.closePath();
    oGC.stroke();

    oGC.fillStyle = 'white';
    oGC.beginPath();
    oGC.moveTo(x,y);
    oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
    oGC.closePath();
    oGC.fill();

    oGC.lineWidth=3;
    oGC.beginPath();
    for(var i = 0; i < 12; i++){
    oGC.moveTo(x,y);
    oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

    }
    oGC.closePath();
    oGC.stroke();

    oGC.fillStyle = 'white';
    oGC.beginPath();
    oGC.moveTo(x,y);
    oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
    oGC.closePath();
    oGC.fill();
    //时针
    oGC.lineWidth = 5;

    oGC.beginPath();
    oGC.moveTo(x,y);
    oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
    oGC.closePath();
    oGC.stroke();
    //分针
    oGC.lineWidth = 3;
    oGC.beginPath();
    oGC.moveTo(x,y);
    oGC.arc(x,y,r*15/20,oMinValue,oMinValue,false);
    oGC.closePath();
    oGC.stroke();
    //秒针
    oGC.lineWidth = 1;
    oGC.beginPath();
    oGC.moveTo(x,y);
    oGC.arc(x,y,r*17/20,oSenValue,oSenValue,false);
    oGC.closePath();
    oGC.stroke();
    oGC.lineWidth = 1;
    oGC.beginPath();
    oGC.moveTo(x,y);
    oGC.arc(x,y,r*5/20,osen2Value,osen2Value,false);
    oGC.closePath();
    oGC.stroke();

    oGC.beginPath();
    oGC.moveTo(x,y);
    oGC.arc(x,y,r*1/20,0,2*Math.PI,false);
    oGC.fillStyle='black';
    oGC.closePath();
    oGC.fill();


    }
    setInterval(toDraw,1000);
    toDraw();
    };
    </script>
    </head>
    <body>
    <canvas id="c1" width="500" height="500">
    <span>不支持canvas浏览器</span>
    </canvas><!--默认宽300,高150-->
    </body>
    </html>

  • 相关阅读:
    Postgresql 修改最大连接数到10000(默认2000多)
    Postgresql 当中有四种方式获取当前时间
    postgreSQL数据库limit分页、排序
    mybatis 中标签bool值类型为false判断
    (转)SpringCloud之服务网关Gateway
    Java线程池,isShutDown、isTerminated的作用与区别
    Java线程池的四种用法与使用场景
    (转)Java多线程:彻底搞懂线程池
    算法注意---1、取用数据之前一定要保证数据存在
    算法与数据结构---4.4、最大子段和-分治优化原理
  • 原文地址:https://www.cnblogs.com/huangf714/p/5907977.html
Copyright © 2011-2022 走看看