<!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. 开发安卓安装流程（codorva+ionic)

    开发安卓安装流程 0 安装操作系统  Win10   用户名称尽量英文字母加数字,避免编码问题 1 安装Java sdk 1.8.0_45   所需文件 jdk-8u45-windows-x64 1. ...

  2. POST—常见的4种提交方式

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中,POST 一般用来向服务端提交数据,本文 ...

  3. JSP—中文乱码

    中文乱码问题? --------------------------------------- 不乱码的条件: 1.JSP页面本身的编码 pageEncoding UTF-8 (把jsp页面翻译成ja ...

  4. Linux root用户下不能打开Google-chrome的解决办法

    在root下打开chrome会出现no sandbox的错误 解决方案: 1.找到google-chrome文件 在目录/opt/google/chrome 下 2.使用gedit打开该文件 最后一行 ...

  5. 谷歌浏览器使用IE内核

    经常使用谷歌浏览器去到处溜达,可是,居然还不知道谷歌浏览的还有很多新鲜的设置,昨天遇到了调试一个脚本没有出现效果,而在IE中就可以显示所谓的效果: 查询了下,看到谷歌浏览器确实对脚本的部分样式要求还是 ...

  6. Wireshark图解教程（简介、抓包、过滤器）(转)

    本文转自:http://www.cnblogs.com/observer/archive/2011/11/04/2235219.html 下面是一张地址为192.168.1.2的计算机正在访问&quo ...

  7. python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码

    python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码 python的json.dumps方法默认会输出成这种格式"\u535a\u ...

  8. 自己封装的ajax

    /** * ITCAST WEB * Created by lsy on 2016/5/24. */ /* * 1. 请求的类型 type get post * 2. 请求地址 url * 3. 是异 ...

  9. WireShark学习

    1.打开wireshark->Capture->Interface->选择你的网卡(选中)->Start 2.OK抓包开始,工具栏上有stop,点击停止抓包 3.过滤,这个你可 ...

  10. SNMP学习笔记之SNMP报文以及不同版本(SNMPv1、v2c、v3)的区别

    本篇文章将重点分析SNMP报文,并对不同版本(SNMPv1.v2c.v3)进行区别! 四.SNMP协议数据单元 在SNMP管理中,管理站(NMS)和代理(Agent)之间交换的管理信息构成了SNMP报 ...