htmledit_views">
html"><!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>4个自定义倒计时</title><style>* {margin: 0;padding: 0;box-sizing: border-box;user-select: none;body {background: #0b1b2c;}}header {width: 100vw;height: 40px;display: flex;justify-content: space-between;align-items: center;background-color: #cbcbcb;/* logo */figure.logo {width: 262px;height: 50px;/* 缩小 */transform: scale(0.8);margin-top: 2px;margin-left: -15px;border-radius: 50%;background: #f30303;box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),inset -4px -4px 5px rgba(0, 0, 0, 0.6);z-index: 99;figcaption {background: hsl(0, 0%, 0%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: bold;box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);letter-spacing: -3px;line-height: 45px;border-radius: 50%;font-size: 40px;width: 152px;}.my_name1 {text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);transform: translate(35%, 0%);}.my_name2 {text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);transform: translate(35%, -93%);}img {width: 60px;height: 35px;border-radius: 50%;transition: transform 0.3s ease;position: absolute;&:hover {transform: scale(1.3);filter: drop-shadow(0 0 0.3em #ff0202);}}.kong {margin-top: 7px;margin-left: 200px;}.ying {top: 7px;margin-left: 2px;}}/* 时间 */time {background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 1.5rem;font-weight: 900;text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);sub {-webkit-text-fill-color: #cfd601;text-shadow: 1px 1px 1px #100000;font-size: 1rem;}}/* 全屏还原关闭按钮 */menu {display: flex;button {background: none;border: none;}img {width: 35px;margin-top: 5px;margin-right: 5px;cursor: pointer;&:hover {transform: scale(1.2);padding: 5px;background: #ffd000;}}button:nth-child(2) {display: none;/* 放大镜效果 */transform: scale(1.16);}}}main {display: flex;flex-direction: column;align-items: center;button {font-size: 1.5rem;color: #d6d301;text-shadow: 1px 1px 1px #100000;font-weight: bold;cursor: pointer; border-radius: 3px;background-color: #f30303;border: none;margin: 5px;padding: 3px;}dialog {transform: translate(180%, 80%);z-index: 999;}div {margin-top: 20px;color: #67c23a;text-shadow: 1px 1px 1px #100000;}}</style>
</head><body><header><!-- logo --><figure class="logo"><a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" target="_blank"><img class="kong" src="file:///D:/img/icon.ico" alt="与妖为邻"></a><figcaption class="my_name1">与妖为邻</figcaption><figcaption class="my_name2">与妖为邻</figcaption><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"title="首页" target="_blank"><img class="ying" src="file:///D:/img/ying.png" alt="与妖为邻"></a></figure><!-- 时间 --><time datetime="2024-07-10" title="2024-07-10" id="dateTime">2024-07-10</time><!-- 天气 --><iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"src="https://i.tianqi.com/?c=code&id=99"></iframe><!-- 全屏还原关闭按钮 --><menu><button class="fullScreen" type="button"><img src="file:///D:/img/全屏.svg" alt="全屏"onclick="fullScreen()"></button><button class="exitFullScreen" type="button"><img src="file:///D:/img/还原.svg" alt="还原"onclick="exitFullScreen()"></button><button type="button"><img src="file:///D:/img/关闭.svg" alt="关闭" onclick="closeAll()"> </button></menu></header><main><!-- 第一个倒计时 --><button onclick="dialogCountdownElement1.showModal()" id="countdownElement1">第一个倒计时</button><dialog id="dialogCountdownElement1"><form method="dialog"><div><label for="message1">更改提示信息：</label><input type="text" id="message1" value="距离2024年国庆节还有："></div><div><label for="targetDate1">更改目标日期：</label><input type="datetime-local" id="targetDate1"></div><button type="submit" style="display: block; margin: 5px auto;">关闭</button></form></dialog><!-- 第二个倒计时 --><button onclick="dialogCountdownElement2.showModal()" id="countdownElement2">第二个倒计时</button><dialog id="dialogCountdownElement2"><form method="dialog"><div><label for="message2">更改提示信息：</label><input type="text" id="message2" value="距离2024年国庆节还有："></div><div><label for="targetDate2">更改目标日期：</label><input type="datetime-local" id="targetDate2"></div><button type="submit" style="display: block; margin: 5px auto;">关闭</button></form></dialog><!-- 第三个倒计时 --><button onclick="dialogCountdownElement3.showModal()" id="countdownElement3">第三个倒计时</button><dialog id="dialogCountdownElement3"><form method="dialog"><div><label for="message3">更改提示信息：</label><input type="text" id="message3" value="距离2024年国庆节还有："></div><div><label for="targetDate3">更改目标日期：</label><input type="datetime-local" id="targetDate3"></div><button type="submit" style="display: block; margin: 5px auto;">关闭</button></form></dialog><!-- 第四个倒计时 --><button onclick="dialogCountdownElement4.showModal()" id="countdownElement4">第四个倒计时</button><dialog id="dialogCountdownElement4"><form method="dialog"><div><label for="message4">更改提示信息：</label><input type="text" id="message4" value="距离2024年国庆节还有："></div><div><label for="targetDate4">更改目标日期：</label><input type="datetime-local" id="targetDate4"></div><button type="submit" style="display: block; margin: 5px auto;">关闭</button></form></dialog><div><h2>2025主要节日时间表</h2><ul><li>元旦：2025年1月1日</li><li>春节：2025年2月12日</li><li>清明节：2025年4月4日</li><li>劳动节：2025年5月1日</li><li>端午节：2025年6月2日</li><li>中秋节：2025年9月21日</li><li>国庆节：2025年10月1日</li></ul></div></main><script>/* 现在时间*/var current_time = document.getElementById("dateTime");function showTime() {var now = new Date();var year = now.getFullYear();var month = ("0" + (now.getMonth() + 1)).slice(-2);var day = ("0" + now.getDate()).slice(-2);var hour = ("0" + now.getHours()).slice(-2);var min = ("0" + now.getMinutes()).slice(-2);var second = ("0" + now.getSeconds()).slice(-2);var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六",][now.getDay()];var time = `${year}-${month}-${day}<sub id='sub'>${week}</sub> ${hour}:${min}:${second}`;current_time.innerHTML = time;}showTime();setInterval(showTime, 1000);/* 现在时间 结束*//* 全屏功能与关闭*/function fullScreen() {var elem = document.documentElement;if (elem.requestFullscreen) {elem.requestFullscreen();} else if (elem.mozRequestFullScreen) { // Firefoxelem.mozRequestFullScreen();} else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Operaelem.webkitRequestFullscreen();} else if (elem.msRequestFullscreen) { // IE/Edgeelem.msRequestFullscreen();}}function exitFullScreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) { // Firefoxdocument.mozCancelFullScreen();} else if (document.webkitExitFullscreen) { // Chrome, Safari and Operadocument.webkitExitFullscreen();} else if (document.msExitFullscreen) { // IE/Edgedocument.msExitFullscreen();}}// 获取全屏和还原按钮var fullScreenBtn = document.querySelector(".fullScreen");var exitFullScreenBtn = document.querySelector(".exitFullScreen");// 监听全屏和还原事件document.addEventListener("fullscreenchange", function () {if (document.fullscreenElement) {fullScreenBtn.style.display = "none";exitFullScreenBtn.style.display = "block";} else {fullScreenBtn.style.display = "block";exitFullScreenBtn.style.display = "none";}});// 关闭当前窗口function closeAll() {window.close();}/* 全屏功能与关闭 结束*//* 倒计时功能实现*/// 加载时从localStorage读取数据window.onload = function () {var message1 = localStorage.getItem('message1');var targetDate1 = localStorage.getItem('targetDate1');var message2 = localStorage.getItem('message2');var targetDate2 = localStorage.getItem('targetDate2');var message3 = localStorage.getItem('message3');var targetDate3 = localStorage.getItem('targetDate3');var message4 = localStorage.getItem('message4');var targetDate4 = localStorage.getItem('targetDate4');if (message1) {document.getElementById('message1').value = message1;}if (targetDate1) {document.getElementById('targetDate1').value = targetDate1;}if (message2) {document.getElementById('message2').value = message2;}if (targetDate2) {document.getElementById('targetDate2').value = targetDate2;}if (message3) {document.getElementById('message3').value = message3;}if (targetDate3) {document.getElementById('targetDate3').value = targetDate3;}if (message4) {document.getElementById('message4').value = message4;}if (targetDate4) {document.getElementById('targetDate4').value = targetDate4;}};// 保存数据到localStoragefunction saveData1() {var message1 = document.getElementById('message1').value;var targetDate1 = document.getElementById('targetDate1').value;localStorage.setItem('message1', message1);localStorage.setItem('targetDate1', targetDate1);}function saveData2() {var message2 = document.getElementById('message2').value;var targetDate2 = document.getElementById('targetDate2').value;localStorage.setItem('message2', message2);localStorage.setItem('targetDate2', targetDate2);}function saveData3() {var message3 = document.getElementById('message3').value;var targetDate3 = document.getElementById('targetDate3').value;localStorage.setItem('message3', message3);localStorage.setItem('targetDate3', targetDate3);}function saveData4() {var message4 = document.getElementById('message4').value;var targetDate4 = document.getElementById('targetDate4').value;localStorage.setItem('message4', message4);localStorage.setItem('targetDate4', targetDate4);}// 监听输入框的变化并保存数据document.getElementById('message1').addEventListener('input', saveData1);document.getElementById('targetDate1').addEventListener('input', saveData1);document.getElementById('message2').addEventListener('input', saveData2);document.getElementById('targetDate2').addEventListener('input', saveData2);document.getElementById('message3').addEventListener('input', saveData3);document.getElementById('targetDate3').addEventListener('input', saveData3);document.getElementById('message4').addEventListener('input', saveData4);document.getElementById('targetDate4').addEventListener('input', saveData4);function showCountdown1() {var message1 = document.getElementById('message1').value;var targetDateInput1 = document.getElementById('targetDate1');var targetDateValue1 = targetDateInput1.value;var now = new Date();var targetDate1;if (targetDateValue1) {targetDate1 = new Date(targetDateValue1);} else {targetDate1 = new Date(2024, 9, 1); // 默认值：2024年10月1日}var diff1 = targetDate1 - now;var days1 = Math.floor(diff1 / (1000 * 60 * 60 * 24));var hours1 = Math.floor((diff1 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes1 = Math.floor((diff1 % (1000 * 60 * 60)) / (1000 * 60));var seconds1 = Math.floor((diff1 % (1000 * 60)) / 1000);var countdownElement1 = document.getElementById('countdownElement1');countdownElement1.innerHTML = `${message1}${days1}天${hours1}小时${minutes1}分${seconds1}秒`;}function showCountdown2() {var message2 = document.getElementById('message2').value;var targetDateInput2 = document.getElementById('targetDate2');var targetDateValue2 = targetDateInput2.value;var now = new Date();var targetDate2;if (targetDateValue2) {targetDate2 = new Date(targetDateValue2);} else {targetDate2 = new Date(2024, 9, 1); // 默认值：2024年10月1日}var diff2 = targetDate2 - now;var days2 = Math.floor(diff2 / (1000 * 60 * 60 * 24));var hours2 = Math.floor((diff2 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes2 = Math.floor((diff2 % (1000 * 60 * 60)) / (1000 * 60));var seconds2 = Math.floor((diff2 % (1000 * 60)) / 1000);var countdownElement2 = document.getElementById('countdownElement2');countdownElement2.innerHTML = `${message2}${days2}天${hours2}小时${minutes2}分${seconds2}秒`;}function showCountdown3() {var message3 = document.getElementById('message3').value;var targetDateInput3 = document.getElementById('targetDate3');var targetDateValue3 = targetDateInput3.value;var now = new Date();var targetDate3;if (targetDateValue3) {targetDate3 = new Date(targetDateValue3);} else {targetDate3 = new Date(2024, 9, 1); // 默认值：2024年10月1日}var diff3 = targetDate3 - now;var days3 = Math.floor(diff3 / (1000 * 60 * 60 * 24));var hours3 = Math.floor((diff3 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes3 = Math.floor((diff3 % (1000 * 60 * 60)) / (1000 * 60));var seconds3 = Math.floor((diff3 % (1000 * 60)) / 1000);var countdownElement3 = document.getElementById('countdownElement3');countdownElement3.innerHTML = `${message3}${days3}天${hours3}小时${minutes3}分${seconds3}秒`;}function showCountdown4() {var message4 = document.getElementById('message4').value;var targetDateInput4 = document.getElementById('targetDate4');var targetDateValue4 = targetDateInput4.value;var now = new Date();var targetDate4;if (targetDateValue4) {targetDate4 = new Date(targetDateValue4);} else {targetDate4 = new Date(2024, 9, 1); // 默认值：2024年10月1日}var diff4 = targetDate4 - now;var days4 = Math.floor(diff4 / (1000 * 60 * 60 * 24));var hours4 = Math.floor((diff4 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes4 = Math.floor((diff4 % (1000 * 60 * 60)) / (1000 * 60));var seconds4 = Math.floor((diff4 % (1000 * 60)) / 1000);var countdownElement4 = document.getElementById('countdownElement4');countdownElement4.innerHTML = `${message4}${days4}天${hours4}小时${minutes4}分${seconds4}秒`;}showCountdown1();setInterval(showCountdown1, 1000);showCountdown2();setInterval(showCountdown2, 1000);showCountdown3();setInterval(showCountdown3, 1000);showCountdown4();setInterval(showCountdown4, 1000);/* 倒计时功能实现 结束*/</script>
</body></html>
