<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>时钟</title>

</head>

<body>

    <canvas id="clock" width="500" height="500" style="background-color:white;">你的浏览器不支持canvas</canvas>

    <script type="text/javascript">

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

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

        function drawClock() {

            var now = new Date();

            var sec = now.getSeconds();

            var min = now.getMinutes();

            var hour = now.getHours();

            hour > 12 ? hour - 12 : hour;

            hour += (min / 60);

            //先清空画布

            cxt.clearRect(0, 0, canvas.width, canvas.height);

            // var img = new Image();

            // img.src = "tw.png";

            // cxt.drawImage(img, 46, 46);

            //img.onload = function () {

            //    cxt.drawImage(img, 0, 0);

            //}

            //画表盘大圆 圆心：x=250 y=250

            // cxt.strokeStyle = "#1C86EE";

            // cxt.lineWidth = 3;

            // cxt.beginPath();

            // cxt.arc(500, 500, 200, 0, 360);

            // cxt.stroke();

            // cxt.closePath();

            //时刻度

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

                cxt.save();//保存当前状态

                cxt.lineWidth = 2;

                cxt.strokeStyle = "#1C86EE";  //strokeStyle=color|gradient|pattern 返回用于笔触的颜色、渐变或模式

                //设置原点

                cxt.translate(250, 250);  //重新映射画布上的 (x,y) 位置

                //设置旋转角度

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

                cxt.beginPath(); //beginPath() 方法开始一条路径，或重置当前的路径。

                cxt.moveTo(0, -175); //把路径移动到画布中的指定点，不创建线条

                cxt.lineTo(0, -195); //添加一个新点，然后在画布中创建从该点到最后指定点的线条

                cxt.stroke(); //绘制已定义的路径

                cxt.closePath();//创建从当前点回到起始点的路径

                cxt.restore();//返回之前保存过的路径状态和属性s

            }

            //分刻度

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

                cxt.save();

                cxt.lineWidth = 2;

                cxt.strokeStyle = "#1C86EE";

                cxt.translate(250, 250);

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

                cxt.beginPath();

                cxt.moveTo(0, -185);

                cxt.lineTo(0, -195);

                cxt.stroke();

                cxt.closePath();

                cxt.restore();

            }

            //以下的时针、分针、秒针均要转动，所以在这里要设置其异次元空间的位置

            //根据当前的小时数、分钟数、秒数分别设置各个针的角度即可

            //-----------------------------时针-----------------------------

            cxt.save();

            cxt.lineWidth = 5;

            cxt.strokeStyle = "#1C86EE";

            cxt.translate(250, 250);

            cxt.rotate(hour * 30 * Math.PI / 180);//每小时旋转30度

            cxt.beginPath();

            cxt.moveTo(0, -130);

            cxt.lineTo(0, 10);

            cxt.stroke();

            cxt.closePath();

            cxt.restore();

            //-----------------------------分针-----------------------------

            cxt.save();

            cxt.lineWidth = 5;

            cxt.strokeStyle = "#1C86EE";

            cxt.translate(250, 250);

            cxt.rotate(min * 6 * Math.PI / 180);//每分钟旋转6度

            cxt.beginPath();

            cxt.moveTo(0, -150);

            cxt.lineTo(0, 10);

            cxt.stroke();

            cxt.closePath();

            cxt.restore();

            //-----------------------------秒针-----------------------------

            cxt.save();

            cxt.lineWidth = 3;

            cxt.strokeStyle = "#1C86EE";

            cxt.translate(250, 250);

            cxt.rotate(sec * 6 * Math.PI / 180);//每秒旋转6度

            cxt.beginPath();

            cxt.moveTo(0, -170);

            cxt.lineTo(0, 10);

            cxt.stroke();

            cxt.closePath();

            //美化表盘，画中间的小圆

            cxt.beginPath();

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

            cxt.fillStyle = "#1C86EE";

            cxt.fill();

            cxt.strokeStyle = "#1C86EE";

            cxt.stroke();

            cxt.closePath();

            //秒针上的小圆

            cxt.beginPath();

            cxt.arc(0, -140, 2, 0, 360);

            cxt.fillStyle = "#1C86EE";

            cxt.fill();

            cxt.stroke();

            cxt.closePath();

            cxt.restore();

            //显示时间

            // cxt.font = "18px 微软雅黑";

            // cxt.lineWidth = 2;

            // cxt.fillStyle = "#1C86EE";

            // hour=now.getHours();

            // var str = hour > 10 ? hour : ("0" + hour) + ":" + (min > 10 ? min : ("0" + min))

            // cxt.fillText(str, 225, 380);

            //中国制造

            // cxt.font = "12px 宋体";

            // cxt.lineWidth = 1;

            // cxt.fillText("Made In China", 210, 400);

            // cxt.font= "16px 微软雅黑";

            // cxt.lineWidth= "6";

            // cxt.fillStyle ="#171717"

            // ctx.font="30px Verdana";

            // var str = (hour > 10 ? hour : ("0" + hour)) + ":" + (min > 10 ? min : ("0" + min))+(sec > 10 ? sec: ("0"+sec) );

            // cxt.fillText(str,220,380);

        }

        drawClock();

        setInterval(drawClock, 1000);

    </script>

</body>

</html>

Javascript实现时钟的更多相关文章

  1. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  2. JavaScript电子时钟+倒计时

    JavaScript时间类      获取时分秒:          getHours()          getMinutes();          getSeconds();       获取 ...

  3. JavaScript制作时钟特效

    需求说明:制作显示年.月.日.星期几并且显示上午(AM)和下午(PM)的 12进制的时钟,具体效果如下所示: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C// ...

  4. Javascript学习--时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 原生javascript制作时钟

    用JavaScript来制作实时的时钟 效果图如下: 接下来,我会一步一步向大家介绍如何制作,并将里面的一些值得注意的事项提出来. 首先是把框架搭构起来, <div> <canvas ...

  6. echarts制作html和JavaScript的时钟和代码分析与注释

    1.效果图 2.说明: 2.1 代码是大神制作的,我进行修改,感谢大神,原创属于他. 2.2 我对代码进行分析.注释.整理,增加代码的可读性. 2.3 通过上述自己的工作,自己也能熟悉相关的JavaS ...

  7. Javascript 电子时钟源码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. 闲扯 Javascript 03 时钟和QQ延时框

    时钟 : 所用到得图片  : 开启定时器 setInterval  间隔型 setTimeout  延时型 停止定时器 clearInterval clearTimeout 效果思路 获取系统时间 D ...

  9. javascript数字时钟

    <html> <head> <script type="text/javascript"> function startTime() { var ...

随机推荐

  1. Post方法调用公司发Mail的接口

    调用公司发Mail的接口. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  2. 如何用 Robotframework 来编写优秀的测试用例

    介绍 这篇文档将会是一篇在「高层面」的怎么用 Robotframework 来编写优秀测试用例的原则.至于如何使用 Robotframework 来与您的待测试系统相作用这样的细节讨论是不包含在这篇文 ...

  3. javascript开发 ios和android app的简单介绍

    先看几个名词解释: nodejs ionic,Cordova,phoneGap,anjularjs react-native,reactjs nodeJs 的介绍参见这里,写的很好http://www ...

  4. rabbitMQ中vhost虚拟主机的理解

    每个virtual host本质上都是一个RabbitMQ Server,拥有它自己的queue,exchagne,和bings rule等等.这保证了你可以在多个不同的application中使用R ...

  5. dump、cpio、tar、dd四种备份工具比较

    原文  http://blog.csdn.net/ether_lai/article/details/12656219 dump dump可执行文件系统增量备份的存储操作 ,dump 可将目录或整个文 ...

  6. 和我一起学python，基本概念 （life is short ,we need python）

    作者:tobecrazy  出处:http://www.cnblogs.com/tobecrazy 欢迎转载,转载请注明出处.thank you! 基本概念 : 常量: 常量名全部大写,如PI 变量: ...

  7. 调试WebService

    1.运行WebService的调用程序 2.浏览器中运行asmx,这一步是为了让w3wp.exe出现在下一步的列表中 3.“工具”或“调试”菜单-->附加到进程 (MS为什么把同一功能放在不同的 ...

  8. 让最新官方编译的 ffmpeg 在 XP 上 跑起来

    下载 fix-ffmpeg-bin.7z , 解压到 ffmpeg 的 bin 目录下, 运行 fixff.cmd 即可. fix-ffmpeg-bin.7z FT ft[]={ {"_wf ...

  9. Git-windows安装包

    下载地址 http://192.168.168.230/sw-search-sp/soft/4e/30195/Git-2.7.2-32-bit_setup.1457942412.exe 来自为知笔记( ...

  10. ubuntu vsftp 安装

    1.输入sudo apt-get install vsftpd 回车 这样就安装完毕了,然后去建立一个ftp的帐号,我这里使用的是ftp. 2.输入useradd ftp 回车 输入密码 回车 这样帐 ...