效果如图：

实现代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Clock</title>

    <style>

        body {

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            width: 100vw;

            height: 100vh;

            background: #2e1f27;

        }

        p{

            color: #854d27;

        }

        code{

            color: #f4c950;

        }

        .clock {

            --clock-width: 50vmin;

            width: var(--clock-width);

            height: var(--clock-width);

            position: relative;

            overflow: hidden;

            border: 6px solid #f4c950;

            border-radius: 50%;

        }

        .clock:after {

            content: '';

            position: absolute;

            z-index: 10;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            width: 6px;

            height: 6px;

            background: #d0b8ac;

            border-radius: 50%;

        }

        .scaleContainer {

            --scale-width: 2px;

            margin: 0;

            padding: 0;

            width: var(--scale-width);

            height: calc(var(--clock-width) / 2 + 4px);

            position: absolute;

            bottom: calc(var(--clock-width) / 2);

            left: calc((var(--clock-width) - var(--scale-width)) / 2);

            /*background: #f4c950;*/

            transform-origin: center bottom;

        }

        .scaleContainer:nth-of-type(5n + 5) {

            --scale-width: 5px;

            width: var(--scale-width);

            left: calc((var(--clock-width) - var(--scale-width)) / 2);

        }

        .scale{

            height: calc(var(--clock-width) / 22);

            background: #f4c950;

        }

        .scaleContainer:nth-of-type(5n + 5) .scale{

            height: calc(var(--clock-width) / 16);

        }

        .hand {

            --hand-width: 4px;

            --hand-length: calc(var(--clock-width) / 2 - 6px);

            width: var(--hand-width);

            height: var(--hand-length);

            background: #d0b8ac;

            position: absolute;

            bottom: calc(var(--clock-width) / 2);

            left: calc((var(--clock-width) - var(--hand-width)) / 2);

            transform-origin: center bottom;

            z-index: 20;

        }

        .hour-hand{

            height: 15vmin;

        }

        .minute-hand {

            --hand-height: 20vmin;

            height: var(--hand-height);

        }

        .second-hand {

            --hand-width: 2px;

            width: var(--hand-width);

            left: calc((var(--clock-width) - var(--hand-width)) / 2);

        }

    </style>

</head>

<body>

<div class="clock">

    <div class="hand hour-hand"></div>

    <div class="hand minute-hand"></div>

    <div class="hand second-hand"></div>

</div>

<p>Responsive dimension via CSS <code>cal</code> and <code>var</code>.</p>

<script>

    const $clock = document.querySelector('.clock');

    for (let i = 1; i <= 60; i++) {

        const $scaleContainer = document.createElement('p');

        $scaleContainer.classList.add('scaleContainer');

        $scaleContainer.style.transform = `rotate(${6 * i}deg)`;

        const $scale = document.createElement('div');

        $scale.classList.add('scale');

        // $scale.textContent = `${i}`;

        $scaleContainer.appendChild($scale);

        $clock.appendChild($scaleContainer);

    }

    const $hourHand = document.querySelector('.hour-hand');

    const $minuteHand = document.querySelector('.minute-hand');

    const $secondHand = document.querySelector('.second-hand');

    function tick() {

        const date = new Date();

        const CS = date.getSeconds();

        const Sdeg = CS / 60 * 360;

        const CM = date.getMinutes();

        const Mdeg = CM / 60 * 360 + 360 / 60 / 60 * CS;

        const Hdeg = date.getHours() / 12 * 360 + 360 / 12 / 60 * CM + 360 / 12 / 60 / 60 * CS;

        $hourHand.style.transform = `rotate(${Hdeg}deg)`;

        $minuteHand.style.transform = `rotate(${Mdeg}deg)`;

        $secondHand.style.transform = `rotate(${Sdeg}deg)`;

    }

    tick();

    setInterval(tick, 1000);

</script>

</body>

</html>

html,css,js实现的一个钟表的更多相关文章

  1. 用css3+js写了一个钟表

    有一天看到css3旋转这个属性,突发奇想的写了一个钟表(没做浏览器兼容),来一起看看是怎么写的吧! 先给个成品图,最终结果是个样子的(动态的). 首先,思考了一下页面的布局,大致需要4层div,最底层 ...

  2. 【html css js】实现一个简易日历

    ——[效果预览] 实现了日历最基础的功能,当前日期红色显示,可通过上方的左右按钮查看上一月或下一月的日期. ——[代码部分] 1. HTML <body> <div class=&q ...

  3. 利用前端三大件（html+css+js）开发一个简单的“todolist”项目

    一.介绍 todolist,即待办事项.在windows android ios上参考微软家出的那个To-Do应用,大概就是那样的.我这个更简单,功能只有“待办” “已完成”两项,并且是在浏览器打开的 ...

  4. 一个小公司的前端笔试HTML CSS JS

    网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...

  5. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  6. 无聊的人用JS实现了一个简单的打地鼠游戏

    直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...

  7. Css Js Loader For Zencart

    Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...

  8. 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

  9. 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面

    上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...

随机推荐

  1. Python中的math常用方法总结（转）http://www.cnblogs.com/renpingsheng/p/7171950.html

    python中math模块常用的方法整理   ceil:取大于等于x的最小的整数值,如果x是一个整数,则返回x copysign:把y的正负号加到x前面,可以使用0 cos:求x的余弦,x必须是弧度 ...

  2. springboot+mybatis调用oracle存储过程

    1 存储过程参数为VARCHAR 代码逻辑:controller层定义实体类对象entity,并entity.set给存储过程的输入参数赋值,把赋值后的实体类通过service层传到dao层,然后通过 ...

  3. .NET Core 创建Windows服务

    .NET Core 创建Windows服务 作者:高堂 原文地址:https://www.cnblogs.com/gaotang/p/10850564.html 写在前面 使用 TopShelf+Au ...

  4. javaIO——CharArrayReader & CharArrayWriter

    上一篇学习了StringReader和StringWriter,CharArrayReader和CharArrayWriter的实现跟他们很像,拥有的方法也基本一样.区别只是,后者两个的数据操作目标是 ...

  5. Tomat服务器学习

    Tomat服务器学习 使用的是Redhat版本的Tomcat 目录结构 bin:可执行文件 conf:配置文件 lib:tomcat运行时依赖的jar包 logs:日志文件 temp:临时文件 web ...

  6. 关于SpringMVC映射模型视图的几点小事

    一.SpringMVC概述 SpringMVC为展现层提供的基于MVC设计理念的优秀的Web框架,是目前最主流的MVC框架之一. SpringMVC通过一套MVC注解,让POJO成为处理请求的控制器, ...

  7. django 文件上传样例以及遇到的一些问题

    使用django上传文件 主流有两种方法 from表单以及ajax,为了自由度高一点,选择了ajax来实现文件的上传 前端部分代码如下: 主要关注 一 有一个文件上传(type='file')的按钮, ...

  8. explicit和implicit

    explicit是C++中的一个关键字,只用于修饰只有一个参数的构造函数: class A{ explicit A(const T obj); }; 该关键字告诉编译器该类只能显式的转换,不能隐式(i ...

  9. zip命令分卷压缩和解压缩

    创建分卷压缩文件 zip -s 100m -r folder.zip folder/ -s: 创建分卷的大小 -r: 循环压缩文件夹下面的内容 切分已有的文件: zip existing.zip -- ...

  10. 实时跟踪之TRACA

    背景: 目前,在实时跟踪领域存在着越来越多的先进方法,同时也极大地促进了该领域的发展.主要有两种不同的基于深度学习的跟踪方法:1.由在线跟踪器组成,这些跟踪器依赖网络连续的微调来学习目标的变化外观,精 ...