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 ...

随机推荐

IO复用与select函数
socket select函数的详细讲解 select函数详细用法解析 http://blog.chinaunix.net/uid-21411227-id-1826874.html linu ...
poj 1276
一道DP的题目,还是一道多重背包的题目,第一次接触. 题意:有现今cash,和n种钱币,每种钱币有ni个,价值为di,求各种钱币组成的不超过cash的最大钱数思路:可以转换为0/1背包和完全背包来做 ...
angular.js初探
2015年7月27日 22:26:35 星期一用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复首先要引用js文件, 我这 ...
SAP 凭证类别
文章摘要:基本分为收.付.转三类,和传统的会计凭证分类一样.SA,总帐凭证.(转帐凭证)KA,供应商凭证.(付款凭证)KR,应付供应商凭证.(付款凭证)KG,供应商转来的红字发票,SAP称为贷方凭证. ...
【Android Studio错误】 If you are behind an HTTP proxy, please configure the proxy settings either in IDE or Gradle.
解决办法:以管理员身份运行cmd窗口,输入命令“netsh winsock reset” netsh winsock reset命令,作用是重置 Winsock 目录.如果一台机器上的Winsock协 ...
iOS AES加密解密实现方法
使用方法先导入头文件 #import "NSData+AES.h" //AES测试 //用来密钥 NSString *key = "; //用来发送的原始数据 NSSt ...
Divide and Conquer:Cable Master(POJ 1064)
缆绳大师题目大意,把若干线段分成K份,求最大能分多长二分法模型,C(x)就是题干的意思,在while那里做下文章就可以了,因为这个题目没有要求长度是整数,所以我们要不断二分才行,一般50-100次 ...
前台js分页，自己手写逻辑2
//设置分页 var pageSize = 10; //设置一次显示多少页 var pageLimit = 5; $(function(){ $.post("rest/rtdbfix/lis ...
Hibernate查询语句
1 hql查询 Hibernate的查询语句,hiberante提供的面向对象的查询语言,和sql语句的语法的相似.而且严格区分大小写. 1.1 from字句 /** * hql: from 字句 * ...
ios wax热更新之安装wax(xcode7.3.1)
通过Finder浏览到你保存该项目的文件夹.创建三个新的文件夹:wax.scripts和Classes. 第一:首先,下载源代码的压缩包.Wax放在GitHub上(https://github.com ...

Javascript实现时钟

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

随机推荐

热门专题