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 相关文章推荐
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
vue实现在线翻译功能
Sep 27 Javascript
js+html实现点名系统功能
Nov 05 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
小程序中手机号识别的示例
Dec 14 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/09/08 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php静态文件生成类实例分析
2015/01/03 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
Python  Django 母版和继承解析
2019/08/09 Python
python获取引用对象的个数方式
2019/12/20 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python列表如何更新值
2020/05/27 Python
python集合的新增元素方法整理
2020/12/07 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
行政复议决定书
2015/06/24 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python