devbox
在线问答5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS优化了4个自定义倒计时

作者：在线问答5 | 2024-08-05 11:52:54

赞

踩

JS优化了4个自定义倒计时

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>4个自定义倒计时</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.             user-select: none;
  13.  
  14.             body {
  15.                 background: #0b1b2c;
  16.             }
  17.         }
  18.  
  19.         header {
  20.             width: 100vw;
  21.             height: 40px;
  22.             display: flex;
  23.             justify-content: space-between;
  24.             align-items: center;
  25.             background-color: #cbcbcb;
  26.  
  27.             /* logo */
  28.             figure.logo {
  29.                 width: 262px;
  30.                 height: 50px;
  31.                 /* 缩小 */
  32.                 transform: scale(0.8);
  33.                 margin-top: 2px;
  34.                 margin-left: -15px;
  35.                 border-radius: 50%;
  36.                 background: #f30303;
  37.                 box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
  38.                     inset -4px -4px 5px rgba(0, 0, 0, 0.6);
  39.                 z-index: 99;
  40.  
  41.                 figcaption {
  42.                     background: hsl(0, 0%, 0%);
  43.                     background-clip: text;
  44.                     -webkit-background-clip: text;
  45.                     -webkit-text-fill-color: transparent;
  46.                     font-weight: bold;
  47.                     box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
  48.                     letter-spacing: -3px;
  49.                     line-height: 45px;
  50.                     border-radius: 50%;
  51.                     font-size: 40px;
  52.                     width: 152px;
  53.                 }
  54.  
  55.                 .my_name1 {
  56.                     text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
  57.                     clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
  58.                     transform: translate(35%, 0%);
  59.                 }
  60.  
  61.                 .my_name2 {
  62.                     text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
  63.                     clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
  64.                     transform: translate(35%, -93%);
  65.                 }
  66.  
  67.                 img {
  68.                     width: 60px;
  69.                     height: 35px;
  70.                     border-radius: 50%;
  71.                     transition: transform 0.3s ease;
  72.                     position: absolute;
  73.  
  74.                     &:hover {
  75.                         transform: scale(1.3);
  76.                         filter: drop-shadow(0 0 0.3em #ff0202);
  77.                     }
  78.                 }
  79.  
  80.                 .kong {
  81.                     margin-top: 7px;
  82.                     margin-left: 200px;
  83.                 }
  84.  
  85.                 .ying {
  86.                     top: 7px;
  87.                     margin-left: 2px;
  88.                 }
  89.             }
  90.  
  91.             /* 时间 */
  92.             time {
  93.                 background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
  94.                 background-clip: text;
  95.                 -webkit-background-clip: text;
  96.                 -webkit-text-fill-color: transparent;
  97.                 font-size: 1.5rem;
  98.                 font-weight: 900;
  99.                 text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
  100.  
  101.                 sub {
  102.                     -webkit-text-fill-color: #cfd601;
  103.                     text-shadow: 1px 1px 1px #100000;
  104.                     font-size: 1rem;
  105.                 }
  106.             }
  107.  
  108.             /* 全屏还原关闭按钮 */
  109.             menu {
  110.                 display: flex;
  111.  
  112.                 button {
  113.                     background: none;
  114.                     border: none;
  115.                 }
  116.  
  117.                 img {
  118.                     width: 35px;
  119.                     margin-top: 5px;
  120.                     margin-right: 5px;
  121.                     cursor: pointer;
  122.  
  123.                     &:hover {
  124.                         transform: scale(1.2);
  125.                         padding: 5px;
  126.                         background: #ffd000;
  127.                     }
  128.                 }
  129.  
  130.                 button:nth-child(2) {
  131.                     display: none;
  132.                     /* 放大镜效果 */
  133.                     transform: scale(1.16);
  134.                 }
  135.             }
  136.         }
  137.  
  138.         main {
  139.             display: flex;
  140.             flex-direction: column;
  141.             align-items: center;
  142.  
  143.             button {
  144.                 font-size: 1.5rem;
  145.                 color: #d6d301;
  146.                 text-shadow: 1px 1px 1px #100000;
  147.                 font-weight: bold;
  148.                 cursor: pointer;
  149.                 border-radius: 3px;
  150.                 background-color: #f30303;
  151.                 border: none;
  152.                 margin: 5px;
  153.                 padding: 3px;
  154.             }
  155.  
  156.             dialog {
  157.                 transform: translate(180%, 80%);
  158.             }
  159.  
  160.             dialog::backdrop {
  161.                 /* 模糊背景 */
  162.                 backdrop-filter: blur(2px);
  163.             }
  164.  
  165.             div {
  166.                 margin-top: 20px;
  167.                 color: #67c23a;
  168.                 text-shadow: 1px 1px 1px #100000;
  169.             }
  170.         }
  171.     </style>
  172. </head>
  173.  
  174. <body>
  175.     <header>
  176.         <!-- logo -->
  177.         <figure class="logo">
  178.             <a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" target="_blank">
  179.                 <img class="kong" src="file:///D:/img/icon.ico" alt="与妖为邻">
  180.             </a>
  181.             <figcaption class="my_name1">与妖为邻</figcaption>
  182.             <figcaption class="my_name2">与妖为邻</figcaption>
  183.             <a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" class="home_page"
  184.                 title="首页" target="_blank">
  185.                 <img class="ying" src="file:///D:/img/ying.png" alt="与妖为邻">
  186.             </a>
  187.         </figure>
  188.         <!-- 时间 -->
  189.         <time datetime="2024-07-10" title="2024-07-10" id="dateTime">2024-07-10</time>
  190.         <!-- 天气 -->
  191.         <iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"
  192.             src="https://i.tianqi.com/?c=code&id=99">
  193.         </iframe>
  194.         <!-- 全屏还原关闭按钮 -->
  195.         <menu>
  196.             <button class="fullScreen" type="button"><img src="file:///D:/img/全屏.svg" alt="全屏"
  197.                     onclick="fullScreen()"></button>
  198.             <button class="exitFullScreen" type="button"><img src="file:///D:/img/还原.svg" alt="还原"
  199.                     onclick="exitFullScreen()"></button>
  200.             <button type="button"><img src="file:///D:/img/关闭.svg" alt="关闭" onclick="closeAll()"> </button>
  201.         </menu>
  202.     </header>
  203.     <main id="countdownContainer">
  204.         <div>
  205.             <h2>2025主要节日时间表</h2>
  206.             <ul>
  207.                 <li>元旦：2025年1月1日</li>
  208.                 <li>春节：2025年2月12日</li>
  209.                 <li>清明节：2025年4月4日</li>
  210.                 <li>劳动节：2025年5月1日</li>
  211.                 <li>端午节：2025年6月2日</li>
  212.                 <li>中秋节：2025年9月21日</li>
  213.                 <li>国庆节：2025年10月1日</li>
  214.             </ul>
  215.         </div>
  216.     </main>
  217. </body>
  218. <script>
  219.     /* 现在时间*/
  220.     var current_time = document.getElementById("dateTime");
  221.     function showTime() {
  222.         var now = new Date();
  223.         var year = now.getFullYear();
  224.         var month = ("0" + (now.getMonth() + 1)).slice(-2);
  225.         var day = ("0" + now.getDate()).slice(-2);
  226.         var hour = ("0" + now.getHours()).slice(-2);
  227.         var min = ("0" + now.getMinutes()).slice(-2);
  228.         var second = ("0" + now.getSeconds()).slice(-2);
  229.         var week = [
  230.             "星期日",
  231.             "星期一",
  232.             "星期二",
  233.             "星期三",
  234.             "星期四",
  235.             "星期五",
  236.             "星期六",
  237.         ][now.getDay()];
  238.         var time = `${year}-${month}-${day}<sub id='sub'>${week}</sub> ${hour}:${min}:${second}`;
  239.         current_time.innerHTML = time;
  240.     }
  241.     showTime();
  242.     setInterval(showTime, 1000);
  243.     /* 现在时间 结束*/
  244.     /* 全屏功能与关闭*/
  245.     function fullScreen() {
  246.         var elem = document.documentElement;
  247.         if (elem.requestFullscreen) {
  248.             elem.requestFullscreen();
  249.         } else if (elem.mozRequestFullScreen) { // Firefox
  250.             elem.mozRequestFullScreen();
  251.         } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
  252.             elem.webkitRequestFullscreen();
  253.         } else if (elem.msRequestFullscreen) { // IE/Edge
  254.             elem.msRequestFullscreen();
  255.         }
  256.     }
  257.     function exitFullScreen() {
  258.         if (document.exitFullscreen) {
  259.             document.exitFullscreen();
  260.         } else if (document.mozCancelFullScreen) { // Firefox
  261.             document.mozCancelFullScreen();
  262.         } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
  263.             document.webkitExitFullscreen();
  264.         } else if (document.msExitFullscreen) { // IE/Edge
  265.             document.msExitFullscreen();
  266.         }
  267.     }
  268.     // 获取全屏和还原按钮
  269.     var fullScreenBtn = document.querySelector(".fullScreen");
  270.     var exitFullScreenBtn = document.querySelector(".exitFullScreen");
  271.     // 监听全屏和还原事件
  272.     document.addEventListener("fullscreenchange", function () {
  273.         if (document.fullscreenElement) {
  274.             fullScreenBtn.style.display = "none";
  275.             exitFullScreenBtn.style.display = "block";
  276.         } else {
  277.             fullScreenBtn.style.display = "block";
  278.             exitFullScreenBtn.style.display = "none";
  279.         }
  280.     });
  281.     // 关闭当前窗口
  282.     function closeAll() {
  283.         window.close();
  284.     }
  285.     /* 全屏功能与关闭 结束*/
  286.     /* 倒计时功能渲染*/
  287.     const countdownContainer = document.getElementById('countdownContainer');
  288.     function createCountdownElement(id) {
  289.         const button = document.createElement('button');
  290.         button.textContent = `第${id}个倒计时`;
  291.         button.id = `countdownElement${id}`;
  292.         button.onclick = () => document.getElementById(`dialogCountdownElement${id}`).showModal();
  293.         const dialog = document.createElement('dialog');
  294.         dialog.id = `dialogCountdownElement${id}`;
  295.         const form = document.createElement('form');
  296.         form.method = 'dialog';
  297.         const messageDiv = document.createElement('div');
  298.         const messageLabel = document.createElement('label');
  299.         messageLabel.textContent = '更改提示信息：';
  300.         messageLabel.htmlFor = `message${id}`;
  301.         const messageInput = document.createElement('input');
  302.         messageInput.type = 'text';
  303.         messageInput.id = `message${id}`;
  304.         messageInput.value = '距离2024年国庆节还有：';
  305.         messageDiv.appendChild(messageLabel);
  306.         messageDiv.appendChild(messageInput);
  307.         const targetDateDiv = document.createElement('div');
  308.         const targetDateLabel = document.createElement('label');
  309.         targetDateLabel.textContent = '更改目标日期：';
  310.         targetDateLabel.htmlFor = `targetDate${id}`;
  311.         const targetDateInput = document.createElement('input');
  312.         targetDateInput.type = 'datetime-local';
  313.         targetDateInput.id = `targetDate${id}`;
  314.         targetDateDiv.appendChild(targetDateLabel);
  315.         targetDateDiv.appendChild(targetDateInput);
  316.         const closeButton = document.createElement('button');
  317.         closeButton.type = 'submit';
  318.         closeButton.textContent = '关闭';
  319.         closeButton.style.display = 'block';
  320.         closeButton.style.margin = '5px auto';
  321.         form.appendChild(messageDiv);
  322.         form.appendChild(targetDateDiv);
  323.         form.appendChild(closeButton);
  324.         dialog.appendChild(form);
  325.         countdownContainer.appendChild(button);
  326.         countdownContainer.appendChild(dialog);
  327.     }
  328.     for (let i = 1; i <= 4; i++) {
  329.         createCountdownElement(i);
  330.     }
  331.     /* 倒计时功能渲染 结束*/
  332.     /* 倒计时功能实现*/
  333.     const countdownData = {
  334.         1: { message: 'message1', targetDate: 'targetDate1' },
  335.         2: { message: 'message2', targetDate: 'targetDate2' },
  336.         3: { message: 'message3', targetDate: 'targetDate3' },
  337.         4: { message: 'message4', targetDate: 'targetDate4' }
  338.     };
  339.     // 加载时从localStorage读取数据
  340.     window.onload = function () {
  341.         for (let id in countdownData) {
  342.             const message = localStorage.getItem(countdownData[id].message);
  343.             const targetDate = localStorage.getItem(countdownData[id].targetDate);
  344.             if (message) {
  345.                 document.getElementById(countdownData[id].message).value = message;
  346.             }
  347.             if (targetDate) {
  348.                 document.getElementById(countdownData[id].targetDate).value = targetDate;
  349.             }
  350.         }
  351.     };
  352.     // 保存数据到localStorage
  353.     function saveData(id) {
  354.         const message = document.getElementById(countdownData[id].message).value;
  355.         const targetDate = document.getElementById(countdownData[id].targetDate).value;
  356.         localStorage.setItem(countdownData[id].message, message);
  357.         localStorage.setItem(countdownData[id].targetDate, targetDate);
  358.     }
  359.     // 监听输入框的变化并保存数据
  360.     for (let id in countdownData) {
  361.         document.getElementById(countdownData[id].message).addEventListener('input', () => saveData(id));
  362.         document.getElementById(countdownData[id].targetDate).addEventListener('input', () => saveData(id));
  363.     }
  364.     function showCountdown(id) {
  365.         const message = document.getElementById(countdownData[id].message).value;
  366.         const targetDateInput = document.getElementById(countdownData[id].targetDate);
  367.         const targetDateValue = targetDateInput.value;
  368.         const now = new Date();
  369.         let targetDate;
  370.         if (targetDateValue) {
  371.             targetDate = new Date(targetDateValue);
  372.         } else {
  373.             targetDate = new Date(2024, 9, 1); // 默认值：2024年10月1日
  374.         }
  375.         const diff = targetDate - now;
  376.         const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  377.         const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  378.         const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  379.         const seconds = Math.floor((diff % (1000 * 60)) / 1000);
  380.         const countdownElement = document.getElementById(`countdownElement${id}`);
  381.         countdownElement.innerHTML = `${message}${days}天${hours}小时${minutes}分${seconds}秒`;
  382.     }
  383.     for (let id in countdownData) {
  384.         showCountdown(id);
  385.         setInterval(() => showCountdown(id), 1000);
  386.     }
  387.     /* 倒计时功能实现 结束*/
  388. </script>
  389.  
  390. </html>

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

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

  

闽ICP备14008679号