<!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. windows配置承载网络的一个批处理程序

    @rem 这是windows中创建承载网络的相关命令title wifi热点@echo off set ssid=abcdeset key=123456789 :beginclsecho ------ ...

  2. lnmp之阿里云源码安装mysql5.7.17

    mysql5.7.17一直号称世界上最好的mysql 那么就在阿里云主机linux安装它(采用的源码安装mysql5.7.17) 我在阿里云主机上安装它 连接阿里云主机 进入,跟我们自己装的虚拟机一毛 ...

  3. Object-C-属性参数

    assign:默认参数setter 方法不会引起引用计数的变化 retain:setter方法首先释放旧的对象,将旧对象的值赋予输入对象,再提高输入对象的引用计数为1 copy:setter 方法首先 ...

  4. EntityFramework包含作用

    System.Data.Entity.Infrastructure.DbQuery的引用需要加入上面那个包

  5. python 正则表达式匹配ip

    >>> re.match(r'^(([1-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}([1-9]|[1-9]\d|1\d\d|2[0-4]\d| ...

  6. C++原创应用类库和工具类库

    此博文记载着自编C++应用类库和生成器库的源代码的链接地址,并且对库的开发环境.开发过程.缺陷以及改进更新进行说明. 分数类 利用中午的时间,自己在Visual Studio 2013环境下编写了一个 ...

  7. Core Java 2

    p267~p270: 1.一个方法不仅需要告诉编译器将要返回什么值, 还要告诉编译器有可能发生什么错误(以便在错误发生时用妥善的方式处理错误). 2.方法应该在首部声明所有可能抛出的异常. 3.方法抛 ...

  8. Python3.x（windows系统）安装requests库

    Python3.x(windows系统)安装requests库 cmd命令: pip install requests 执行结果:

  9. 20145329 《网络对抗技术》浏览器MS11_050安全漏洞攻击

    两台虚拟机: kali ip:192.168.96.130 windows xp sp3(包含IE7)ip:192.168.96.128 1.在kali终端中开启msfconsole. 2.进入漏洞模 ...

  10. 小工具：word表格文字转化成insert语句

    群里的一个朋友有个需要,要让把word里的表格数据插入到数据库里面. 我的思路是,把格式化的数据转成insert语句,然后去执行就可以了. 要求的insert语句格式是:'insert into xx ...