HTML5动态时钟

来源：互联网发布：阿尔法狗算法编辑：程序博客网时间：2024/06/06 05:09

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/>

“`

后记

没想到markdown还能支持javascript。这样以后可以通过类似的方法在blog中用js做动态效果了。

0 0