这里做一个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. ActivityManager的使用

    本节内容主要是讲解ActivityManager的使用,通过ActivityManager我们可以获得系统里正在运行的activities,包括 进程(Process)等.应用程序/包.服务(Serv ...

  2. 【log4js】

    手动创建日志目录 定时清理 nodejs之日志管理 玩转Nodejs日志管理log4js access.log-2015-11-20

  3. SharePoint 2010 安装简介及相关补丁下载

    转:http://www.cnblogs.com/jianyus/archive/2011/10/28/2228212.html 1.安装Windows Server 2008 系统,这个我就不说了, ...

  4. wpa_supplicant 配置与应用

    概述 wpa_supplicant是wifi客户端(client)加密认证工具,和iwconfig不同,wpa_supplicant支持wep.wpa.wpa2等完整的加密认证,而iwconfig只能 ...

  5. asp.net中的<%%>的几种形式的用法

    转自:http://blog.csdn.net/wang379275614/article/details/9625911 在asp.net中经常出现包含这种形式<%%>的html代码,总 ...

  6. 【好文转载c++】 sizeof 使用的经典总结

    为了在人面前畅快的吹牛逼,你必须学会背后努力  -----张小二. 写在转载之前: sizeof到底是多少?本来我没有关注,只是有次室友问了我几个sizeof的问题,我被问住了,他当时问我了sizeo ...

  7. Ubuntu 如何使用apt命令安装、升级、卸载软件

    apt-get是一条linux命令,适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸载软件或操作系统. apt-get命令一般需要root权限执行,所以一般跟着su ...

  8. 399. Evaluate Division

    图像题,没觉得有什么简单的办法,貌似可以用Union Find来解. 感觉有2种思路,一种是先全部构建好每2个点的weight,然后直接遍历queires[][]来抓取答案. 一种是只构建简单的关系图 ...

  9. 获取toast值

    /** * 获取Toast的String值 * @return */ public String getToast(int timeout){ TextView toastTextView = nul ...

  10. jsp 多条记录提交

    前端jsp页面可以通过form提交标有name属性值得input的value数据给服务器,其中如何传递数组形式呢?如下: 1.前端jsp页面 其中灰色的部分是一个循环出现的值,因此form提交后,后台 ...