<!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. Lifyray笑傲江湖之API总结TextUtil

    package liferay; /** * */ import java.text.DecimalFormat; import java.text.NumberFormat; import java ...

  2. linux中vim的常用方法

    i 当前光标位置插入 a 当前光标后插入 0 另起一行插入 A 在光标所在行尾插入 I 在光标所在行首插入 :set nu设置 行号 :set nunu 取消行号 gg 到第一行 G 到最后一行 $ ...

  3. 【kafka学习之四】kafka集群性能测试

    kafka集群的性能受限于JVM参数.服务器的硬件配置以及kafka的配置,因此需要对所要部署kafka的机器进行性能测试,根据测试结果,找出符合业务需求的最佳配置. 1.kafka broker j ...

  4. linux常用命令：yum 命令

    用于添加/删除/更新RPM包,自动解决包的依赖问题以及系统更新升级. 1.命令格式:    yum  [参数] [软件名]2.命令功能:    功能:  yum提供了查找.安装.删除某一个.一组甚至全 ...

  5. Xcode10.x适配的部分问题

    因为我们项目是一个Workspace,由若干个库组成(组件化比较碎),又涉及到海外和国内(存在很多差异性),整个项目的编译是由每个库的脚本(每个库生成会支持32位和64位,每次编译前会清除历史缓存), ...

  6. 让前端独立于后端进行开发，模拟数据生成器Mock.js

    让前端独立于后端进行开发,模拟数据生成器Mock.jsMock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. Home · nuysoft/Mock Wiki ...

  7. CentOS随笔 - 4.CentOS7安装MySql 5.5.60(下载 tar 方式安装)

    前言 转帖请注明出处: http://www.cnblogs.com/Troy-Lv5/ 由于公司也有php+mysql的项目, 所以今天也把Mysql装了一遍. 为了与以前的程序和数据库兼容, 这次 ...

  8. 解析分布式锁之Zookeeper实现（一）

    实现分布式锁目前有三种流行方案,分别为基于数据库.Redis.Zookeeper的方案,本文主要阐述基于Zookeeper的分布式锁,其他两种会在后文中一起探讨.现在我们来看下使用Zookeeper如 ...

  9. c++第十六天

    p99~p101: 1.迭代器的指向:容器内的元素或者尾元素的下一位. 2.迭代器与整数相加减返回值为移动了若干位置的迭代器. 3.迭代器间相加减返回值则是类型为 difference_type 的带 ...

  10. Arduino使用HC05蓝牙模块与手机连接

    Arduino使用HC05蓝牙模块与手机连接 一切都是最好的选择 首先是线路连接,一定不要接错了 Arduino 代码 #include <SoftwareSerial.h> // Pin ...