devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

特别的时钟：上次那个时钟布局和计算有问题，重新修改一下，用JS创建180多个li标签，自动生成数字

作者：盐析白兔 | 2024-05-07 09:32:00

赞

踩

特别的时钟：上次那个时钟布局和计算有问题，重新修改一下，用JS创建180多个li标签，自动生成数字

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>特别的时钟</title>
  7. </head>
  8. <style>
  9.     * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.         font-family: 'Poppins', sans-serif;
  14.     }
  15.     /* 首页样式开始 */
  16.     /* CSS单位px、em、rem、vh、vw、vmin、vmax、%的区别：
  17.     vw:1vw 等于视口宽度的1%，Vh:1vh 等于视口高度的1%
  18.     视口宽度：指浏览器窗口的宽度，包括了浏览器的工具栏、地址栏、状态栏等。
  19.     视口高度：指浏览器窗口的高度，包括了浏览器的工具栏、地址栏、状态栏等。
  20.     百分比单位：相对于父元素的宽度或高度的百分比，如：width:50%;height:50%; 就是指父元素的宽度的50%。
  21.     em单位：相对于当前元素的字体大小，如：font-size:1em; 就是指当前元素的字体大小。
  22.     rem单位：相对于根元素html的字体大小，如：font-size:1rem; 就是指html的字体大小。
  23.     vh、vw单位：相对于视口的高度和宽度的百分比，如：height:50vh;width:50vw; 就是指视口的高度的50%。
  24.     vmin、vmax单位：相对于视口的最小高度和最大高度的百分比，如：height:50vmin;width:50vmax; 就是指视口的最小高度的50%。
  25.     注意：vw、vh、vmin、vmax单位在不同的浏览器下可能有不同的效果，建议使用em、rem单位。 */
  26.     .home_page {
  27.         position: fixed;
  28.         top: 2%;
  29.         left: 20%;
  30.         background-color: #4CAF50;
  31.         color: white;
  32.         border: 1px solid #4CAF50;
  33.         font-size: 20px;
  34.         margin: 20px;
  35.         padding: 2px 5px;
  36.         border-radius: 5px;
  37.         text-decoration: none;
  38.         &:hover {
  39.             background-color: #e4f904;
  40.             color: rgb(245, 5, 5);
  41.         }
  42.     }
  43.     /* 首页样式结束 */
  44.     body {
  45.         background: radial-gradient(at 60% 0%, #5190b0, #235746);
  46.     }
  47.     /*************************特别时钟*******************************/
  48.     .times {
  49.         min-height: 100vh;
  50.     }
  51.     #year {
  52.         font-size: 6rem;
  53.         color: #fed330;
  54.         /*模糊 filter: blur(0.5vw); */
  55.         z-index: 1;
  56.     }
  57.     .main {
  58.         background: #000000;
  59.         position: absolute;
  60.         border-radius: 1vw;
  61.         left: 25vw;
  62.         top: 10vh;
  63.         font-size: 3vw;
  64.         position: absolute;
  65.         color: rgb(252, 4, 4);
  66.         display: flex;
  67.         justify-content: center;
  68.         align-items: center;
  69.         background-image: linear-gradient(to top left,
  70.                 rgba(0, 0, 0, 0.2),
  71.                 rgba(0, 0, 0, 0.2) 30%,
  72.                 rgba(0, 0, 0, 0));
  73.         box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
  74.             inset -4px -4px 5px rgba(0, 0, 0, 0.6);
  75.         border: 0px solid black;
  76.         span {
  77.             width: 4vw;
  78.             height: 90vh;
  79.             border: 2px solid white;
  80.             position: relative;
  81.             border-radius: 1vw 1vw 0 0;
  82.         }
  83.         .wan {
  84.             width: 1vw;
  85.         }
  86.         .wai {
  87.             width: 5vw;
  88.             left: 1vw;
  89.         }
  90.         .wan,
  91.         .wai {
  92.             position: relative;
  93.             top: -6vh;
  94.             border: none;
  95.         }
  96.         span::before {
  97.             /*  直接注释掉这行  content: attr(datatext);就不可以显示时间数字哦 */
  98.             content: attr(datatext);
  99.             position: absolute;
  100.             top: -60px;
  101.             left: 3px;
  102.         }
  103.         span::after {
  104.             content: "";
  105.             position: absolute;
  106.             width: 100%;
  107.             bottom: 0;
  108.             border-radius: 1vw 1vw 0 0;
  109.             /* filter: blur(12px); */
  110.             transition: 1s linear;
  111.             height: var(--s);
  112.             background-image: linear-gradient(to top left,
  113.                     rgba(0, 0, 0, 0.2),
  114.                     rgba(0, 0, 0, 0.2) 30%,
  115.                     rgba(0, 0, 0, 0));
  116.             box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
  117.                 inset -4px -4px 5px rgba(0, 0, 0, 0.6);
  118.             border: 0px solid black;
  119.         }
  120.         #month::after {
  121.             background: #8854d0;
  122.         }
  123.         #day::after {
  124.             background: #3867d6;
  125.         }
  126.         #hour::after {
  127.             background: #20bf6b;
  128.         }
  129.         #min::after {
  130.             background: #d1d8e0;
  131.         }
  132.         #sec::after {
  133.             background: #ff0101;
  134.         }
  135.     }
  136.     /* *  绘制时刻表线 *********************************/
  137.     .list {
  138.         font-size: 1rem;
  139.         position: relative;
  140.         width: 80%;
  141.         height: 100%;
  142.         list-style: none;
  143.         /* padding-inline-start: 0px; */
  144.         display: flex;
  145.         justify-content: space-between;
  146.         flex-direction: column-reverse;
  147.         /* 居中 */
  148.         margin: auto;
  149.         /* 文本居中 */
  150.         text-align: center;
  151.         z-index: 999999;
  152.         counter-reset: num -1;
  153.     }
  154.     .list>li {
  155.         width: 3vw;
  156.         height: 0.2vh;
  157.         background: #000000;
  158.         color: #000000;
  159.         position: relative;
  160.         margin: 0.9vh 0 0 0;
  161.     }
  162.     .list>li:before {
  163.         /* counter-increment: num 2; */
  164.         counter-increment: num 1;
  165.         content: counter(num);
  166.         position: relative;
  167.         top: 0vh;
  168.         left: 0vw;
  169.         /* content: '01'; */
  170.         /* 个位补零 */
  171.         content: counter(num, decimal-leading-zero);
  172.         /* transform: translate(1vh, 5vh);  */
  173.     }
  174. #hour-list li:before {
  175.    top: 2vh;
  176. }
  177.     /* *  绘制时刻表线 ***********结束**********************/
  178. </style>
  179. <body>
  180.     <!-- --------------特别的时钟----------------------------- -->
  181.     <div class="times">
  182.         <a href="file:///C:\Users\90917\Desktop\备忘录.html" class="home_page">首页</a>
  183.         <div id="year">
  184.             nan
  185.         </div>
  186.         <div class="main">
  187.             <span id="month" class="rile">
  188.                 <ul id="month-list" class="list "></ul>
  189.             </span>
  190.             <span class="wai">月</span>
  191.             <span id="day" class="rile">
  192.                 <ul id="day-list" class="list "></ul>
  193.             </span>
  194.             <span class="wai">日</span>
  195.             <span id="hour" class="rile">
  196.                 <ul id="hour-list" class="list "></ul>
  197.             </span>
  198.             <span class="wan">:</span>
  199.             <span id="min" class="rile">
  200.                 <ul id="min-list" class="list "></ul>
  201.             </span>
  202.             <span class="wan">:</span>
  203.             <span id="sec" class="rile">
  204.                 <ul id="sec-list" class="list "></ul>
  205.             </span>
  206.         </div>
  207.     </div>
  208.     <!-- ---------------特别的时钟---结束-------------------------- -->
  209. </body>
  210. <script>
  211.     /*************************特别的时钟*******************************/
  212.     var monbox = document.getElementById("month")
  213.     var daybox = document.getElementById("day")
  214.     var hourbox = document.getElementById("hour")
  215.     var minbox = document.getElementById("min")
  216.     var secbox = document.getElementById("sec")
  217.     var yeardiv = document.getElementById("year")
  218.     var count = 0
  219.     function clock() {
  220.         var d = new Date()
  221.         var mon = d.getMonth()
  222.         var day = d.getDate()
  223.         var hour = d.getHours()
  224.         var min = d.getMinutes()
  225.         var sec = d.getSeconds()
  226.         var year = d.getFullYear()
  227.         // console.log(mon, day, hour, min, sec, year)
  228.         var W = "星期" + "日一二三四五六".charAt(new Date().getDay());
  229.         monbox.style.setProperty('--s', String((mon + 1) / 12 * 100) + '%') //生成填充背景颜色的比例
  230.         monbox.setAttribute('datatext', ("0" + (mon + 1)).slice(-2)) //生成时间日期的具体文字，个位的数字在前面补0
  231.         var allday = new Date(year, mon + 1, 0).getDate() //计算当前月份有多少天（28，29，30，31）
  232.         daybox.style.setProperty('--s', String(day / allday * 100) + '%')
  233.         daybox.setAttribute('datatext', ("0" + (day)).slice(-2))
  234.         hourbox.style.setProperty('--s', String(hour / 24 * 100) + '%')
  235.         // console.log(hour)
  236.         hourbox.setAttribute('datatext', ("0" + (hour)).slice(-2))
  237.         // minbox.style.setProperty('--s', String((min + 1) / 60 * 100) + '%')
  238.         minbox.style.setProperty('--s', String(min / 60 * 100) + '%')
  239.         minbox.setAttribute('datatext', ("0" + (min)).slice(-2))
  240.         secbox.style.setProperty('--s', String((sec + 1) / 60 * 100) + '%')
  241.         secbox.setAttribute('datatext', ("0" + (sec)).slice(-2))
  242.         yeardiv.innerText = year + '年' + '\n' + '(' + W + ')'// 计算年份数字
  243.     }
  244.     setInterval(clock, 100)
  245.     /*************************特别的时钟**结束*****************************/
  246.     /* *  绘制时刻表线 */
  247.     // 定义13个li元素 月份
  248.     var monthul = document.getElementById('month-list');
  249.     for (var i = 0; i < 13; i++) {
  250.         var li = document.createElement('li');
  251.         monthul.appendChild(li);
  252.     }
  253.     //定义24个li元素 for24小时
  254.     var hourul = document.getElementById('hour-list');
  255.     for (var i = 0; i < 24; i++) {
  256.         var li = document.createElement('li');
  257.         hourul.appendChild(li);
  258.     }
  259.     // 定义60个li元素 for 60分钟 60秒
  260.     var liArr = [];
  261.     var liArr1 = [];
  262.     for (var i = 0; i < 60; i++) {
  263.         var li = document.createElement('li');
  264.         var li1 = document.createElement('li');
  265.         liArr.push(li);
  266.         liArr1.push(li1);
  267.     }
  268.     // 将liArr中的元素添加到ul中
  269.     var ul1 = document.getElementById('min-list');
  270.     for (var i = 0; i < liArr1.length; i++) {
  271.         ul1.appendChild(liArr1[i]);
  272.     }
  273.     var ul = document.getElementById('sec-list');
  274.     for (var i = 0; i < liArr.length; i++) {
  275.         ul.appendChild(liArr[i]);
  276.     }
  277.     /*    // 定义allday个li元素 for allday天 //计算当前月份有多少天（28，29，30，31）
  278.      var dayul = document.getElementById('day-list');
  279.         var allday = new Date(2024, 4, 0).getDate() 
  280.         for (var i = 0; i < allday + 1; i++) {
  281.             var li = document.createElement('li');
  282.             dayul.appendChild(li);
  283.         } */
  284.     function createDayList(ulId, year, month) {
  285.         var dayUl = document.getElementById(ulId);
  286.         var allDays = new Date(year, month, 0).getDate();
  287.         for (var i = 0; i < allDays + 1; i++) {
  288.             var li = document.createElement('li');
  289.             dayUl.appendChild(li);
  290.         }
  291.     }
  292.     createDayList('day-list', 2024, 4);
  293. </script>
  294. </html>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/548483
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号