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强大的日期函数代码分享
Sep 04 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
浅析Ajax语法
Dec 05 Javascript
json数据处理及数据绑定
Jan 25 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
js数组常用最重要的方法
Feb 04 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
利用PHP动态生成VRML网页
2006/10/09 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
python self,cls,decorator的理解
2009/07/13 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python可视化实现代码
2019/01/15 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
python中time包实例详解
2021/02/02 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
入党自我鉴定
2014/03/25 职场文书
副董事长岗位职责
2014/04/02 职场文书
心理咨询承诺书
2014/05/20 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
2014年宣传工作总结
2014/11/18 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
英雄儿女观后感
2015/06/09 职场文书
工作时间证明
2015/06/15 职场文书
诉讼和解协议书
2016/03/23 职场文书