html5 canvas js(数字时钟)实例代码


Posted in Javascript onDecember 23, 2013

html5 canvas js(数字时钟)实例代码

<!doctype html>
<html>
    <head>
        <title>canvas dClock</title>
    </head>
    <body>
        <canvas id = "clock" width = "500px" height = "200px">
            您的浏览器太古董了,升级吧!
        </canvas>
        <script type = "text/javascript">
            var clock = document.getElementById("clock");
            var cxt = clock.getContext("2d");
            //显示数字时钟
            function showTime(m, n) {
                cxt.clearRect(0, 0, 500, 500);
                var now = new Date;
                var hour = now.getHours();
                var min = now.getMinutes();
                var sec = now.getSeconds();
                var msec = now.getMilliseconds();
                hour = hour >= 10 ? hour : "0" + hour;
                min = min >= 10 ? min : "0" + min;
                sec = sec >= 10 ? sec : "0" + sec;
                msec = (msec >= 10 && msec < 100) ? ("0" + msec) : (msec >= 0 && msec < 10) ? ("00" + msec) : msec;
                bdigital(m, n, hour);
                bdigital(m + 160, n, min);
                bdigital(m + 320, n, sec);
                //tdigital(m + 480, n, msec);
                //三位数的显示
                function tdigital(x, y, num) {
                    var ge = num % 10;
                    var shi = (parseInt(num / 10)) % 10;
                    var bai = parseInt((parseInt(num / 10)) / 10) % 10;
                    digital(x, y, bai);
                    digital(x + 70, y, shi);
                    digital(x + 140, y, ge);
                }
                //两位数的显示
                function bdigital(x, y, num) {
                    var ge = num % 10;
                    var shi = (parseInt(num / 10)) % 10;
                    digital(x, y, shi);
                    digital(x + 70, y, ge);
                }
                //画:
                //小时与分钟之间
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m + 140, n + 80, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m + 140, n + 100, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();
                //分钟与秒之间
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m + 300, n + 80, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m + 300, n + 100, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();
                //秒与毫秒之间一个.
//                cxt.lineWidth = 5;
//                cxt.strokeStyle = "#000";
//                cxt.fillStyle = "#000";
//                cxt.beginPath();
//                cxt.arc(m + 460, n + 100, 3, 0, 360, false);
//                cxt.fill();
//                cxt.closePath();
//                cxt.stroke();
            }
            //显示一位数字
            function digital(x, y, num) {
                //设置风格
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                //a
                function a() {
                    cxt.beginPath();
                    cxt.moveTo(x, y);
                    cxt.lineTo(x + 50, y);
                    cxt.closePath();
                    cxt.stroke();
                }
                //b
                function b() {
                    cxt.beginPath();
                    cxt.moveTo(x + 55, y + 5);
                    cxt.lineTo(x + 55, y + 55);
                    cxt.closePath();
                    cxt.stroke();
                }
                //c
                function c() {
                    cxt.beginPath();
                    cxt.moveTo(x + 55, y + 60);
                    cxt.lineTo(x + 55, y + 110);
                    cxt.closePath();
                    cxt.stroke();
                }
                //d
                function d() {
                    cxt.beginPath();
                    cxt.moveTo(x + 50, y + 115);
                    cxt.lineTo(x, y + 115);
                    cxt.closePath();
                    cxt.stroke();
                }
                //e
                function e() {
                    cxt.beginPath();
                    cxt.moveTo(x - 5, y + 110);
                    cxt.lineTo(x - 5, y + 60);
                    cxt.closePath();
                    cxt.stroke();
                }
                //f
                function f() {
                    cxt.beginPath();
                    cxt.moveTo(x - 5, y + 55);
                    cxt.lineTo(x - 5, y + 5);
                    cxt.closePath();
                    cxt.stroke();
                }
                //g
                function g() {
                    cxt.beginPath();
                    cxt.moveTo(x, y + 57.5);
                    cxt.lineTo(x + 50, y + 57.5);
                    cxt.closePath();
                    cxt.stroke();
                }
                //0
                function zero() {
                    a(); b(); c(); d(); e(); f();
                }
                //1
                function one() {
                    b(); c();
                }
                //2
                function two() {
                    a(); b(); d(); e(); g();
                }
                //3
                function three() {
                    a(); b(); c(); d(); g();
                }
                //4
                function four() {
                    b(); c(); f(); g();
                }
                //5
                function five() {
                    a(); c(); d(); f(); g();
                }
                //6
                function six() {
                    a(); c(); d(); e(); f(); g();
                }
                //7
                function seven() {
                    a(); b(); c();
                }
                //8
                function eight() {
                    a(); b(); c(); d(); e(); f(); g();
                }
                //9
                function nine() {
                    a(); b(); c(); d(); f(); g();
                }
                //数字n
                function number(n) {
                    switch (n) {
                        case 0: zero(); break;
                        case 1: one(); break;
                        case 2: two(); break;
                        case 3: three(); break;
                        case 4: four(); break;
                        case 5: five(); break;
                        case 6: six(); break;
                        case 7: seven(); break;
                        case 8: eight(); break;
                        case 9: nine(); break;
                    }
                }
                number(num);
            }
            showTime(1, 45);
            setInterval("showTime(1,45)", 1000);
        </script>
    </body>
</html>
Javascript 相关文章推荐
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
浮动的div自适应居中显示的js代码
Dec 23 #Javascript
javascript实现简单的Map示例介绍
Dec 23 #Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 #Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 #Javascript
js写的评论分页(还不错)
Dec 23 #Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 #Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 #Javascript
You might like
php 中文处理函数集合
2008/08/27 PHP
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
解析php常用image图像函数集
2013/06/24 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
Node.js文件操作详解
2014/08/16 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
Python注释详解
2016/06/01 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
在python中用url_for构造URL的方法
2019/07/25 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
全国文明单位申报材料
2014/05/31 职场文书
机械操作工岗位职责
2014/08/08 职场文书
委托培训协议书
2014/11/17 职场文书
七一建党节慰问信
2015/02/14 职场文书
青年教师听课心得体会
2016/01/15 职场文书
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android