这里做一个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. nyist 61 传纸条 nyist 712 探 寻 宝 藏(双线程dp问题)

    http://acm.nyist.net/JudgeOnline/problem.php?pid=61 http://acm.nyist.net/JudgeOnline/problem.php?pid ...

  2. bzoj1984

    树链剖分在边上的应用比维护点稍微麻烦一点,是对每条边标号,并且要记录每个点父亲边的编号和重儿子然后注意各种细节线段树上和bzoj1858的维护方法类似,覆盖的优先级高于加具体见程序,完全是为了提升状态 ...

  3. 【转】ios中@class和 #import 的使用时机

    代码中会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,为什么不直接把#import放到h文件中呢? 这是因为h文件在修改后,所有import该h文件的所有文件必须重 ...

  4. 安装PyQt

    下载PyQt(版本一定要对) http://www.riverbankcomputing.com/software/pyqt/download import sys,urllib2 from HTML ...

  5. 获得WCF Client端的本地端口 z

    当WCF调用远程服务时,显示该调用的网速或流量.其中比较关键的一步就是需要获得WCF  Client端的本地端口,原来以为是个简单的事情,结果查了1个多小时谷歌,硬是没找到好的法子,只有自己动手了. ...

  6. jquery mobile 前言

    引用js: <link rel="stylesheet" href="../jquery.mobile-1.1.0/jquery.mobile-1.1.0.css& ...

  7. AIX项目总结_oracle_sqlloader_01

    近来一直在忙AIX的移行项目,但也因自己小小偷懒,所以到现在才开始记录.接下来,言归正传. 这个项目中,学习中了shell相关知识,从基本的语法命令(定义变量.特殊变量使用.循环控制.方法调用等)到l ...

  8. Windows 8.1中怎么启用Framework3.5或2.0 （ 一安装就跳到下载 Win8.1自带了Framework）

    Windows 8.1中怎么启用Framework3.5或2.0      ( 一安装就跳到下载 Win8.1自带了Framework): Win+X键 打开   开始菜单 -> 命令提示符(管 ...

  9. checkbox in iOs

    UIButton *checkbox; BOOL checkBoxSelected; checkbox = [[UIButton alloc] initWithFrame:CGRectMake(x,y ...

  10. Android——Cocosd2d-x手机游戏开发学习思路

    手机APP应用如雨后春笋般冒了出来,而在众多的APP应用中,游戏占据了半壁江山.它丰富着人们的业余生活,增进了人们之间的沟通交流.也有许多开发的朋友对游戏开发情有独钟,他们不止是享受着有很多的人们去下 ...