DDR爱好者之家

html5 canvas js(数字时钟)实例代码
站长资源 2025/1/21 佚名
59 1538
DDR爱好者之家 Design By 杰米

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>

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米