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. CentOS 7.0下使用yum安装MySQL

    CentOS7默认数据库是mariadb,配置等用着不习惯,因此决定改成mysql,但是CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1 ...

  2. Storm中重要对象的生命周期

    Spout方法调用顺势 declareOutputFields()(调用一次) open() (调用一次) activate() (调用一次) nextTuple() (循环调用 ) deactiva ...

  3. 友链——一群dalao

    ****敲黑板,重点. <机房最强大佬(楼下的CP)>https://deathmonkey.blog.luogu.org/ <机房最强基佬> https://www.luog ...

  4. iptables之NAT端口转发设置

    背景:服务器A:103.110.114.8/192.168.1.8,有外网ip,是IDC的一台服务器服务器B:192.168.1.150,没有外网ip,A服务器是它的宿主机,能相互ping通服务器C: ...

  5. 【leetcode-86】 分隔链表

    (1过) 给定一个链表和一个特定值 x,对链表进行分隔,使得所有小于 x 的节点都在大于或等于 x 的节点之前. 你应当保留两个分区中每个节点的初始相对位置. 示例: 输入: head = 1-> ...

  6. UESTC - 1999 也许这是唯一能阻止乐爷AK的方法( Just for Fun )（回文树）

    https://vjudge.net/problem/UESTC-1999 题意 对于一个初始为空的字符串S,你可以进行以下两种操作: 1. 在S的末尾加一个小写字母. 2. 移除S的最后一个字母. ...

  7. c++后台开发路线

  8. yum 安装时错误 Errno 14 Couldn't resolve host 解决办法

    后来网上查了一下说是DNS服务器错误.于是修改一下 /etc/resolv.conf 添加一个nameserver 8.8.8.8完成

  9. 在浏览器窗口中加载新的url

    通常,在前端页面中如果需要跳转到指定页面,可以通过<a>标签进行跳转.而在某些情况下,比如ajax调用之后想直接跳转到指定页面,想跳转页面不能再用<a>标签实现.此时,可以通过 ...

  10. jquery 控制 video 视频播放和暂停

    $('video').trigger('play'); $('video').trigger('pause'); 参考:https://blog.csdn.net/arvin0/article/det ...