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>

  • 相关阅读:
    Linux下编译安装PCRE库
    Keepalived+Nginx实现高可用和双主节点负载均衡
    如何安装nginx第三方模块
    Nginx之http_image_filter_module模块使用
    nginx利用image_filter动态生成缩略图
    Nginx 服务器开启status页面检测服务状态
    nginx实时生成缩略图到硬盘上
    分布式文件系统 FastDFS 5.0.8 & Linux CentOS 6.7 安装配置
    spring中scope作用域(转)
    jQuery的切换函数(hover,toggle)
  • 原文地址:https://www.cnblogs.com/huangf714/p/5907977.html
Copyright © 2011-2022 走看看