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 相关文章推荐
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
vue-router的两种模式的区别
May 30 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
基于angular实现树形二级表格
Oct 16 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 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python执行外部程序的常用方法小结
2015/03/21 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
python生成excel的实例代码
2017/11/08 Python
Python单元测试实例详解
2018/05/25 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
django框架两个使用模板实例
2019/12/11 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
8种常用的Python工具
2020/08/05 Python
python re模块常见用法例举
2021/03/01 Python
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
周年庆促销方案
2014/03/15 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
2016中秋节广告语
2016/01/28 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
js作用域及作用域链工作引擎
2022/07/07 Javascript