效果如图：

实现代码：

<!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. 怎样查看或修改网页的标题title

    网页的标题一般指的是 <title>标签之间的文本节点值, 它会显示在浏览器的标签页上, 我们可以通过 document.title 来查看或修改它: document.title; // ...

  2. select into from与insert into select区别

    创建一个table2  向table2中插入 table1中name为11的所有行(前提table2不存在) select * into table2 from table1 where name=‘ ...

  3. OkHttp3 + retrofit2 封装

    0.下载文件 1.gradle 添加 compile 'com.squareup.retrofit2:retrofit:2.1.0'compile 'com.squareup.retrofit2:co ...

  4. spark2.0 DataSet操作的一些问题记录

    随着新版本的Spark已经逐渐稳定,最近拟将原有框架升级到spark 2.0.还是比较兴奋的,特别是SQL的速度真的快了许多.. 然而,在其中一个操作时却卡住了.主要是dataframe.map操作, ...

  5. vue项目之购物车

    简单的完成一个购物车项目,满足基本功能 安装创建好项目以后需要引入安装elementui和vuex 项目目录如下:(home.vue为主页面) ### ~home.vue <template&g ...

  6. LLVM的RTTI特性

    本文思路来源于http://llvm.org/docs/HowToSetUpLLVMStyleRTTI.html,叙述有不同,望谅解,希望能从其他方面帮助大家了解C++语言的底层实现. 背景 在LLV ...

  7. 使用jMeter构造大量并发HTTP请求进行微服务性能测试

    比如我开发好了一个微服务,想测试其在大并发请求下的性能表现如何. 比较方便的一个做法是使用工具jMeter来构造这些请求. 创建一个新的工程: 创建一个新的Thread Group,下图意思是这个工程 ...

  8. 10.SpringMVC注解式开发-处理器方法的参数

    1.逐个参数接收 只要保证请求参数名与该请求处理方法的参数名相同即可 // 请求参数名 与该处理器中的请求方法的参数名相同 ,即可接收前台传递过来的参数 public ModelAndView met ...

  9. Java基础加强-日志

    /*日志*/ 从功能上来说,日志API本身所需求的功能非常简单,只需要能够记录一段文本即可 API的使用者在需要记录时,根据当前的上下文信息构造出相应的文本信息,调用API完成记录.一般来说,日志AP ...

  10. 系统模块 sys 函数的调用

    系统模块 sys 运行时系统相关的信息 sys模块的数据 数据 描述 sys.path 模块搜索路径 path[0] 是当前脚本程序的路径名,否则为 '' sys.modules 已加载模块的字典 s ...