js实现一个时钟

最新推荐文章于 2024-01-31 16:02:42 发布

逸曦穆泽

最新推荐文章于 2024-01-31 16:02:42 发布

阅读量269

点赞数

分类专栏： web前端文章标签： javascript 时钟

本文链接：https://blog.csdn.net/qq_41408081/article/details/121210637

版权

web前端专栏收录该内容

65 篇文章 2 订阅

订阅专栏

这篇博客展示了一个使用HTML5 Canvas和JavaScript编写的时钟代码。通过CSS实现暗黑和亮色两种主题切换，JavaScript实时更新时钟指针角度，Canvas绘制刻度和时间文字，提供了详细的代码示例。

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

这个时钟的代码已经存放到 CodePen，由于嵌套不了 iframe ，所以不能实时观看，只能放一个链接了：时钟

一个时钟的代码，另外一个全部是canvas渲染的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <style>
        * {box-sizing: border-box;}
        :root {--main-bg-color: #fff;--main-text-color: #888888;}
        [data-theme="dark"] {--main-bg-color: #1e1f26;--main-text-color: #ccc;}
        body {width: 100vw;height: 100vh;margin: 0;justify-content: center;align-items: flex-start;transition: all ease 0.2s;}
        .item{display: inline-block;position: relative;}
        .clock-theme{background-color: var(--main-bg-color);margin: 20px;}
        .clock {width: 300px;height: 300px;display: flex;justify-content: center;align-items: center;background-color: var(--main-bg-color);border-radius: 50%;border: 4px solid var(--main-bg-color);box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05), inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3), inset 0 15px 15px rgba(0, 0, 0, 0.3);transition: all ease 0.2s;}
        .clock:before {content: "";height: 0.75rem;width: 0.75rem;background-color: var(--main-text-color);border: 2px solid var(--main-bg-color);position: absolute;border-radius: 50%;z-index: 1000;transition: all ease 0.2s;}
        .pointer{position: absolute;display: flex;justify-content: center;border-radius: 50%;}
        .pointer:before{content: "";height: 50%;}
        .hour {height: 10em;width: 10em;}
        .hour:before {width: 6px;background-color: var(--main-text-color);border-radius: 6px;}
        .min {height: 200px;width: 200px;}
        .min:before {width: 4px;background-color: var(--main-text-color);border-radius: 4px;}
        .sec {height: 230px;width: 230px;}
        .sec:before {width: 2px;background-color: #f00;border-radius: 2px;}
        /* 主题样式按钮 */
        .switch-box{text-align: center;margin-top:30px;}
        .switch-box .switch-btn{font-family: monospace;text-transform:uppercase;outline:none;font-size: 18px;padding:8px 16px; cursor: pointer;transition: all ease 0.3s;background-color: var(--main-bg-color);color: var(--main-text-color);border: 1px solid var(--main-text-color);border-radius:6px;}
    </style>
</head>
<body>
<div class="item ">
    <div class="clock clock-theme">
        <div class="pointer hour"></div>
        <div class="pointer min"></div>
        <div class="pointer sec"></div>
        <canvas id="clock-bg" width="300" height="300"></canvas>
    </div>
    <div class="switch-box">
        <button class="switch-btn"> Light </button>
    </div>
</div>
<script>

    // 1、有主题按钮
    const deg = 6;
    const hour = document.querySelector(".hour");
    const min = document.querySelector(".min");
    const sec = document.querySelector(".sec");
    const setClock = () => {
        var now = new Date(),
            hh = now.getHours() * 30,
            mm = now.getMinutes() * deg,
            ss = now.getSeconds() * deg;
        hour.style.transform = `rotateZ(${hh + mm / 12}deg)`;
        min.style.transform = `rotateZ(${mm}deg)`;
        sec.style.transform = `rotateZ(${ss}deg)`;
    };
    // 初始化
    setClock();
    // 每 500 ms 更新
    setInterval(setClock, 500);
    var ctxBg = document.getElementById('clock-bg').getContext('2d');
    //ctxBg.clearRect(0, 0, 300, 300); //给定的矩形内清除指定的像素
    ctxBg.translate(150, 150);//重新映射画布上的位置
    ctxBg.rotate(-Math.PI/2); //将坐标轴逆时针旋转90度，x轴正方向对准12点方向
    //小时刻度
    ctxBg.save();
    ctxBg.beginPath();
    for (var i = 0; i < 12; i++) {
        ctxBg.strokeStyle = '#536b7a';
        ctxBg.lineWidth = 3;
        ctxBg.rotate(Math.PI / 6);
        ctxBg.moveTo(140, 0);
        ctxBg.lineTo(120, 0);
        ctxBg.stroke();
    }
    //分钟刻度
    for (i = 0; i < 60; i++) {
        if (i % 5 !== 0) {
            ctxBg.strokeStyle = '#536b7a';
            ctxBg.lineWidth = 2;
            ctxBg.moveTo(140, 0);
            ctxBg.lineTo(130, 0);
            ctxBg.stroke();
        }
        ctxBg.rotate(Math.PI / 30);
    }

    //时间文字
    ctxBg.rotate(Math.PI/2);
    ctxBg.fillStyle = '#58717e';
    ctxBg.font = '32px Microsoft yahei';
    ctxBg.textAlign = 'center';
    ctxBg.textBaseline = 'middle';
    ctxBg.fillText('3', 100, 0);
    ctxBg.fillText('6', 0, 100);
    ctxBg.fillText('9', -100, 0);
    ctxBg.fillText('12', 0, -100);
    ctxBg.restore();

    //主题切换
    const switchTheme = (evt) => {
        const switchBtn = evt.target;
        if (switchBtn.textContent.toLowerCase() === "light") {
            switchBtn.textContent = "dark";
            // localStorage.setItem("theme", "dark");//主题保存
            document.documentElement.setAttribute("data-theme", "dark");
        } else {
            switchBtn.textContent = "light";
            // localStorage.setItem("theme", "light"); //主题保存
            document.documentElement.setAttribute("data-theme", "light");
        }
    };
    const switchModeBtn = document.querySelector(".switch-btn");
    switchModeBtn.addEventListener("click", switchTheme, false);
    let currentTheme = "dark";
    // currentTheme = localStorage.getItem("theme")
    // 	? localStorage.getItem("theme")
    // 	: null;
    if (currentTheme) {
        document.documentElement.setAttribute("data-theme", currentTheme);
        switchModeBtn.textContent = currentTheme;
    }
</script>
</body>
</html>