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. } 
  21. #bg #clock { 
  22. width: 360px; 
  23. height: 360px; 
  24. background: #fff; 
  25. border-radius: 50%; 
  26. display: inline-block; 
  27. margin: 20px; 
  28. position: relative; 
  29. } 
  31. #hour { 
  32. width: 70px; 
  33. height: 16px; 
  34. background: #000; 
  35. position: absolute; 
  36. left: 180px; 
  37. top: 172px; 
  38. border-radius: 16px; 
  39. transform-origin:0 8px; 
  40. } 
  41. #minute { 
  42. width: 120px; 
  43. height: 12px; 
  44. background: #000; 
  45. position: absolute; 
  46. left: 180px; 
  47. top: 174px; 
  48. border-radius: 12px; 
  49. transform-origin:0 6px; 
  50. } 
  51. #second { 
  52. width: 140px; 
  53. height: 6px; 
  54. background: #f00; 
  55. position: absolute; 
  56. left: 180px; 
  57. top: 177px; 
  58. border-radius: 6px; 
  59. transform-origin:0 1px; 
  60. /*transform:rotate(30deg);*/ 
  61. /*animation: clockRotate 3s linear infinite;*/ 
  62. } 
  64. @keyframes clockRotate { 
  65. from {transform:rotate(0deg);} 
  66. to {transform:rotate(360deg);} 
  67. } 
  69. #point{ 
  70. width: 30px; 
  71. height: 30px; 
  72. border-radius: 50%; 
  73. background: #000; 
  74. position: absolute; 
  75. left: 50%; 
  76. top: 50%; 
  77. margin: -15px 0 0 -15px; 
  78. } 
  80. #clock .number{ 
  81. position: absolute; 
  82. font-size: 28px; 
  83. width: 50px; 
  84. height: 50px; 
  85. line-height: 50px; 
  86. text-align: center; 
  87. } 
  88. </style> 
  89. </head> 
  90. <body> 
  91. <div id="bg"> 
  92. <div id="clock"> 
  93. <div id="hour"></div> 
  94. <div id="minute"></div> 
  95. <div id="second"></div> 
  96. <div id="point"></div> 
  97. </div> 
  98. </div> 
  100. <script> 
  101. var clock = document.getElementById('clock'); 
  102. var r = 150; 
  103. var angle = Math.PI * 2; // 2PI = 360° 
  104. for (var i = 1; i <=12; i++) { 
  105. var deg = angle/12 * i - Math.PI/2; 
  106. var x = r + r*Math.cos(deg); 
  107. var y = r + r*Math.sin(deg); 
  108. //console.log(x,y); 
  109. var num = document.createElement('div');//创建div 
  110. num.className = 'number';//设置class样式 
  111. num.innerText = i; 
  112. //设置坐标 
  113. num.style.top = y + 'px'; 
  114. num.style.left = x + 'px'; 
  115. //添加 
  116. clock.appendChild(num); 
  117. } 
  119. //TODO 1. 数字转换度数 
  120. function run() { 
  121. var date = new Date(); 
  122. //时(0-23) 分(0-59)秒(0-59) 
  123. var hour = date.getHours(); 
  124. var minute = date.getMinutes(); 
  125. var second = date.getSeconds(); 
  127. var hourDeg = 360/12 * hour - 90; 
  128. var minuteDeg = 360/60 * minute - 90; 
  129. var secondDeg = 360/60 * second - 90; 
  131. var hourDiv = document.getElementById('hour'); 
  132. var minuteDiv = document.getElementById('minute'); 
  133. var secondDiv = document.getElementById('second'); 
  135. hourDiv.style.transform = 'rotate('+hourDeg+'deg)'; 
  136. minuteDiv.style.transform = 'rotate('+minuteDeg+'deg)'; 
  137. secondDiv.style.transform = 'rotate('+secondDeg+'deg)'; 
  138. } 
  140. //TODO 2. 设置定时器 
  141. run(); 
  142. setInterval(function () { 
  143. run(); 
  144. },1000); 
  145. </script> 
  146. </body> 
  147. </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. docker 基础之私有仓库

    docker-registry 是官方提供的工具,可以用于构建私有的镜像仓库.安装运行 docker-registry容器 在安装了 Docker 后,可以通过获取官方 registry 镜像来运行. ...

  2. oracle中查看所有表和字段以及表注释字段注释

    获取表:select table_name from user_tables; //当前用户拥有的表 select table_name from all_tables; //所有用户的表 selec ...

  3. scrapy_splash模块解析动态js

    一般遇到动态加载的网页就比较棘手,一般采用scrapy_splash和selenium这两种方式来解决.貌似scrapy_splash更强大,因为就从爬取美团这个网站而言,scrapy_splash可 ...

  4. 开源图片文字识别引擎——Tesseract OCR

    Tessseract为一款开源.免费的OCR引擎,能够支持中文十分难得.虽然其识别效果不是很理想,但是对于要求不高的中小型项目来说,已经足够用了. 文字识别可应用于许多领域,如阅读.翻译.文献资料的检 ...

  5. Linux系统中errno对应的中文意思 errno.h

    /usr/include/asm/errno.h #define EPERM 1 /* Operation not permitted */操作不允许 #define ENOENT 2 /* No s ...

  6. svn Edge访问规则配置

    权限的配置方法: 首先在用户页面定义用户,然后在版本库页面,手工填写访问规则. 以下面的配置为例(实际配置中应删除“//”及其后的注释): [groups]               //定义用户组 ...

  7. consul - 基础

    =============================consul 是什么============================= consul 是 HashiCorp 公司推出的开源工具, 该 ...

  8. 使用aspectJ实现Spring AOP的两种方式

    方式一:基于aspectJ的XML配置 方式二:基于aspectJ的注解方式 基于aspectJ的XML配置 1)       引入相关jar包 2)       创建Spring核心配置文件,必须导 ...

  9. rabbitMQ学习1:消息队列介绍与rabbitmq安装使用

    1. 什么是消息队列 生活里的消息队列,如同邮局的邮箱, 如果没邮箱的话, 邮件必须找到邮件那个人,递给他,才玩完成,那这个任务会处理的很麻烦,很慢,效率很低 但是如果有了邮箱, 邮件直接丢给邮箱,用 ...

  10. java作业（1）

    第一题: 模仿JavaAppArguments.java示例,编写一个程序,此程序从命令行接收多个数字,求和之后输出结果. (1)设计思想 程序中设置字符串的个数,从键盘进行输入,并且将字符串转化为数 ...