一个菜鸟的互联网技术分享博客
您的位置: 主页 > 一个html实现的小时钟,动态显示当前时间,可以直接运行使用
advertisement

一个html实现的小时钟,动态显示当前时间,可以直接运行使用

最近没有什么事忙的,所以左手枸杞茶右手鼠标浏览CSDN上面大佬们的技术博客,然后就看到一个比较“骚气”的博客,现在转载一下吧,点击括号里面的跳转看效果吧,代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.         <title>实时时钟</title>  
  7.           
  8.     </head>  
  9.       
  10.     <style>  
  11.         *{  
  12.             padding: 0px;   /* 内边距 */  
  13.             margin: 0px;    /*外边距 */  
  14.             box-sizing: border-box; /* 盒子模型 ,作用自动计算 */  
  15.         }  
  16.           
  17.         body{  
  18.             font-family: monospace; /* 字体 */  
  19.             font-size: 2rem;        /* rem是css3的新单位,叫相对单位,rem更加适配iphone和ipad,   默认1rem=16px,但是可以修改默认值 2rem=32px 就相当于字体放大几倍*/  
  20.             min-height: 100vh;      /* 视窗高度 1vh等于视窗高度的百分之一1% ,视口/视窗高度就是所看到的页面高度 */  
  21.             display: grid;          /* 改变成栅格(网格)  */  
  22.             overflow-y: hidden;     /* Y轴溢出隐藏 */  
  23.             place-content:center;   /* 水平垂直居中 */   
  24.             background: linear-gradient(-45deg,#c4d2ef,#dfe6f6); /* 线性渐变(角度、颜色、颜色) */  
  25.         }  
  26.           
  27.         .hr,  
  28.         .min,  
  29.         .sec{  
  30.             display: grid;          /* 改成栅格 */  
  31.             grid-template-columns: 1fr 1fr; /* 网格分列 */  
  32.             grid-gap: 2rem;           
  33.             grid-row: 1/2;          /* 分成两列 */  
  34.             align-items: start;       
  35.         }  
  36.           
  37.         .number{  
  38.             padding: 0.5rem;          
  39.             width: 4rem;              
  40.             height: 4rem;             
  41.             display: grid;            
  42.             place-items: center;      
  43.             /*color: #9ffbdf;   */        
  44.             transition: 500ms 100ms ease;     
  45.             border-radius: 50%;     /* 圆角, 50%是圆形 */  
  46.         }  
  47.           
  48.         .number.pop{  
  49.             color: #3e6ccd;  
  50.             font-weight: bold;  
  51.             transform: scale(1.3);  
  52.             background-color: #dfe6f6;  
  53.             box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8;  
  54.         }  
  55.           
  56.         .strip{  
  57.             transition: transform 500ms ease-in-out;    /* 动画效果 */  
  58.             border-radius: 8px; /* 圆角 */  
  59.             background: #dfe6f6;  
  60.             box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8;  /* 阴影 */  
  61.         }  
  62.           
  63.         .clock{  
  64.             display: grid;  
  65.             grid-template-columns: repeat(3,1fr);  
  66.             grid-gap:3rem;  
  67.             height: 4rem;  
  68.             position: relative; /* 相对定位 */  
  69.             padding: 0 4rem;    /* 内边距 */  
  70.         }  
  71.           
  72.     </style>  
  73.       
  74.     <body>  
  75.         <div class="clock">  
  76.             <!-- 小时 最大24  一天24小时  strip是外层的大框-->  
  77.             <div class="hr">  
  78.                 <!-- 时,第一位值: 012  -->  
  79.                 <div class="strip">  
  80.                     <div class="number">0</div>  
  81.                     <div class="number">1</div>  
  82.                     <div class="number">2</div>  
  83.                 </div>  
  84.                 <!-- 时,第二位数字 -->  
  85.                 <div class="strip">  
  86.                     <div class="number">0</div>  
  87.                     <div class="number">1</div>  
  88.                     <div class="number">2</div>  
  89.                     <div class="number">3</div>  
  90.                     <div class="number">4</div>  
  91.                     <div class="number">5</div>  
  92.                     <div class="number">6</div>  
  93.                     <div class="number">7</div>  
  94.                     <div class="number">8</div>  
  95.                     <div class="number">9</div>  
  96.                 </div>  
  97.                   
  98.             </div>    
  99.             <!--分 最大59-->  
  100.             <div class="min">  
  101.                 <!-- 分 第一位数字 -->  
  102.                 <div class="strip">  
  103.                     <div class="number">0</div>  
  104.                     <div class="number">1</div>  
  105.                     <div class="number">2</div>  
  106.                     <div class="number">3</div>  
  107.                     <div class="number">4</div>  
  108.                     <div class="number">5</div>  
  109.                 </div>  
  110.                 <!-- 分 第二位数字 -->  
  111.                 <div class="strip">  
  112.                     <div class="number">0</div>  
  113.                     <div class="number">1</div>  
  114.                     <div class="number">2</div>  
  115.                     <div class="number">3</div>  
  116.                     <div class="number">4</div>  
  117.                     <div class="number">5</div>  
  118.                     <div class="number">6</div>  
  119.                     <div class="number">7</div>  
  120.                     <div class="number">8</div>  
  121.                     <div class="number">9</div>  
  122.                 </div>  
  123.             </div>  
  124.               
  125.             <!--秒   最大59-->  
  126.             <div class="sec">  
  127.                 <!-- 秒 第一位数字 -->  
  128.                 <div class="strip">  
  129.                     <div class="number">0</div>  
  130.                     <div class="number">1</div>  
  131.                     <div class="number">2</div>  
  132.                     <div class="number">3</div>  
  133.                     <div class="number">4</div>  
  134.                     <div class="number">5</div>  
  135.                 </div>  
  136.                 <!-- 秒 第一位数字 -->  
  137.                 <div class="strip">  
  138.                     <div class="number">0</div>  
  139.                     <div class="number">1</div>  
  140.                     <div class="number">2</div>  
  141.                     <div class="number">3</div>  
  142.                     <div class="number">4</div>  
  143.                     <div class="number">5</div>  
  144.                     <div class="number">6</div>  
  145.                     <div class="number">7</div>  
  146.                     <div class="number">8</div>  
  147.                     <div class="number">9</div>  
  148.                 </div>  
  149.             </div>  
  150.               
  151.         </div>  
  152.           
  153.         <script>  
  154.             // 找到当前所有的strip的列  
  155.             const strips = [...document.querySelectorAll(".strip")];  
  156.             const numberSize = "4";  
  157.             //找到当前数据并添加pop样式类  
  158.             //querySelector是选择,classList.add(类名)是添加CSS央视  
  159.             //setTimeout定时器,通过定时器去修改我们的数组,监听时间950毫秒  
  160.             function highlight(strip, d) {  
  161.                 strips[strip]  
  162.                     .querySelector(`.number:nth-of-type(${d + 1})`)  
  163.                     .classList.add("pop");  
  164.                       
  165.                 setTimeout(() => {  
  166.                     strips[strip]  
  167.                         .querySelector(`.number:nth-of-type(${d + 1})`)  
  168.                         .classList.remove("pop");  
  169.                 }, 950);   
  170.             }  
  171.             //定义一个方法进行截取,并添加一个动画效果  
  172.             //transform:translateY是添加动画效果  
  173.             function stripSlider(strip, number) {  
  174.                 let d1 = Math.floor(number / 10);  
  175.                 let d2 = number % 10;  
  176.       
  177.                 strips[strip].style.transform = `translateY(${d1 * -numberSize}rem)`;  
  178.                 highlight(strip, d1);  
  179.                 strips[strip + 1].style.transform = `translateY(${d2 * -numberSize}rem)`;  
  180.                 highlight(strip + 1, d2);  
  181.             }  
  182.             //获取当前系统时间,并且传递给stripSlider方法  
  183.             setInterval(() => {  
  184.                 const time = new Date();  
  185.                 const hours = time.getHours();  
  186.                 const mins = time.getMinutes();  
  187.                 const secs = time.getSeconds();  
  188.                 stripSlider(0, hours);  
  189.                 stripSlider(2, mins);  
  190.                 stripSlider(4, secs);  
  191.             }, 1000);  
  192.   
  193.   
  194.         </script>  
  195.     </body>  
  196. </html>

转载地址
zhangren.online
上一篇:页面导航和吸顶功能js代码
下一篇:没有了

您可能喜欢

​es6常用数组操作及技巧汇总

​es6常用数组操作及技巧汇总

​jQuery数字字母组合验证码

​jQuery数字字母组合验证码

​如何将自己写的代码上传到github上

​如何将自己写的代码上传到github上

回到顶部