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) { // Firefox
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { // IE/Edge
elem.msRequestFullscreen();
}
}
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.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;
}
};
// 保存数据到localStorage
function 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>
