前几天没事写的个模拟时钟，代码仅供小白参考，大神请自动绕过。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>模拟时钟</title>

     <style>

         body {

             margin: 0;

             padding: 0;

         }

         #blockDial {

             width: 200px;

             height: 200px;

             border: 2px solid black;

             border-radius: 50%;

             position: relative;

             background-color: coral;

         }

         .heart {

             width: 10px;

             height: 10px;

             background-color: black;

             margin: 95px auto;

             border-radius: 50%;

         }

         .blockwise {

             width: 2px;

             height: 80px;

             background-color: black;

             position: absolute;

             left: 99px;

             top: 20px;

             z-index: 10;

         }

         .secondHand{

             width: 2px;

             height: 50px;

             background-color: black;

             position: absolute;

             left: 99px;

             top: 50px;

             z-index: 10;

         }

         .minuteHand{

             width: 2px;

             height: 65px;

             background-color: black;

             position: absolute;

             left: 99px;

             top: 35px;

             z-index: 10;

         }

         #currentTime{

             width: 120px;

             height: 30px;

             border: 1px solid black;

             margin: 10px 40px;

             text-align: center;

             line-height: 30px;

         }

         .num{

             font-size: 24px;

             color: aqua;

             position: absolute;

         }

         .num3{

             top:42%;

             left: 90%;

         }

         .num6{

             top:86%;

             left: 46%;

         }

         .num9{

             top:42%;

             left: 0;

         }

         .num12{

             top:0;

             left: 44%;

         }

     </style>

 </head>

 <body>

 <div id="blockDial">

     <div class="heart"></div>

     <div class="blockwise"></div>

     <div class="secondHand"></div>

     <div class="minuteHand"></div>

     <div class="num num3">3</div>

     <div class="num num6">6</div>

     <div class="num num9">9</div>

     <div class="num num12">12</div>

 </div>

 <div id="currentTime"></div>

 <script src="main.js"></script>

 </body>

 </html>

html

 (function () {

     var blockwise = document.querySelector("#blockDial .blockwise");

     var secondHand = document.querySelector("#blockDial .secondHand");

     var minuteHand = document.querySelector("#blockDial .minuteHand");

     var currentTime = document.querySelector("#currentTime");

     function formate(num) {

         return num>=10? num:"0"+num;

     }

     setInterval(function () {

         var time = new Date();

         currentTime.innerHTML = formate(time.getHours()) + ":" +

             formate(time.getMinutes()) + ":" + formate(time.getSeconds());

         var angleSeconds = time.getSeconds() * 6;

         rotateDiv(secondHand, angleSeconds);

         var angleHours = time.getHours() * 30;

         rotateDiv(blockwise, angleHours);

         var angleMinute = time.getMinutes() * 6;

         rotateDiv(minuteHand, angleMinute);

     }, 1000);

     function rotateDiv(target, angle) {

         target.style.transform = "rotate(" + angle + "deg) ";

         target.style.transformOrigin = "100% 100%";

     }

     document.body.addEventListener("click", function (event) {

         console.log(event.pageX, event.pageY);

     });

 })();

js

吐槽：这代码水准已经是我那时候的最高水平了，╮(╯▽╰)╭

纯js+html+css实现模拟时钟的更多相关文章

  1. 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

    使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...

  2. 纯js和纯css+html制作的手风琴的效果

    一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...

  3. css模拟时钟

    css模拟时钟 思路: 画时钟数字(x,y)坐标 x = x0 + r*cos(deg) y = y0 + r*sin(deg) 知识点: 创建元素: createElement 添加元素: appe ...

  4. 纯js自动批量引入js、css插件，支持自定义参数

    //autoload.js ;! function(e) { var autoload = e.autoload || {}; e.autoload = autoload; e.autoload = ...

  5. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  6. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  7. 一个模拟时钟的时间选择器 ClockPicker

    最近开发的一个模拟时钟的时间选择器 ClockPicker,用于 Bootstrap,或者单独作为一个 jQuery 插件. 源代码托管在 GitHub 上: ClockPicker 最近项目中需要用 ...

  8. JS、CSS以及img对DOMContentLoaded事件的影响

    最近在做性能有关的数据上报,发现了两个非常有意思的东西:Chrome开发者工具的Timeline分析面板,以及DOMContentLoaded事件.一个是强大的令人发指的性能分析工具,一个是重要的性能 ...

  9. 纯JS实现KeyboardNav(学习笔记)二

    纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...

随机推荐

  1. 为什么不写 @RequestParam 也能拿到参数？

    三种写法,test(String name), test(@RequestParam String name), test(@RequestParam("userName") St ...

  2. android 半透明弹窗

    <style name="edit_AlertDialog_style" parent="@android:style/Theme.Dialog"> ...

  3. Python——Numpy的random子库

    NumPy的random子库 np.random.* np.random.rand() np.random.randn() np.random.randint() import numpy as np ...

  4. 2014阿里实习生面试题——MySQL如何实现索引的

    这是2014阿里实习生北京站二面的一道试题: 在MySQL中,索引属于存储引擎级别的概念,不同存储引擎对索引的实现方式是不同的,比如MyISAM和InnoDB存储引擎. MyISAM索引实现: MyI ...

  5. 【HTTP】初识代理

    Web代理(proxy)位于客户端和服务器端之间.HTTP的代理服务器既是Web服务器端又是Web客户端. 1. 代理和网关的对比 代理连接的是两个或者多个使用相同协议的应用程序. 网关连接的是两个或 ...

  6. python基础14 ---函数模块5(模块和包)

    模块与包 一.模块 1.模块是怎么诞生的. 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到 不同的文 ...

  7. [原创]java WEB学习笔记28： 会话与状态管理Cookie 机制

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  8. 【leetcode刷题笔记】Substring with Concatenation of All Words

    You are given a string, S, and a list of words, L, that are all of the same length. Find all startin ...

  9. 面试问题(HTML和CSS方面)

    1 IE/Win的 HasLayout 2 浮动 float 的定义.float后元素的display属性会发生改变吗?3 CSS 3.0.CSS2.1 中被现代浏览器应用了的规则有哪些?4 父元素定 ...

  10. java项目常用架构

    三层架构 : 界面层/表现层 UI 业务逻辑层 BLL 针对具体的问题的操作,也可以理解成对数据层的操作,对数据业务逻辑处理. 数据访问层 DAL 访问数据库 mvc : 而 MVC 是在三层架构的基 ...