HTML5动态时钟

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 条评论
登录 后参与评论

相关文章

  • 代码浏览工具OpenGrok

    felix
  • Python断点调试

    felix
  • 在AndroidStudio编译过程中遇到Error:duplicate files during packaging of APK问题的解决方法

    felix
  • Canvas绘图——2d表

    初学JavaScript,用Canvas画一个表。主要用到昨天学的间歇调用(setInterval)。 方法和属性介绍 context.beginPath()、...

    刘开心_1266679
  • HTML5之Canvas

    document.createElement("canvas").getContext("2d");

    疯狂的技术宅
  • canvas 实现自定义钟表

    参考博客:https://www.cnblogs.com/liugang-vip/p/3557983.html

    acoolgiser
  • canvas荧光表源码分享

    Youngxj
  • Canvas 基本绘制(下)

    HTML5学堂:在前一篇文章《Canvas 基本绘制(上)》当中,我们为大家介绍了Canvas的基本知识——什么是Canvas、如何使用Canvas进行图像的绘...

    HTML5学堂
  • Spring bean注解配置(1)—— @Component

    Spring自带的@Component注解及扩展@Repository、@Service、@Controller,如图:

    浩Coding
  • 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(上)

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 点击原文,查看笔...

    逸鹏

扫码关注云+社区

领取腾讯云代金券