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. python： 基本知识（一）

    从今天开始继续python的学习,将应用到到黑客学习中,一边学习黑客知识一边学习python. 1.类:(封装) class T: def  __init__(self,...): //类对象创建后调 ...

  2. django_orm查询性能优化

    查询操作和性能优化 1.基本操作 增 models.Tb1.objects.create(c1='xx', c2='oo') 增加一条数据,可以接受字典类型数据 **kwargs obj = mode ...

  3. 体验Hadoop3.0生态圈-CDH6.1时代的来临

    体验Hadoop3.0生态圈-CDH6.1时代的来临 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我在公司使用的是CDH5.15.1这个发行版本,具体的部署文档之前也有给大家分享 ...

  4. Java Web之验证码

    今天来模拟一下验证码,我们需要三个文件,两个Servlet,一个jsp 直接贴代码吧 RandomCodeServlet:主要负责生产验证码 package com.vae.RandomCode; i ...

  5. C++回顾day01---<命名空间>

    一:namespace是指标识符的各种控件范围(类java中package) C++语言引入命名空间(Namespace)这一概念主要是为了避免命名冲突,其关键字为 namespace 二:iostr ...

  6. springboot下整合redis使用redisTemplate模板

    pom <!-- 引入 redis 依赖 --> <dependency> <groupId>org.springframework.boot</groupI ...

  7. Hbase记录-zookeeper部署

    #官网下载二进制包解压到/usr/app下,配置/etc/profile: export ZOOKEEPER_HOME=/usr/app/zookeeper export PATH=$PATH:$ZO ...

  8. gcc编译出现dlopen、dlerror、dlsym、dlcolse的解决方法

      ➜  test_sqlite3 gcc *.c -I . -o xixi -pthread      /tmp/cckGKTrr.o: In function `unixDlOpen': sqli ...

  9. Oracle数据库用户锁定原因以及处理方式（ORA-28000）

    现场在实施过程中,基于安全考虑(用户名和密码之前暴露给其他公司了),需要对用户密码进行修改. 修改过程很简单(alter user [username] identified by [password ...

  10. internet信息服务(iis)无法删除的解决方法

    internet信息服务(iis)无法删除的解决方法: 1.进入控制面板: 2.然后点击添加删除程序: 3.接着点击“添加/删除windows组件”: 4.点击“internet信息服务(iis)”, ...