中国红客联盟国际站联盟介绍联盟架构联盟章程发展历程联盟邮箱积分VIP捐助联盟收藏本站
请登录
立即注册
门户首页
交流社区BBS
技术圈子Group
关于我们
红客大事记
插件Plugin
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程脚本交流 › 用html+css写一个svg时钟

[项目实践] 用html+css写一个svg时钟

2314 2
guxinlei 2022-12-21 08:04:47 | 显示全部楼层 |阅读模式
用html+css写一个svg时钟
html文件名为index.html
同目录下css文件名为style.css

html代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>svg Clock</title>
  8.   <link rel="stylesheet" href="./style.css">
  9. </head>
  10. <body>
  11.   <div id="time">
  12.     <div class="circle" style="--clr:#ff2972;">
  13.       <div class="dots hr_dot"></div>
  14.       <svg>
  15.         <circle cx="70" cy="70" r="70"></circle>
  16.         <circle cx="70" cy="70" r="70" id="hh"></circle>
  17.       </svg>
  18.       <div id="hours" class="common">00</div>
  19.     </div>

  21.     <div class="circle" style="--clr:#fee800;">
  22.       <div class="dots min_dot"></div>
  23.       <svg>
  24.         <circle cx="70" cy="70" r="70"></circle>
  25.         <circle cx="70" cy="70" r="70" id="mm"></circle>
  26.       </svg>
  27.       <div id="minutes" class="common">00</div>
  28.     </div>

  30.     <div class="circle" style="--clr:#04fc43;">
  31.       <div class="dots sec_dot"></div>
  32.       <svg>
  33.         <circle cx="70" cy="70" r="70"></circle>
  34.         <circle cx="70" cy="70" r="70" id="ss"></circle>
  35.       </svg>
  36.       <div id="seconds" class="common">00</div>
  37.     </div>

  39.     <div class="ap">
  40.       <div id="ampm">AM</div>
  41.     </div>
  42.   </div>

  44.   <script>
  45.     setInterval(() => {
  46.       let hours = document.getElementById('hours')
  47.       let minutes = document.getElementById('minutes')
  48.       let seconds = document.getElementById('seconds')
  49.       let ampm = document.getElementById('ampm')

  51.       let hh = document.getElementById('hh')
  52.       let mm = document.getElementById('mm')
  53.       let ss = document.getElementById('ss')

  55.       let hr_dot = document.querySelector('.hr_dot')
  56.       let min_dot = document.querySelector('.min_dot')
  57.       let sec_dot = document.querySelector('.sec_dot')

  59.       let h = new Date().getHours()
  60.       let m = new Date().getMinutes()
  61.       let s = new Date().getSeconds()
  62.       let am = h > 12 ? 'PM' : 'AM'

  64.       // convert 24hr clock to 12hr clock
  65.       if(h > 12) {
  66.         h = h - 12
  67.       }

  69.       // add zero before single digit number
  70.       h = (h < 10) ? '0' + h : h
  71.       m = (m < 10) ? '0' + m : m
  72.       s = (s < 10) ? '0' + s : s

  74.       // hours.innerHTML = h
  75.       // minutes.innerHTML = m
  76.       // seconds.innerHTML = s

  78.       hours.innerHTML = h + "<br><span>Hours</span></br>"
  79.       minutes.innerHTML = m + "<br><span>Minutes</span></br>"
  80.       seconds.innerHTML = s + "<br><span>Seconds</span></br>"
  81.       ampm.innerHTML = am

  83.       hh.style.strokeDashoffset = 440 - (440 * h) / 12
  84.       // 12 hrs clock

  86.       mm.style.strokeDashoffset = 440 - (440 * m) / 60
  87.       // 60minutes
  88.       ss.style.strokeDashoffset = 440 - (440 * s) / 60
  89.       // 60seconds

  91.       hr_dot.style.transform = `rotate(${h * 30}deg)`
  92.       // 360 / 12 = 30
  93.       min_dot.style.transform =  `rotate(${m * 6}deg)`
  94.       // 360 / 60 = 6
  95.       sec_dot.style.transform =   `rotate(${s * 6}deg)`
  96.       // 360 / 60 = 6
  97.     })
  98.    
  99.   </script>
  100. </body>
  101. </html>
复制代码


css部分：
  1. import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

  3. * {
  4.   margin: 0;
  5.   padding: 0;
  6.   box-sizing: border-box;
  7.   font-family: 'Poppins', sans-serif;
  8. }

  10. body {
  11.   display: flex;
  12.   justify-content: center;
  13.   align-items: center;
  14.   min-height: 100vh;
  15.   background: #2f363e;
  16. }

  18. #time {
  19.   display: flex;
  20.   gap: 40px;
  21.   color: #fff;
  22. }

  24. #time .circle {
  25.   position: relative;
  26.   width: 150px;
  27.   height: 150px;
  28.   display: flex;
  29.   justify-content: center;
  30.   align-items: center;
  31. }

  33. /* 修饰svg start */
  34. #time .circle svg {
  35.   position: relative;
  36.   width: 150px;
  37.   height: 150px;
  38.   transform: rotate(270deg);
  39. }
  40. #time .circle svg circle {
  41.   width: 100%;
  42.   height: 100%;
  43.   fill: transparent;
  44.   stroke: #191919;
  45.   stroke-width: 4;
  46.   transform: translate(5px, 5px);
  47. }

  49. #time .circle svg circle:nth-child(2) {
  50.   stroke: var(--clr);
  51.   stroke-dasharray: 440;
  52. }
  53. /* svg end */


  56. #time  div{
  57.   position: absolute;
  58.   text-align: center;
  59.   font-weight: 500;
  60.   font-size: 1.5em;
  61. }

  63. #time .common {
  64.   top: 40px;
  65. }

  67. #time div span {
  68.   position: absolute;
  69.   transform: translateX(-50%) translateY(-10px);
  70.   font-size: 0.35em;
  71.   font-weight: 300;
  72.   letter-spacing: 0.1em;
  73.   text-transform: uppercase;
  74. }

  76. #time .ap {
  77.   position: relative;
  78.   font: 1em;
  79.   transform: translateX(-20px);
  80. }

  82. /* svg圆点 */
  83. .dots {
  84.   position: absolute;
  85.   width: 100%;
  86.   height: 100%;
  87.   z-index: 10;
  88.   display: flex;
  89.   justify-content: center;
  90. }

  92. .dots::before {
  93.   content: '';
  94.   position: absolute;
  95.   top: -3px;
  96.   width: 15px;
  97.   height: 15px;
  98.   background: var(--clr);
  99.   border-radius: 50%;
  100.   box-shadow: 0 0 20px var(--clr),
  101.               0 0 60px var(--clr);
  102. }
复制代码
回复

使用道具 举报

xeabc1213 2023-5-21 19:05:42 | 显示全部楼层
html+css
index.html
style.css
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

guxinlei

荣誉红客

关注
  • 24
    主题
  • 0
    粉丝
  • 1
    关注
青，取之于蓝而胜于蓝；冰，水为之而寒于水。

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天