HTML5动态时钟

最新推荐文章于 2024-09-29 17:35:26 发布

Felixabcd

最新推荐文章于 2024-09-29 17:35:26 发布

阅读量1.7k ui html5 javascript 文章标签： html5 ui

本文链接：https://blog.csdn.net/u012455213/article/details/45154541

ui 同时被 3 个专栏收录

6 篇文章 0 订阅

html5

1 篇文章 0 订阅

javascript

1 篇文章 0 订阅

HTML5动态时钟

效果图

这里无法实时显示当前时间，可以看我这篇博客。

原理

先打上html5中的canvas标签，它定义了一块画布，可以用javascript在上前面做动态效果。
调用浏览器内置对象window的setInterval（animate，delay）方法，可以实现每隔delay时间调用一次自定义的animate方法，从而达到动态的效果。

代码实现

```javascript
<body>
<canvas id="mycanvas" width="500" height="500" style="background: #B0D141"></canvas>
<script>
        var mycanvas = document.getElementById("mycanvas");
        var context = mycanvas.getContext("2d");

        function drawClock() {
            //每次调用函数都要对指定区域清屏
            context.clearRect(0, 0, 500, 500);
            var date = new Date();
            var hour = date.getHours();
            var min = date.getMinutes();
            var sec = date.getSeconds();
            hour = (hour >= 12) ? hour - 12 : hour;
            hour = hour + min / 60;
            min = min + sec / 60;

            //画圆
            context.lineWidth=10;
            context.strokeStyle='#000';
            context.beginPath();
            context.arc(250, 250, 200, 0, 360, false);
            context.closePath();
            context.stroke();



            //画时刻度

            for (var i = 0; i < 12; i++) {
                context.save();
                context.strokeStyle='black';
                context.beginPath();
                context.translate(250, 250);
                context.rotate(i * 30 * Math.PI / 180);
                context.beginPath();
                context.moveTo(0, -190);
                context.lineTo(0, -170);
                context.closePath();
                context.stroke();
                context.restore();
            }


            //画分刻度
            context.beginPath();
            for (var i = 0; i < 60; i++) {
                context.save();
                context.strokeStyle='black';
                context.beginPath();
                context.translate(250, 250);
                context.rotate(i * 6 * Math.PI / 180);
                context.moveTo(0, -190);
                context.lineTo(0, -180);
                context.closePath();
                context.stroke();
                context.restore();
            }


            //画时针
            context.save();
            context.lineWidth=12;
            context.beginPath();
            context.translate(250, 250);
            context.rotate(hour * Math.PI * 30 / 180);
            context.moveTo(0, -135);
            context.lineTo(0, 10);
            context.closePath();
            context.stroke();
            context.restore();

            //画分针
            context.save();
            context.lineWidth=8;
            context.beginPath();
            context.translate(250, 250);
            context.rotate(min * Math.PI * 6 / 180);
            context.moveTo(0, -160);
            context.lineTo(0, 10);
            context.closePath();
            context.stroke();
            context.restore();

            //画秒针
            context.save();
            context.lineWidth=5;
            context.strokeStyle='red';
            context.beginPath();
            context.translate(250, 250);
            context.rotate(sec * Math.PI * 6 / 180);
            context.moveTo(0, -182);
            context.lineTo(0, 16);
            context.closePath();
            context.stroke();
            context.restore();
        }
        setInterval(drawClock, 1000);
    </script>
    <body/>

“`