Javascript实现时钟

<!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实现时钟的更多相关文章

如何用iframe标签以及Javascript制作时钟？
如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...
JavaScript电子时钟+倒计时
JavaScript时间类获取时分秒: getHours() getMinutes(); getSeconds(); 获取 ...
JavaScript制作时钟特效
需求说明:制作显示年.月.日.星期几并且显示上午(AM)和下午(PM)的 12进制的时钟,具体效果如下所示: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C// ...
Javascript学习--时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
原生javascript制作时钟
用JavaScript来制作实时的时钟效果图如下: 接下来,我会一步一步向大家介绍如何制作,并将里面的一些值得注意的事项提出来. 首先是把框架搭构起来, <div> <canvas ...
echarts制作html和JavaScript的时钟和代码分析与注释
1.效果图 2.说明: 2.1 代码是大神制作的,我进行修改,感谢大神,原创属于他. 2.2 我对代码进行分析.注释.整理,增加代码的可读性. 2.3 通过上述自己的工作,自己也能熟悉相关的JavaS ...
Javascript 电子时钟源码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
闲扯 Javascript 03 时钟和QQ延时框
时钟 : 所用到得图片 : 开启定时器 setInterval 间隔型 setTimeout 延时型停止定时器 clearInterval clearTimeout 效果思路获取系统时间 D ...
javascript数字时钟
<html> <head> <script type="text/javascript"> function startTime() { var ...

随机推荐

08.01 签到！ js 作用域
js 作用域 : 1.js 没有块作用域 : for (var i = 0;i < 4; i++){ } alert(i) // i = 3 2.js 没有动态作用域: function f1( ...
1. javacript高级程序设计-JavaScript简介
JavaScript诞生于1995年,由Netscape公司布兰登·艾奇开发,JavaScript主要包括三个部分: (1). ECMAScript,由ECMA-262定义,提高核心语言功能 (2). ...
SQL删除约束
)禁止所有表约束的SQL select 'alter table '+name+' nocheck constraint all' from sysobjects where type='U' )删除 ...
正确理解 clear:both
要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个 ...
Meta标签实现阻止移动设备(手机、Pad)的浏览器双击放大网页
一.背景在当今这个移动设备发展越来越快,并且技术越来越成熟的时代,移动设备成了企业扩展业务不可或缺的重要领域之一,随之而来的是适应手机的网站层出不穷,在开发过程中,我们往往会遇到一个很尴尬的问题:移 ...
Java发送邮件初窥
一.背景最近朋友的公司有用到这个功能,之前对这一块也不是很熟悉,就和他一起解决出现的异常的同时,也初窥一下使用Apache Common Email组件进行邮件发送. 二.Java发送邮件的注意事项 ...
java annotation
import java.lang.annotation.Documented; import java.lang.annotation.ElementType; import java.lang.an ...
Mysql子查询
1单值(Scalar operand) 只有当外层(Parent)不为空时,才返回相应值:否则返回NULL. note:For the subquery just shown, if t1 were ...
XMPP框架下微信项目总结（4）重新连接服务器
xmpp 很多功能是面向模块开发的例如电子名片无须自己去写请求的代码XMPP(文件)->Extension(存放的是各个模块)->Reconnect(自动连接模块) ...
PHP之MVC项目实战
本文主要包括以下内容类文件自动加载路径管理页面跳转注册自动加载方法配置文件系统 cookie session 类文件自动加载在PHP中使用别的类时,需要载入类文件,如果类很多的话,需要重复 ...

Javascript实现时钟

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

随机推荐

热门专题