这里做一个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. Hibernate：组合模式解决树的映射

    树经常用来展示目录结构,那么在Hibernate中怎样解决树的映射问题呢? 先来看一个分销商的树形结构的例子 所有分销商 东北区 辽宁省 沈阳医药 吉林省 华北区 北京市 北京医药 河北省 华南区 那 ...

  2. Java函数参数传递方式详解

    在阅读本文之前,根据自己的经验和理解,大家可以先思考并选择一下Java函数的参数传递方式: A. 是按值传递的? B. 按引用传递的? C. 部分按值部分按引用? 此处暂不宣布正确答案,我们通过一个简 ...

  3. VS（Microsoft Visual Studio2010）工具打开项目所需的应用程序，出现未安装（.csproj）的应用程序的解决办法

    打开这个文件的话,从列表中选择打开方式的时候,看看选择打开项目文件的打开方式是不是visual studio,如果是Micrisoft visual studio version selector.那 ...

  4. 【CF】110 Div.1 B. Suspects

    这题目乍眼一看还以为是2-sat.其实很水的,O(n)就解了.枚举每个人,假设其作为凶手.观察是否满足条件.然后再对满足的数目分类讨论,进行求解. /* 156B */ #include <io ...

  5. 用C#中的params关键字实现方法形参个数可变

    个人认为,提供params关键字以实现方法形参个数可变是C#语法的一大优点.在方法形参列表中,数组类型的参数前加params关键字,通常可以在调用方法时代码更加精练. 例如,下面代码: class P ...

  6. win7 下安装oracle 10g

    oracle 10g 在win7下安装,提示程序异常终止,发生未知错误 在网上搜结果: 修改Oracle 10G\database\stage\prereq\db\refhost.xml 在 < ...

  7. Gilde加载网络图片(一)

    前两天 一个朋友要在本地加载几M的大图 用于用户滚动查看.按照思路 是压缩后加载显示但是这样会不清晰, 其实gilde用来加载图片 很牛掰 于是了解一下 下面贴上两个工具类: package com. ...

  8. Ubuntu修改源

    linux里的源,简单理解就是你用 apt-get 命令去下载安装软件时,系统去哪里找这个软件.去的那个位置就是源. linux默认的源是国外的,下载速度比较慢,可以修改为国内的一些好的源地址,例如网 ...

  9. devi into python 笔记（五）异常 文件操作 sys os glob模块简单实用

    异常: Java异常: try catch块处理异常,throw引发异常. Python异常: try except块处理异常,raise引发异常. 异常如果不主动处理,则会交给Python中的缺省处 ...

  10. 推荐一款自己的软件作品[豆约翰博客备份专家]，新浪博客，QQ空间，CSDN，cnblogs博客备份，导出CHM,PDF(转载)

    推荐一款自己的软件作品[豆约翰博客备份专 豆约翰博客备份专家是完全免费,功能强大的博客备份工具,博客电子书(PDF,CHM和TXT)生成工具,博文离线浏览工具,软件界面美观大方,支持多个主流博客网站( ...