用js实现网页时钟

最新推荐文章于 2024-06-26 19:39:06 发布

ChengZiYa_

最新推荐文章于 2024-06-26 19:39:06 发布

阅读量465

点赞数

文章标签： js

本文链接：https://blog.csdn.net/ChengZiYa_/article/details/102699185

版权

本文介绍如何利用JavaScript实现一个网页时钟。通过获取当前时间的秒、分、小时信息，并结合表盘图片，绘制出60条刻度线，最终实现一个动态更新的时间显示效果。

摘要由CSDN通过智能技术生成

网页时钟

这就是完工后的效果
在这里插入图片描述
首先我们在百度上找一个表盘的图片然后再依次获取当前时间，获取秒，获取分，获取小时。
然后画60个刻度线

<body>
<canvas id = "hello" width = "400" height = "400"
        style = "border:1px solid black"> </canvas>
<script languagetype = "text/javascript">
    var myCavas = document.getElementById('hello');
    var c = myCavas.getContext('2d');
    function clock() {
        c.clearRect(0, 0, 400, 400);
        //获取当前时间
        var data = new Date();
        //获取秒
        var sec = data.getSeconds();
        //获取分钟
        var min = data.getMinutes();
        //获取小时
        var hour = data.getHours();
        c.save();
        c.translate(200, 200);
        c.rotate(-Math.PI/2);
        //分针刻度线
        for (var i