<!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. Git – Fast Forward 和 no fast foward

    Git 很是强大,在体验过rebase的华丽之后,再次发现之前在TFS上遇到的问题一下都有解了.但也印证了Git深入并非易事.这篇就谈下一个容易迷糊的概念:Fast forward. Fast-For ...

  2. Routing in ASP.NET Web API和配置文件的设定读取

    Routing Tables In ASP.NET Web API, a controller is a class that handles HTTP requests. The public me ...

  3. 转： Oracle表空间查询

    1.查询数据库中的表空间名称 1)查询所有表空间 select tablespace_name from dba_tablespaces; select tablespace_name from us ...

  4. 【leetcode】Unique Paths II

    Unique Paths II Total Accepted: 22828 Total Submissions: 81414My Submissions Follow up for "Uni ...

  5. 【leetcode】Populating Next Right Pointers in Each Node II

    Populating Next Right Pointers in Each Node II Follow up for problem "Populating Next Right Poi ...

  6. UIScrollView 的 delaysContentTouches

    UIScrollView 的一段说明: Because a scroll view has no scroll bars, it must know whether a touch signals a ...

  7. MySQL中的增删改查

    将表cm_application中的state字段类型改为字符串型 alter table  cm_application  modify STATE varchar(50); 将表cm_applic ...

  8. Python处理JSON数据

    python解析json时为了方便,我们首先安装json模块,这里选择demjson,官方网址是:http://deron.meranda.us/python/demjson/ 访问之后点击页面的的D ...

  9. 关于Visual Studio 2013 编译 multi-byte character set MFC程序出现 MSB8031 错误的解决办法

    转自:http://blog.csdn.net/xiaochunzao/article/details/16987703 Visual Studio 2013 编译旧的 multi-byte char ...

  10. 3dmax导出3ds具有过多要导出的面超过64k解决方法

    参考:http://blog.sina.com.cn/s/blog_7a71dd090100w3r0.html 修改器->网格编辑->ProOptimizer 选中对象, 原始模型 顶点数 ...