H5时钟的完整版（粘贴复制直接看效果）

最新推荐文章于 2022-05-30 20:36:52 发布

娶个村姑当大妾

最新推荐文章于 2022-05-30 20:36:52 发布

阅读量5.2k

点赞数 2

分类专栏： HTML 5 文章标签： H5时钟

本文链接：https://blog.csdn.net/bug_money/article/details/53133283

版权

本文提供了一个完整的H5时钟源码，可直接粘贴复制查看效果。在线预览链接：http://www.qdfuns.com/notes/17515/814cb59089006e7612d2cd2c7d50d700.html

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

**在线可参考：H5时钟源码
http://www.qdfuns.com/notes/17515/814cb59089006e7612d2cd2c7d50d700.html**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
</head>
<body>
    <header>
        <h1>时钟</h1>
    </header>
    <artical>
        <section>
            <figure>
                <canvas id="one" width="800" height="800"></canvas>
            </figure>
        </section>
    </artical>
    <script>
        var one=document.getElementById("one");
        var context=one.getContext("2d");
        function clock() {
            var sec=new Date().getSeconds();
            var min=new Date().getMinutes();
            var hour=new Date().getHours();
            //设置表盘
            //圆形渐变色参数分别为两个圆心和半径
            var g1 = context.createRadialGradient(400, 400, 0, 400, 400, 200);
            //设置两个渐变色的参数
            g1.addColorStop(0, "#fcfcfc");
            g1.addColorStop(1, "#defdff");
            //设置线宽
            context.lineWidth = 2;
            context