设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › HTML+CSS+JavaScript实现动态数字时钟-明暗主题！！附源 ...
返回列表 发新帖
查看: 19|回复: 0

HTML+CSS+JavaScript实现动态数字时钟-明暗主题！！附源码！！

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 昨天 21:51 | 显示全部楼层 |阅读模式
效果展示

640.gif

HTML
  1. <!DOCTYPE html>
  2. <!-- Coding by CodingLab | www.codinglabweb.com-->
  3. <html lang="en" dir="ltr">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <title> 动态数字时钟</title>
  7.     <link rel="stylesheet" href="style.css">
  8.     <!-- Fontawesome CDN Link -->
  9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
  10.    </head>
  11. <body>
  12.   <section>
  13.     <div class="container">
  14.       <div class="icons">
  15.         <i class="fas fa-moon"></i>
  16.         <i class="fas fa-sun"></i>
  17.       </div>
  18.       <div class="time">
  19.         <div class="time-colon">
  20.           <div class="time-text">
  21.             <span class="num hour_num">08</span>
  22.             <span class="text">Hours</span>
  23.           </div>
  24.           <span class="colon">:</span>
  25.         </div>
  26.         <div class="time-colon">
  27.           <div class="time-text">
  28.             <span class="num min_num">45</span>
  29.             <span class="text">Minutes</span>
  30.           </div>
  31.           <span class="colon">:</span>
  32.         </div>
  33.         <div class="time-colon">
  34.           <div class="time-text">
  35.             <span class="num sec_num">06</span>
  36.             <span class="text">Seconds</span>
  37.           </div>
  38.           <span class="am_pm">AM</span>
  39.         </div>
  40.       </div>
  41.     </div>
  42.   </section>
  43.   <script>
  44.   let section = document.querySelector("section"),
  45.   icons = document.querySelector(".icons");
  46.   icons.onclick = ()=>{
  47.     section.classList.toggle("dark");
  48.   }
  49.   // creating a function and calling it in every seconds
  50.   setInterval(()=>{
  51.     let date = new Date(),
  52.     hour = date.getHours(),
  53.     min = date.getMinutes(),
  54.     sec = date.getSeconds();
  55.     let d;
  56.     d = hour < 12 ? "AM" : "PM"; //if hour is smaller than 12, than its value will be AM else its value will be pm
  57.     hour = hour > 12 ? hour - 12 : hour; //if hour value is greater than 12 than 12 will subtracted ( by doing this we will get value till 12 not 13,14 or 24 )
  58.     hour = hour == 0 ? hour = 12 : hour; // if hour value is  0 than it value will be 12
  59.     // adding 0 to the front of all the value if they will less than 10
  60.     hour = hour < 10 ? "0" + hour : hour;
  61.     min = min < 10 ? "0" + min : min;
  62.     sec = sec < 10 ? "0" + sec : sec;
  63.     document.querySelector(".hour_num").innerText = hour;
  64.     document.querySelector(".min_num").innerText = min;
  65.     document.querySelector(".sec_num").innerText = sec;
  66.     document.querySelector(".am_pm").innerText = d;
  67.   }, 1000); // 1000 milliseconds = 1s
  68.   </script>
  69. </body>
  70. </html>
复制代码

CSS
  1. /* Google fonts import link */
  2. @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap');
  3. *{
  4.   margin: 0;
  5.   padding: 0;
  6.   box-sizing: border-box;
  7.   font-family: 'Orbitron', sans-serif;
  8.   transition: all 0.4s ease;
  9. }
  10. section{
  11.   min-height: 100vh;
  12.   width: 100%;
  13.   display: flex;
  14.   align-items: center;
  15.   justify-content: center;
  16.   background: #F0F8FF;
  17.   padding: 0 20px;
  18. }
  19. section.dark{
  20.   background: #24292D;
  21. }
  22. section .container{
  23.   display: flex;
  24.   align-items center;
  25.   justify-content: center;
  26.   height: 220px;
  27.   max-width: 560px;
  28.   width: 100%;
  29.   background: #fff;
  30.   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  31.   border-radius: 12px;
  32.   position: relative;
  33. }
  34. section.dark .container{
  35.   background: #323840;
  36. }
  37. section .container .icons i{
  38.   position: absolute;
  39.   right: 17px;
  40.   top: 17px;
  41.   height: 30px;
  42.   width: 30px;
  43.   background: #24292D;
  44.   color: #fff;
  45.   text-align: center;
  46.   line-height: 30px;
  47.   border-radius: 50%;
  48.   font-size: 14px;
  49.   cursor: pointer;
  50. }
  51. section.dark .container .icons i{
  52.   background: #fff;
  53.   color: #323840;
  54. }
  55. .container .icons i.fa-sun{
  56.   opacity: 0;
  57.   pointer-events: none;
  58. }
  59. section.dark .container .icons i.fa-sun{
  60.   opacity: 1;
  61.   pointer-events: auto;
  62.   font-size: 16px;
  63. }
  64. section .container .time{
  65.   display: flex;
  66.   align-items: center;
  67. }
  68. .container .time .time-colon{
  69.   display: flex;
  70.   align-items: center;
  71.   position: relative;
  72. }
  73. .time .time-colon .am_pm{
  74.   position: absolute;
  75.   top: 0;
  76.   right: -50px;
  77.   font-size: 20px;
  78.   font-weight: 700;
  79.   letter-spacing: 1px;
  80. }
  81. section.dark .time .time-colon .am_pm{
  82.   color: #fff;
  83. }
  84. .time .time-colon .time-text{
  85.   height: 100px;
  86.   width: 100px;
  87.   display: flex;
  88.   align-items: center;
  89.   flex-direction: column;
  90.   justify-content: center;
  91.   background: #F0F8FF;
  92.   border-radius: 6px;
  93.   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  94. }
  95. section.dark .time .time-colon .time-text{
  96.   background: #24292D;
  97. }
  98. .time .time-colon .time-text,
  99. .time .time-colon .colon{
  100.   font-size: 35px;
  101.   font-weight: 600;
  102. }
  103. section.dark .time .time-text .num,
  104. section.dark .time .colon{
  105.   color: #fff;
  106. }
  107. .time .time-colon .colon{
  108.   font-size: 40px;
  109.   margin: 0 10px;
  110. }
  111. .time .time-colon .time-text .text{
  112.   font-size: 12px;
  113.   font-weight: 700;
  114.   letter-spacing: 2px;
  115. }
  116. section.dark  .time .time-colon .text{
  117.   color: #fff;
  118. }
复制代码
回复

举报

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

本版积分规则

快速回复 返回顶部 返回列表