设为首页收藏本站

搜索
查看: 349|回复: 2

Hmlt5与Js实现动态时钟

[复制链接]
回帖奖励 30 金钱 回复本帖可获得 10 金钱奖励! 每人限 1 次(中奖概率 40%)

11

主题

17

帖子

2057

积分

金牌会员

Rank: 6Rank: 6

积分
2057
发表于 2016-10-10 13:17:29 | 显示全部楼层 |阅读模式
本帖最后由 zyw 于 2016-10-10 13:24 编辑
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>时钟</title>
  6.         <style type="text/css">
  7.             canvas{
  8.                 background-color:grey;
  9.             }
  10.         </style>

  11.         <script type="text/javascript">
  12.         var date=new Date();
  13.         var h=date.getHours();
  14.         var m=date.getMinutes();
  15.         var s=date.getSeconds();
  16.         //m=25;
  17.         //s=58;
  18.         s=s-15;
  19.         m=m-15;
  20.         h=(h%12)*5+0-15+((m+15)/12);
  21.         window.onload=function (){  
  22.             var can=document.getElementById('can');
  23.             var draw=can.getContext("2d");
  24.             function drawMark(){
  25.                 draw.shadowColor="#ccc";
  26.                 draw.shadowOffsetX=1;
  27.                 draw.shadowOffsetY=1;
  28.                 draw.shadowBlur=5;
  29.                 var cg=draw.createRadialGradient(200,200,10,200,200,80);
  30.                 cg.addColorStop(0,"white");
  31.                 cg.addColorStop(0.7,"#ccc");
  32.                 cg.addColorStop(1,"#ccc");
  33.                 draw.beginPath();
  34.                 draw.fillStyle=cg;
  35.                 draw.arc(200,200,100,0,Math.PI*2);
  36.                 draw.stroke();
  37.                 draw.fill();
  38.                 for(var i=0;i<60;i++) {
  39.                     var r=0;
  40.                     var lw=0;
  41.                     if(i%5==0) {
  42.                        lw=3;
  43.                        r=82;
  44.                     } else {
  45.                       lw=1;
  46.                       r=90;
  47.                     }
  48.                     draw.beginPath();
  49.                     draw.lineWidth=lw;
  50.                     draw.moveTo(200+100*Math.cos(6*i*Math.PI/180),200+100*Math.sin(6*i*Math.PI/180));
  51.                     draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
  52.                     draw.stroke();
  53.                 }
  54.                 draw.beginPath();
  55.                 draw.fillStyle="black";
  56.                 draw.arc(200,200,5,0,Math.PI*2);
  57.                 draw.stroke();
  58.                 draw.fill();
  59.             }
  60.             function Hours(){
  61.                 draw.beginPath();
  62.                 draw.moveTo(200,200);
  63.                 var i=0;
  64.                 r=80;
  65.                 draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
  66.                 draw.stroke();
  67.             }
  68.             function Hours(i){
  69.                 draw.beginPath();
  70.                 draw.lineWidth=3;
  71.                 draw.moveTo(200,200);
  72.                 r=60;
  73.                 draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
  74.                 draw.stroke();
  75.             }
  76.             function Minutes(i){
  77.                 draw.beginPath();
  78.                 draw.lineWidth=2;
  79.                 draw.moveTo(200,200);
  80.                 r=70;
  81.                 draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
  82.                 draw.stroke();
  83.             }
  84.             function Seconds(i){
  85.                 draw.beginPath();
  86.                 draw.lineWidth=1;
  87.                 draw.moveTo(200,200);
  88.                 r=80;
  89.                 draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
  90.                 draw.stroke();
  91.             }
  92.             drawMark();
  93.             Hours(h);
  94.             Minutes(m);
  95.             Seconds(s);
  96.             setInterval(function (){
  97.                 var date=new Date();
  98.                 h=date.getHours();
  99.                 m=date.getMinutes()-15;
  100.                 s=date.getSeconds()-15;
  101.                 h=(h%12)*5+0-15+((m+15)/12);
  102.                 draw.clearRect(0,0,400,400);
  103.                 drawMark();
  104.                 Hours(h);
  105.                 Seconds(s);
  106.                 Minutes(m);
  107.             },1000);
  108.         }
  109.         </script>
  110.     </head>
  111.     <body>
  112.         <canvas width="400" height="400" id="can">你的浏览器out了</canvas>
  113.     </body>
  114. </html>
复制代码
示例演示

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

0

主题

6

帖子

42

积分

新手上路

Rank: 1

积分
42
发表于 2016-10-13 21:23:15 | 显示全部楼层
谢谢楼主,学习了!

7

主题

11

帖子

379

积分

VIP1

Rank: 1

积分
379
发表于 2016-10-11 11:21:51 | 显示全部楼层
学习了!
这世间再也没有比置身于人群之中,却孤独地活着,更为可怕
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ| 小黑屋| 完美起航-论坛     

完美起航-论坛中心。

Copyright © 2001-2013 Okgoes.   All Rights Reserved.

Powered by 完美起航 X3.2( 赣ICP备15002760号 )

快速回复 返回顶部 返回列表