效果如图：

实现代码：

<!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. Spring 自定义Bean 实例获取

    一.通过指定配置文件获取, 对于Web程序而言,我们启动spring容器是通过在web.xml文件中配置,这样相当于加载了两次spring容器 ApplicationContext ac = new ...

  2. Spark读取HDFS文件，任务本地化(NODE_LOCAL)

    Spark也有数据本地化的概念(Data Locality),这和MapReduce的Local Task差不多,如果读取HDFS文件,Spark则会根据数据的存储位置,分配离数据存储最近的Execu ...

  3. JS 实现继承的方法 ES6 and ES5

    继承 ES6 方法  (类的继承) ES6中有一个属性的 extends 语法: ​ • class Father {} ​ • class Son extends Father{} ​ 注意:是子类 ...

  4. react hooks学习

    接触React项目快两个月了,还在研究摸索各种知识点的过程中,充实且幸福. 在项目中学习新知识,还是很有效率的,一边写项目,一边实验新的知识点,比如react hooks!嘻嘻嘻~~~ 写了好一段时间 ...

  5. wpf win10 popup位置偏移问题

    同样问题参照: https://stackoverflow.com/questions/18113597/wpf-handedness-with-popups 解决方案: private static ...

  6. json树迭代

    getArray(data){ for (var i in data) { if(data[i].disabled){ data[i].disabled = false } if(data[i].ch ...

  7. Spring Cloud（O）服务的注册与发现（Eureka）

    一.微服务架构 1.1什么是分布式 不同模块部署在不同服务器上 作用:分布式解决网站高并发带来问题 1.2什么是集群 多台服务器部署相同应用构成一个集群 作用:通过负载均衡设备共同对外提供服务 1.3 ...

  8. linux在菜单中添加SEG选项

  9. 9. A Pythonic Object

    Thanks to the Python data model, your user-defined types can behave as naturally as the built-in typ ...

  10. Map的使用及遍历方式

    Java中Map遍历的四种方式 如果同时需要key和value推荐使用entrySet(第一种): 如果只是获取key,或者value,推荐使用keySet或者values方式(第二种): 如果需要在 ...