css模拟时钟

思路:

画时钟数字(x,y)坐标

x = x0 + r*cos(deg)
y = y0 + r*sin(deg)

知识点:

  1. 创建元素: createElement
  2. 添加元素: appendChild
  3. css3旋转: transform:rotate(30deg);
  4. css3改变旋转中心点: transform-origin:0 0;
  5. 获取当前时间, 把时间数字转换为度数
  1. <!DOCTYPE html> 

  2. <html lang="en"> 

  3. <head> 

  4. <meta charset="UTF-8"> 

  5. <title>Title</title> 

  6. <style> 

  7. * { margin: 0; padding: 0; } 

  8. #bg { 

  9. width: 400px; 

  10. height: 400px; 

  11. background: #ddd; 

  12. border-radius: 10px; 

  13. /* div上下左右垂直居中 */ 

  14. position: absolute; 

  15. left: 50%; 

  16. top: 50%; 

  17. margin-top: -200px; 

  18. margin-left: -200px; 




  19. #bg #clock { 

  20. width: 360px; 

  21. height: 360px; 

  22. background: #fff; 

  23. border-radius: 50%; 

  24. display: inline-block; 

  25. margin: 20px; 

  26. position: relative; 




  27. #hour { 

  28. width: 70px; 

  29. height: 16px; 

  30. background: #000; 

  31. position: absolute; 

  32. left: 180px; 

  33. top: 172px; 

  34. border-radius: 16px; 

  35. transform-origin:0 8px; 



  36. #minute { 

  37. width: 120px; 

  38. height: 12px; 

  39. background: #000; 

  40. position: absolute; 

  41. left: 180px; 

  42. top: 174px; 

  43. border-radius: 12px; 

  44. transform-origin:0 6px; 



  45. #second { 

  46. width: 140px; 

  47. height: 6px; 

  48. background: #f00; 

  49. position: absolute; 

  50. left: 180px; 

  51. top: 177px; 

  52. border-radius: 6px; 

  53. transform-origin:0 1px; 

  54. /*transform:rotate(30deg);*/ 

  55. /*animation: clockRotate 3s linear infinite;*/ 




  56. @keyframes clockRotate { 

  57. from {transform:rotate(0deg);} 

  58. to {transform:rotate(360deg);} 




  59. #point{ 

  60. width: 30px; 

  61. height: 30px; 

  62. border-radius: 50%; 

  63. background: #000; 

  64. position: absolute; 

  65. left: 50%; 

  66. top: 50%; 

  67. margin: -15px 0 0 -15px; 




  68. #clock .number{ 

  69. position: absolute; 

  70. font-size: 28px; 

  71. width: 50px; 

  72. height: 50px; 

  73. line-height: 50px; 

  74. text-align: center; 



  75. </style> 

  76. </head> 

  77. <body> 

  78. <div id="bg"> 

  79. <div id="clock"> 

  80. <div id="hour"></div> 

  81. <div id="minute"></div> 

  82. <div id="second"></div> 

  83. <div id="point"></div> 

  84. </div> 

  85. </div> 


  86. <script> 

  87. var clock = document.getElementById('clock'); 

  88. var r = 150; 

  89. var angle = Math.PI * 2; // 2PI = 360° 

  90. for (var i = 1; i <=12; i++) { 

  91. var deg = angle/12 * i - Math.PI/2; 

  92. var x = r + r*Math.cos(deg); 

  93. var y = r + r*Math.sin(deg); 

  94. //console.log(x,y); 

  95. var num = document.createElement('div');//创建div 

  96. num.className = 'number';//设置class样式 

  97. num.innerText = i; 

  98. //设置坐标 

  99. num.style.top = y + 'px'; 

  100. num.style.left = x + 'px'; 

  101. //添加 

  102. clock.appendChild(num); 




  103. //TODO 1. 数字转换度数 

  104. function run() { 

  105. var date = new Date(); 

  106. //时(0-23) 分(0-59)秒(0-59) 

  107. var hour = date.getHours(); 

  108. var minute = date.getMinutes(); 

  109. var second = date.getSeconds(); 


  110. var hourDeg = 360/12 * hour - 90; 

  111. var minuteDeg = 360/60 * minute - 90; 

  112. var secondDeg = 360/60 * second - 90; 


  113. var hourDiv = document.getElementById('hour'); 

  114. var minuteDiv = document.getElementById('minute'); 

  115. var secondDiv = document.getElementById('second'); 


  116. hourDiv.style.transform = 'rotate('+hourDeg+'deg)'; 

  117. minuteDiv.style.transform = 'rotate('+minuteDeg+'deg)'; 

  118. secondDiv.style.transform = 'rotate('+secondDeg+'deg)'; 




  119. //TODO 2. 设置定时器 

  120. run(); 

  121. setInterval(function () { 

  122. run(); 

  123. },1000); 

  124. </script> 

  125. </body> 

  126. </html> 

css模拟时钟的更多相关文章

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

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

  2. 纯js+html+css实现模拟时钟

    前几天没事写的个模拟时钟,代码仅供小白参考,大神请自动绕过. <!DOCTYPE html> <html lang="en"> <head> & ...

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

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

  4. 模拟时钟(AnalogClock)和数字时钟(DigitalClock)

    Demo2\clock_demo\src\main\res\layout\activity_main.xml <LinearLayout xmlns:android="http://s ...

  5. android脚步---数字时钟和模拟时钟

    时钟UI组件是两个非常简单的组件,分为Digitalclock  和Analogclock, main.xml文件,书中程序有问题,加了两个组件,一个Button和一个<Chronometer ...

  6. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  7. Java多线程之sleep方法阻塞线程-模拟时钟

    package org.study2.javabase.ThreadsDemo.status; import java.text.SimpleDateFormat; import java.util. ...

  8. 模拟时钟(AnalogClock)

    模拟时钟(AnalogClock) 显示一个带时钟和分针的表面 会随着时间的推移变化 常用属性: android:dial 可以为表面提供一个自定义的图片 下面我们直接看代码: 1.Activity ...

  9. 巧妙使用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

随机推荐

  1. matlab : Nelder mead simplex 单纯形直接搜索算法;

    function [ param ] = NeldSearch( param ) %NERDSEARCH 此处显示有关此函数的摘要 % nelder mead simplex 单纯形直接搜索算法: % ...

  2. CodeChef - BLACKCOM 可行性dp转最优化树dp

    https://www.codechef.com/problems/BLACKCOM 题意:一颗5000个黑白结点的树,10W个查询寻找是否存在大小s并且有t和黑节点的子图 一开始就觉得应当是一个树d ...

  3. 流畅的python--2 序列构成的数组

    我们把文本.列表和表格叫做数据火车...FOR命令通常能作用于数据火车上.      ---ABC Programmer's Handbook 不管是哪种数据结构,字符串.列表.字节序列.数组.XML ...

  4. JDBC-Transaction

    /** * 数据库中事务,指一组逻辑操作单元,使数据从一种状态变换到另一种状态 * 操作全部完成时,数据被保留,一致性可以保持,一部分操作失败时,整个操作全部视为错误,所有被操作数据回退到开始状态,放 ...

  5. JAVA-8大基本类型与包装类的例子(基础必备)

    package com.net.xinfang.reflect; /*** * 8种基本类型(byte,int,short,long,float,double,char,boolean) * 布尔型只 ...

  6. Dev-Tips

    186 Chrome DevTools: How to use Logpoints for quicker JavaScript debugging You can use the new Logpo ...

  7. LeetCode(193. Valid Phone Numbers)(sed用法)

    193. Valid Phone Numbers Given a text file file.txt that contains list of phone numbers (one per lin ...

  8. Golang入门教程(十七)Linux/Windows下快速搭建和配置NSQ

    前言 NSQ是一个基于Go语言的分布式实时消息平台,它基于MIT开源协议发布,代码托管在GitHub,其当前最新版本是0.3.1版.NSQ可用于大规模系统中的实时消息服务,并且每天能够处理数亿级别的消 ...

  9. java中的日志打印

    java中的日志打印: 日志工具类: #获取日志 INFO:表示获取日志的等级 A1:表示日志存器,可以自定义名称 #===DEBUG INFO log4j.rootLogger=DEBUG,A1,A ...

  10. Spark常见问题汇总

    原文地址:https://my.oschina.net/tearsky/blog/629201 摘要: 1.Operation category READ is not supported in st ...