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

 <!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. python数据分析之：时间序列一

    在处理很多数据的时候,我们都要用到时间的概念.比如时间戳,固定时期或者时间间隔.pandas提供了一组标准的时间序列处理工具和数据算法. 在python中datetime.datetime模块是用的最 ...

  2. Hadoop初体验

    1.首先准备环境 系统:Linux(centOS) jdk:1.7 这里jdk要安装配置完成,具体步骤参考:Linux环境下安装JDK 注意:本次没有配置免密登录,所以在启动和停止的时候回让你输入多次 ...

  3. activiti踩坑

    最近在学习activiti,偶然间遇到一个错误:加载引擎的时候报错,显示空指针错误,跟代码发现初始化配置文件返回为null.几经排查,可能是因为我发布流程后又清空了数据库数据导致的.然后我把表全部删除 ...

  4. 改善程序与设计的55个具体做法 day8

    条款20:宁以pass-by-reference-to-const 替换 pass-by-value 即 以const引用 替换值传递. 采用引用传递参数时,底层往往是用指针方式实现,因此参数传递内置 ...

  5. Oracle分页总汇

    Oracle分页总汇 select * from (select a.*,rownum row_num from (select * from mytable t order by t.id desc ...

  6. 搭建SSM项目时报错（org.springframework.jdbc.CannotGetJdbcConnectionException）

    严重: Servlet.service() for servlet [SpringMVC] in context with path [/ssm] threw exception [Request p ...

  7. 每天一个Linux命令（15）tail命令

    tail命令用于输入文件中的尾部内容.tail命令默认在屏幕上显示指定文件的末尾10行. 如果给定的文件不止一个,则在显示的每个文件前面加一个文件名标题.     (1)用法: 用法:   tail ...

  8. Oracle可能会遇到问题和解决方法

    1.plsql developer查询一列用中文,出现乱码 添加环境变量NLS_LANG = SIMPLIFIED CHINESE_CHINA.ZHS16GBK->软件重启 2.ORA-1251 ...

  9. Oracle的select检索数据

    --Select语法 select [distinct | All] select_list from table_list [where_clause] [group_by_clause] [Hav ...

  10. java:eclipse4.4 安装tomcat插件

    一.Eclipse 4.4下载地址:http://www.eclipse.org/downloads/ (Eclipse官网).Eclipse4.4版本默认已经集成了Ant和Maven插件,这点挺不错 ...