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 相关文章推荐
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 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文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python删除某个字符
2018/03/19 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python反扒机制的5种解决方法
2021/02/06 Python
大学生职业规划书的范本
2014/02/18 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
生产现场禁烟通知
2015/04/23 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
初中生物教学反思
2016/02/20 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python