<!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. Linux编译安装中configure、make和make install各自的作用

      这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤. ./configure是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不是需要CC或G ...

  2. JSP—中文乱码

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

  3. SQL: 左连接，右连接，内连接，左外连接，右外连接，完全连接

    例子: ---------------------- --------------------------- a表 id name b表 id job parent_id 1 张三           ...

  4. 数据仓库基础（十一）Informatica小技巧（2）

    本文转载自:http://www.cnblogs.com/evencao/p/3152384.html 1.User shortcuts:shortcuts能实现快捷方式的复用.快捷方式可以根据源的变 ...

  5. Linux系统下C语言程序的构建过程

    本文转载自:http://www.ruanyifeng.com/blog/2014/11/compiler.html 源码要运行,必须先转成二进制的机器码.这是编译器的任务. 比如,下面这段源码(假定 ...

  6. SpringBoot之RESTFul风格的接口调用（jQuery-Ajax）

    一.Get $.ajax({ type: "get", url: "url地址", async: true, dataType:"json" ...

  7. Jmeter--正则表达式提取器

    正则提取器的一般使用场景是, 在我第二个请求参数中需要加入第一个请求的返回值, 此时通过正则提取器可以提取第一个请求返回值中指定的字段信息并赋值, 在第二个请求参数中直接引用该变量即可 jmeter的 ...

  8. SQL语句调优汇总

    1.插入数据的表或临时表,预先创建好表结构,能够加快执行速度 2.where 条件判断的字段以及连接查询的条件字段   都添加上索引   能够加快执行速度 3.尽量避免使用 like ,类似 like ...

  9. ELK学习笔记之Logstash和Filebeat解析对java异常堆栈下多行日志配置支持

    0x00 概述 logstash官方最新文档.假设有几十台服务器,每台服务器要监控系统日志syslog.tomcat日志.nginx日志.mysql日志等等,监控OOM.内存低下进程被kill.ngi ...

  10. Python3.x与Python2.x的差异用法

    Python3.x与Python2.x的差异用法 1,关于urllib2区别: # python2 import urllib2 # python3 # 用urllib.request代替urllib ...