<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            padding: ;

            margin: ;

            box-sizing: border-box

        }

        ul,

        li {

            list-style: none;

        }

        .clock-box {

            position: absolute;

            width: 200px;

            height: 200px;

            top: %;

            left: %;

            margin-top: -100px;

            margin-left: -100px;

        }

        .clock-box:after {

            content: '';

            width: 10px;

            height: 10px;

            position: absolute;

            top: %;

            left: %;

            margin-top: -5px;

            margin-left: -5px;

            background: rebeccapurple;

            border-radius: 5px;

        }

        .clock-box .tick-box {

            position: relative;

            width: %;

            height: %;

            border: 2px solid black;

            border-radius: %;

        }

        .clock-box .tick-box li {

            position: absolute;

            height: 2px;

            width: 5px;

            top: 97px;

            left: -2px;

            background-color: #;

            transform-origin: 100px center;

        }

        .clock-box .tick-box li:nth-child(5n+) {

            width: 10px;

        }

        .item {

            position: absolute;

            background-color: red;

            transform-origin: center bottom;

        }

        .seconds-hand  {

            height: 89px;

            width: 1px;

            top: 11px;

            left: 99px;

            transform: rotate(0deg)

        }

        .minutes-hand {

            height: 76px;

            width: 2px;

            top: 24px;

            left: 98px;

            transform: rotate(60deg);

            background: green;

        }

        .hours-hand {

            height: 60px;

            width: 4px;

            border-top-left-radius: 3px;

            border-top-right-radius: 3px;

            top: 40px;

            left: 96px;

            transform: rotate(72deg);

            background: blue

        }

    </style>

</head>

<body>

    <div class="clock-box">

        <ul class="tick-box">

        </ul>

        <div class="hours-hand item"></div>

        <div class="minutes-hand item"></div>

        <div class="seconds-hand item"></div>

    </div>

</body>

<script>

    const frag = document.createDocumentFragment();

    const tickBox = document.querySelector('.tick-box')

    const hour = document.querySelector('.hours-hand')

    const minute = document.querySelector('.minutes-hand')

    const second = document.querySelector('.seconds-hand')

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

        let li = document.createElement('li');

        li.style.transform = `rotate(${i *  / }deg)`;

        frag.appendChild(li)

    }

    tickBox.appendChild(frag)

    function time() {

       const now = new Date();

       const h = now.getHours();

       const m = now.getMinutes();

       const s = now.getSeconds();

       hour.style.transform = `rotate(${(h+m/)*}deg)`

       minute.style.transform = `rotate(${(m+s/)*}deg)`

       second.style.transform = `rotate(${s*}deg)`

    }

    time()

    setInterval(time, )

</script>

</html>

效果如下：

原生 js 时钟实现的更多相关文章

  1. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  2. css3和原生js时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 圆盘时钟效果 原生JS

    圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...

  4. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  5. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  6. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  7. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  8. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  9. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

随机推荐

  1. mongodb权限

    1.在无密码模式下添加账号 db.createUser( { user: "user", pwd: "pwd", roles: [ { role: " ...

  2. VS2010中如何实现自定义MFC控件

    本文简要讲解在VS2010中怎样实现自定义MFC控件的知识,以下是分步骤说明. 一.自定义一个空白控件  1.先创建一个MFC工程 NEW Project-->MFC-->MFC Appl ...

  3. cmd中mysql中文乱码问题

    以下为自己亲试: 解决cmd中MySQL查询和命令返回的中文乱码问题 1.修改cmd字符集方法 rem 切换到UTF-8 chcp 65001 rem 切换到默认的GBK chcp 936 rem 美 ...

  4. mysql错误日志与通用日志

    错误日志 MySQL错误日志是记录MySQL 运行过程中较为严重的警告和错误信息,以及MySQL每次启动和关闭的详细信息. 1.错误日志路径查询 show variables like '%log_e ...

  5. linux常用命令：ps 命令

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...

  6. tomcat和jetty区别

    参见:https://www.cnblogs.com/fengli9998/p/7247559.html 1. Jetty更轻量级.这是相对Tomcat而言的. 由于Tomcat除了遵循Java Se ...

  7. centos7 centos-home 磁盘转移至centos-root下

    1.查看分区 df -h (centos-home和centos-root每人的名字可能不一样) vgdisplay (查看空闲磁盘大小) 2.备份home分区文件 tar cvf /tmp/home ...

  8. linux查看是否有某个运行的进程命令

    linux查看是否有某个运行的进程命令:例如,查询是否包含 “my_post” 关键字的进程 ps aux | grep my_post ps aux | grep  my_post | grep - ...

  9. oracle中使用函数控制过程是否执行（结合job使用）

    oracle中使用函数控制过程是否执行(结合job使用时候,循环时间不好写的时候,可以此种方法比较方便) CREATE OR REPLACE FUNCTION wsbs_pk_date_validat ...

  10. OpenGL边用边学------2 经典照相机模型

    https://blog.csdn.net/smstong/article/details/50290327 实际照相步骤 1 布置场景和调整照相机位置 3 选择镜头对焦Focus 4 按下快门 5 ...