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. django 跨域解决方案

    使用django-cors-headers模块 github:https://github.com/ottoyiu/django-cors-headers 官方文档中有详细说明 简要配置 1.安装 p ...

  2. 6-(基础入门篇)学会编译lua固件,固件的合成

    http://www.cnblogs.com/yangfengwu/p/9336274.html 基础教程源码链接请在淘宝介绍中下载,由于链接很容易失效,如果失效请联系卖家,谢谢 https://it ...

  3. zk创建集群

    在单机环境下和创建集群. 需要注意的点: 配置数据文件myid 1/2/3 对应server.1/2/3 通过./zkCli.sh -server [ip]:[port]  检测集群是否创建成功 在z ...

  4. C#设计模式（9）——代理模式

    1.代理模式介绍 在软件开发中有时会遇到不能直接使用对象的问题,如我们要使用的对象在进程外,甚至在远程的机器上,但是我们要使用这个对象的功能怎么办呢?代理模式就可以用来解决这个问题.举一个生活中的例子 ...

  5. SqlServer中的事务使用

    一.事务的概念和特点 事务(transaction)是恢复和并发控制的基本单位. 事务的特点 原子性:事务是一个工作单元,要都成功,要么的失败 例子:A付款给B,A余额-100,B余额+100,只能都 ...

  6. mysq存储金额的数值类型选择

    在之前得项目中用到了double,计算之后有很长得小数位,需要用算法去除,非常麻烦,以后推荐使用:decimal 这个是专门处理金额值的,Java 类型对应BigDecimal

  7. HDU 1575(裸矩阵快速幂)

    emmmmm..就是矩阵快速幂,直接附代码: #include <cstdio> using namespace std; ; ; struct Matrix { int m[maxn][ ...

  8. javaScript ES5常考面试题总结

    js的六种原始值 boolean null undefined number string symbol 坑1: 首先原始类型存储的都是值,是没有函数可以调用的,比如 undefined.toStri ...

  9. Android GreenDao使用教程

    1.在build.gradle里添加相关依赖 apply plugin: 'org.greenrobot.greendao' buildscript { repositories { mavenCen ...

  10. 微信小程序 TOP100 榜单

    8 月 12 日,阿拉丁数据统计平台发布了国内第一份小程序 TOP100 榜单,摩拜单车成为全榜第一! 该榜单数据来源于阿拉丁小程序统计平台检测.合作.如有赞等,并经过企业电话调研和实地走访企业等校准 ...