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

相关文章

来自专栏QQ音乐前端团队专栏

前端水印生成方案

安全问题不能大意,对于一些比较敏感的内容,我们可以通过组合使用上述的水印方案,这样才能最大程度给浏览者警示的作用,减少泄密的情况,即使泄密了,也有可能追踪到泄密...

1.5K3
来自专栏互联网杂技

React中的-- 数据流

简介 React的组件简单理解起来其实就是一个函数,这个函数会接收props和state作为参数,然后进行相应的逻辑处理,最终返回该组件的虚拟DOM展现。在Re...

3589
来自专栏HT

基于HTML5 Canvas 点击添加 2D 3D 机柜模型

今天又返回好好地消化了一下我们的数据容器 DataModel,这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单,实际上结合了数据模型中...

2608
来自专栏前端说吧

Vue-自定义事件之—— 子组件修改父组件的值

3625
来自专栏我有一个梦想

ClistCtrl用法及总结(由怎样隐藏ListCtrl列表头的排序小三角形这个bug学习到的知识)

1 怎样隐藏ListCtrl列表头的排序小三角形 在创建控件是加入|LVS_NOSORTHEADER风格即可。 一下是用法总结: 本文根据本人在项目中的应用,来...

3085
来自专栏向治洪

React Native之ViewPagerAndroid 组件

概述 今天我们来讲解一下关于 ViewPager 的使用,它是一个允许子视图左右滚动翻页的容器。我们知道在Android开发中系统有ViewPager这个组件,...

2108
来自专栏前端说吧

vue.js: 自定义事件之—— 子组件修改父组件的值

这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module

4714
来自专栏林德熙的博客

win10 UWP 圆形等待

使用 RectangleStyle1 在 Rectangle 使用 style="{StaticResource RectangleStyle1}"

922
来自专栏编程思想之路

Android6.0源码分析之View(一)

目前对于view还处于学习阶段,本来打算学习结束之后再写一篇进行总结,但是发现自己自制力太差,学习效率太低,所以在此,边学边写博客,不仅督促自己完成对view的...

1948
来自专栏数说工作室

【SAS Says】基础篇:ODS的使用(上)

你不可能总是在SAS上查看结果,如果结果很多你要一一的讲结果复制到word中去,有ODS就好啦!它可以把SAS的结果直接输出到word、PDF等文件中。 5.1...

6806

扫码关注云+社区

领取腾讯云代金券