这里做一个HTML5 入门的练手，一个小时钟项目，可以再上面拓展很多，程序员培养的就是思想

<!DOCTYPE HTML>

<html>

<head>

<title>Click</title>

<style>

#clock{

 background:#abcdef;

}

</style>

</head>

<body>

<canvas id="clock" width="500" height="500" >

您的浏览器不支持标签，无法看到时钟

</canvas>

</body>

<script>

  var clock = document.getElementById("clock");

  var cxt = clock.getContext("2d");

  function drawCloclk(){

  cxt.clearRect(0,0,500,500);

  //获取时间对象

  var now = new Date();

  var sec = now.getSeconds();

  var min = now.getMinutes();

  var hours = now.getHours();

  //小时必须获取浮点类型

  hours = hours+min/60;

  //转换时间

  hours = hours >12?hours-12:hours;

  //表盘 蓝色

  cxt.lineWidth = 10;

  cxt.strokeStyle="blue";

  cxt.beginPath();

  cxt.arc(250,250,200,0,360,false);

  cxt.stroke();

  cxt.closePath();

  //刻度

  for(var i=0;i<12;i++){

     //开启异次元空间

      cxt.save();

      cxt.beginPath();

      cxt.lineWidth = 10;

      cxt.strokeStyle="#000";

      //设置原点

      cxt.translate(250,250);

      //设置旋转角度

      cxt.rotate(i*30*Math.PI/180);

      //画线

      cxt.moveTo(0,-170);

      cxt.lineTo(0,-190);

      cxt.stroke();

      cxt.closePath();

      cxt.restore();

  }

  //分刻度

    for(var i=0;i<60;i++){

     //开启异次元空间

      cxt.save();

      cxt.beginPath();

      cxt.lineWidth = 5;

      cxt.strokeStyle="#000";

      //设置原点

      cxt.translate(250,250);

      //设置旋转角度

      cxt.rotate(i*6*Math.PI/180);

      //画线

      cxt.moveTo(0,-180);

      cxt.lineTo(0,-190);

      cxt.stroke();

      cxt.closePath();

      cxt.restore();

  }

  //时针

       //开启异次元空间

      cxt.save();

      cxt.beginPath();

      cxt.lineWidth = 7;

      cxt.strokeStyle="#000";

      //设置原点

      cxt.translate(250,250);

      //设置旋转角度

      cxt.rotate(hours*30*Math.PI/180);

      //画线

      cxt.moveTo(0,-140);

      cxt.lineTo(0,10);

      cxt.stroke();

      cxt.closePath();

      cxt.restore();

  //分针

         //开启异次元空间

      cxt.save();

      cxt.beginPath();

      cxt.lineWidth = 5;

      cxt.strokeStyle="#000";

      //设置原点

      cxt.translate(250,250);

      //设置旋转角度

      cxt.rotate(min*6*Math.PI/180);

      //画线

      cxt.moveTo(0,-160);

      cxt.lineTo(0,15);

      cxt.stroke();

      cxt.closePath();

      cxt.restore();

  //秒针

           //开启异次元空间

      cxt.save();

      cxt.beginPath();

      cxt.lineWidth = 3;

      cxt.strokeStyle="red";

      //设置原点

      cxt.translate(250,250);

      //设置旋转角度

      cxt.rotate(sec*6*Math.PI/180);

      //画线

      cxt.moveTo(0,-170);

      cxt.lineTo(0,20);

      cxt.closePath();

      cxt.stroke();

      cxt.beginPath();

      //画交叉点

      cxt.arc(0,0,5,0,360,false)

      cxt.closePath();

      cxt.fillstyle = "blue";

      cxt.fill();

      cxt.stroke();

            cxt.beginPath();

      //画交叉点

      cxt.arc(0,-150,5,0,360,false)

      cxt.closePath();

      cxt.fillstyle = "blue";

      cxt.fill();

      cxt.stroke();

      cxt.restore();

      }

      //使用周期循环函数setInternal(代码，时间)，让时钟动起来

      drawCloclk;

      setInterval(drawCloclk,1000);

 </script>

</html>

H TML5 之 （4） 小项目一 时钟的更多相关文章

  1. ESP32S2小项目-FM-网络时钟/电台-Arduino开发环境

    ESP32S2小项目,FM,网络时钟/电台,Arduino开发环境 效果展示 @ 目录 ESP32S2小项目,FM,网络时钟/电台,Arduino开发环境 效果展示 开机动画: 网络时钟: FM模块: ...

  2. IOS－小项目（饿了么 网络部分 简单实现）

    在介绍小项目之前,在此说明一下此代码并非本人所写,我只是随笔的整理者. 在介绍之前先展现一下效果图. 看过效果图大家应该很熟悉了,就是饿了么的一个界面而已,值得注意的是,实现时并没有采用本地连接,而是 ...

  3. 模拟XShell的小项目

    不知道大家有没有用过XShell这款工具,这款工具通过windows可以远程操作处于开机状态的linux操作系统,也就是说把你的电脑和一台服务器连入网络,你通过输入服务器所在的IP地址建立一个会话就可 ...

  4. 小项目特供 贪吃蛇游戏（基于C语言）

    C语言写贪吃蛇本来是打算去年暑假写的,结果因为ACM集训给耽搁了,因此借寒假的两天功夫写了这个贪吃蛇小项目,顺带把C语言重温了一次. 是发表博客的前一天开始写的,一共写了三个版本,第一天写了第一版,第 ...

  5. 【PHP小项目使用MVC架构】

    小项目名称是雇员管理系统. mvc是一种项目的开发模式,中文名称为模式视图控制器,是强制程序员将数据的输入.处理.输出分开的一种开发模式. 在这个小项目中,控制器使用service作为后缀名. 项目u ...

  6. 又见angular----步一步做一个angular4小项目

    这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...

  7. 【实战小项目】python开发自动化运维工具--批量操作主机

    有很多开源自动化运维工具都很好用如ansible/salt stack等,完全不用重复造轮子.只不过,很多运维同学学习Python之后,苦于没小项目训练.本篇就演示用Python写一个批量操作主机的工 ...

  8. Qt小项目之串口助手控制LED

    Qt小项目之串口助手控制LED 前言 最近刚学了一点Qt开发上位机,尝试着做个小软件练练手.查找了很多资料,做了一个简单的串口助手,可以实现串口基本发送和接收功能,支持中文显示,还可以控制STM32开 ...

  9. web实践小项目<一>:简单日程管理系统（涉及html/css，javascript，python，sql，日期处理）

    暑假自学了些html/css,javascript和python,苦于学完无处练手几乎过目即忘...最后在同学的建议下做了个简单日程管理系统.借第一版完成之际,希望能将实践期间犯过的错误和获得的新知进 ...

随机推荐

  1. BZOJ_1208_&_Codevs_1258_[HNOI2004]_宠物收养所_(平衡树/set)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1208 (据说codevs要更新?就不放codevs的地址了吧...) 有宠物和人,每个单位都有 ...

  2. jmap(Memory Map For Java)

    功能   jmap(Memory Map For Java)命令用于生成堆转储快照(一般称为heaphump或dump文件).如果不使用jmap命令,要想获取Java堆转储快照还有一些比较“暴力”的手 ...

  3. 创建用于自定义SharePoint解决方案部署的Visual Studio项目

    转:http://soft.zdnet.com.cn/software_zone/2007/0903/488083.shtml 在基于SharePoint的开发中,我们通常会在WSS的TEMPLATE ...

  4. Android Http Server

    Android Http Server 1 引言          Android如何构建Http服务器呢?本文的小例子,约莫着,还是能做个参考的^^.恩,例子实现的是PC浏览手机文件,支持了下载和删 ...

  5. LR测试工具性能指标详解

    这篇文章将对LoadRunner测试工具的性能指标从以下三点进行详解. 第一点.Web资源分析是从服务器入手对Web服务器的性能分析. 1.Hits per Second "每秒点击次数&q ...

  6. devi into python 笔记（四）python的类

    import 与 from ... import ...: #types只是一个包,FunctionType只是这个包里的一个函数.这里用它来演示 import types #如果要用Function ...

  7. 27 Best Free Eclipse Plug-ins for Java Developer to be Productive

    Eclipse offers an integrated development environment having an extensible plug-in system. This enabl ...

  8. 《神经网络和深度学习》系列文章三：sigmoid神经元

    出处: Michael Nielsen的<Neural Network and Deep Leraning>,点击末尾“阅读原文”即可查看英文原文. 本节译者:哈工大SCIR硕士生 徐伟 ...

  9. hdoj 2147 kiki's game【博弈】

    kiki's game Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 40000/10000 K (Java/Others)Total ...

  10. 捕获 PHP 致命错误 Fatal Errors

    register_shutdown_function()函数都将会你的程序执行完后执行,无论你的程是否运行正常. 所以,在这个函数前执行任何操作我们都要检查是否真的有致命错误出现.如果出现致命错误,我 ...