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

 <!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. SNMP 监控方式的配置

    由于某些设备并不能安装 Agent,或者不方便安装 Agent 等因素,将采用 SNMP 方式进行监控 1.Linux 配置 SNMP [root@crazy-acong ~]# yum -y ins ...

  2. android中handler和bundle有什么区别和联系 都是用来传递消息吗都是信息的载体吗

    1.handler是消息处理者,通常重写Handler的handleMessage()方法,在方法中处理接收到的不同消息,例如: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Ha ...

  3. vmware 下的三种网络模式

    VMWare提供三种工作模式桥接(bridge).NAT(网络地址转换)和host-only(主机模式). 桥接模式 在桥接模式下,VMWare虚拟出来的操作系统就像是局域网中的一台独立的主机(主机和 ...

  4. Linux 3 -grep

    七. grep家族: 1. grep退出状态: 0: 表示成功: 1: 表示在所提供的文件无法找到匹配的pattern: 2: 表示参数中提供的文件不存在. 见如下示例: /> grep 'ro ...

  5. mysql设置有外键的主键自增及其他

    有外键的主键设置自增. ; ALTER TABLE `<table>` MODIFY COLUMN `id` ) NOT NULL AUTO_INCREMENT FIRST; 创建数据库, ...

  6. java: jsp:param中文乱码

    java: jsp:param中文乱码 假如a.jsp/b.jsp文件中 a.jsp代码: 需要加入:request.setCharacterEncoding("UTF-8")  ...

  7. 一 Django框架介绍——用pycharm创建Django项目

    Django框架介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...

  8. Geoserver端口冲突解决方案

    转载:https://blog.csdn.net/wiinder/article/details/53260642 今天在安装Geoserver的时候遇到了端口冲突的问题,即默认的8080端口与Tom ...

  9. Javascript-- jQuery动画篇(1)

    jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...

  10. python-管理MySQL之ConfigParser模块

    1.拷贝2.7版本的ConfigParser.py模块支持无值解析 cp /usr/local/src/Python-2.7.5/Lib/ConfigParser.py /usr/lib/python ...