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

 <!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. 如何判断移动终端访问还是PC访问？

    我们经常需要知道访问网站的设备是移动终端还是PAD还是PC,下面给出判断的java代码供参考.实现的原理就是获取HTTP消息头里User-Agent和x-wap-profile,User-下面是Use ...

  2. centOS-64位通过YUM源安装nginx

    第一步:在 /etc/yum.repos.d/ 目录下,建立名叫nginx.repo的软件源配置文件.        文件 nginx.repo 的内容是: [nginx] name=nginx re ...

  3. Python中PIL及Opencv转化

    转载:http://blog.sina.com.cn/s/blog_80ce3a550102w26x.html Convert between Python tuple and list a = (1 ...

  4. #!/usr/bin/python和#!/usr/bin/env 的区别（转）

    #!/usr/bin/python和#!/usr/bin/env 的区别   #!/usr/bin/python 通常在一个.py文件开头都会有这个语句 它只在Linux系统下生效,意思是当作为可执行 ...

  5. mybatis_1

    mybatis-config.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE co ...

  6. hbase shell-general（常规指令）

    hbase shell常规指令解释篇 1. status (显示集群状态,master,server情况,显示内容的详略程度可选) hbase(main)::> help 'status' Sh ...

  7. [算法]Rotate Array

    You may have been using Java for a while. Do you think a simple Java array question can be a challen ...

  8. C、C++、Java、JavaScript、PHP、Python、Ruby 这些语言分别主要用来开发什么？

    C.C++.Java.JavaScript.PHP.Python.Ruby 这些语言分别主要用来开发什么? pansz,欢迎评论 此贴纯科普用,以下仅仅说主要用途,其他用途限于篇幅关系省略之,不要钻牛 ...

  9. html基础学习(注意点)

    浏览器会自动地在块级元素(<p><h1>)的前后添加空行 当显示页面时,浏览器会移除源代码中多余的空格和空行.所有连续的空格或空行都会被算作一个空格.需要注意的是,HTML 代 ...

  10. 未测试 Delphi读写UTF-8、Unicode格式文本文件

    // UTF-8文件写入函数 procedure SaveUTFFile(const FileName: string; S: string; WriteHeader: Boolean = True) ...