JS + HTml 时钟代码实现

最新推荐文章于 2023-04-07 11:00:00 发布

weixin_30247781

最新推荐文章于 2023-04-07 11:00:00 发布

阅读量167

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zwcai/p/6497053.html

版权

JS+ Html 画布实现的时钟
效果图：

闲来无聊做了一个网页的时钟，效果模拟传统时钟的运行方式，

运用了html 的画布实现指针，背景图片引用了网络图片。

具体原理：

首先将时钟分为四个不同区域，对每个区域计算cos，sin 来确实指针顶点位置。在通过画布来绘画出指针。
通过setInterval 每秒刷新指针位置实现传统机械表针的动态跳动。

本人是JS开发程序员，从业1年多。闲来无聊的简单页面，

欢迎大家提问，或者建议。共同进步

代码部分，直接复制HTML 文件中即可查看效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>clock</title>
</head>
<body style="color:green; <!--background-image:url('http://image.lxway.com/upload/b/f0/bf0d97dcee487096548e6edbc89d4963_thumb.png');--> background-size:100%; background-repeat: no-repeat; background-attachment:fixed">
    <div style="width: 900px; height: 900px; margin-top: 50px; margin-left: 50px;">
        <div style="position: absolute; left:119px;top: 193px; width: 900px; height: 900px; background-image:url('http://image.lxway.com/upload/b/f0/bf0d97dcee487096548e6edbc89d4963_thumb.png');  background-repeat: no-repeat; z-index: -1;">
        </div>
        <canvas id="t" width="800" height="800"></canvas>
        <div style="position: absolute; left:118px;top: 464px; width: 100px; height: 200px; background-color: white;  background-repeat: no-repeat; z-index: 10;">
        </div>
    </div>
    <script language="javascript">
                var s = setInterval(moveI, 1000);
                function moveI() {
                    var c = document.getElementById("t");
                    var pc = c.getContext("2d");
                    c.height = c.height;
                    //秒
                    pc.lineWidth = 3;
                    pc.strokeStyle = 'rgba(255,0,0,0.8)';
                    var now = new Date();
                    var sindex = getxy(150, now.getSeconds());
                    pc.moveTo(400, 400);
                    pc.lineTo(sindex.x, sindex.y);
                    pc.stroke();
                    pc.beginPath();
                    //分
                    pc.lineWidth = 7;
                    pc.strokeStyle = 'rgba(50,50,50,0.8)';
                    var mindex = getxy(120, now.getMinutes() + (now.getSeconds() / 60));
                    pc.moveTo(400, 400);
                    pc.lineTo(mindex.x, mindex.y);
                    pc.stroke();
                    pc.beginPath();
                    //时
                    pc.lineWidth = 10;
                    pc.strokeStyle = 'rgba(0,0,0,0.8)';
                    var hindex = getxy(80, ((now.getHours() > 12 ? now.getHours() - 12 : now.getHours()) + (now.getMinutes() / 60)) * 5);
                    pc.moveTo(400, 400);
                    pc.lineTo(hindex.x, hindex.y);
                    pc.stroke();
                };

                function getxy(r, t) {
                    //计算分区  0,1,2,3
                    var a = parseInt(t / 15);
                    //分区角度
                    t = t - 15 * a;
                    var y;
                    var x;
                    //基于分区的坐标计算
                    switch (a) {
                        case 0:
                            y = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
                            x = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
                            break;
                        case 1:
                            y = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
                            x = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
                            break;
                        case 2:
                            y = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
                            x = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
                            break;
                        case 3:
                            y = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
                            x = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
                            break;
                        default:
                            break;
                    }
                    y = (400 - r) + y;
                    x = (400 - r) + x;
                    return {
                        'x': x,
                        'y': y
                    };
                };
    </script>
</body>

</html>

假如生活欺骗了你，找50个程序员问问为什么编程；

假如生活让你想死，找50个程序员问问BUG改完了没有；

假如你觉得生活拮据，找50个程序员问问工资涨了没有；

假如你觉得活着无聊，找50个程序员问问他们一天都干了什么！

转载于:https://www.cnblogs.com/zwcai/p/6497053.html

weixin_30247781

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS + HTml 时钟代码实现

JS+ Html 画布实现的时钟效果图：闲来无聊做了一个网页的时钟，效果模拟传统时钟的运行方式，运用了html 的画布实现指针，背景图片引用了网络图片。具体原理：首先将时钟分为四个不同区域，对每个区域计算cos，sin 来确实指针顶点位置。在通过画布来绘画出指针。通过setInterval 每秒刷新指针位置实现传统机械表针的动态跳动。本人是JS开发程序员，从业1年多。...
复制链接

扫一扫