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

 <!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. linux 字符驱动

    1 结构体说明:     struct cdev {         struct kobject kobj;          // 每一个 cdev 都是一个 kobject         st ...

  2. QT设置TextEdit颜色

    //设置textEdit颜色 QPalette palette= ui->receiveTextEdit->palette(); palette.setColor(QPalette::Ba ...

  3. windows下的mysql闪退问题

    早上来启动MySQL发现输入密码就闪退,连续试了好几次,最后到网上查到了解决方案. 与Linux系统下MySQL密码丢失的操作步骤基本一样. 首先要跳过密码启动MySQL服务. 启动服务必须使用全路径 ...

  4. 通过systemd配置Docker

    1. systemd Service相关目录 通常情况下,我们有3种方式可以配置etcd中的service.以docker为例,1)在目录/etc/systemd/system/docker.serv ...

  5. putty screen

    http://www.cnblogs.com/xupeizhi/archive/2013/05/20/3088779.html screen 会创建一个跑着shell的单一窗口 Ctrl+a d退出刚 ...

  6. 第五篇、javascript正则表达式二

    一.内容概要 1)创建着呢规则表达式对象的两种方法 2)正则表达式的常用属性和方法 3)string对象常用方法中可以使用正则表达式 4)ES中其他预定义的对象:Math.Date.Number.Bo ...

  7. SpringCloud之服务提供和服务调用的搭建

    pom文件: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3 ...

  8. MySQL5.7.9（GA）的安装

    1.解压ZIP文件到安装目录: 2.进入到bin目录,试运行mysqld --console,查看可能的出错信息,安装相应的辅助软件,如.net V4.0等: 3.编辑my.ini文件,关键内容如下: ...

  9. WCF之契约的分类（部分為參考他人）

    什么是契约呢?在使用WCF时,对其制定各种各样的规则,就叫做WCF契约.任何一个分布式的应用程序在传递消息的时候都需要实现制定一个规则. 任何一个分布式应用程序,它之所以能够互相传递消息,都是事先制定 ...

  10. 2017各银行贷款利息表及P2P平台贷款利率比较

    银行贷款利息是多少?2017各银行贷款利息表及P2P平台贷款利率比较 发表时间: 2017-02-17 作者: 一.2017央行贷款基准率 各个银行的贷款利率是以中国银行的人民币贷款基准率为标准进行上 ...