html+js实现倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<title>倒计时</title>
<html>
<head>
</head>
<body>
<div class="container">
<form>
<input type="date" id="date-picker" name="date-picker">
</form>
<div class="countdown-container">
<div class="countdown-row">
<div class="countdown-block" id="countdownBlockDays">
<span id="days"></span>
<span>天</span>
</div>
<div class="countdown-block" id="countdownBlockHours">
<span id="hours"></span>
<span>时</span>
</div>
<div class="countdown-block" id="countdownBlockMinutes">
<span id="minutes"></span>
<span>分</span>
</div>
<div class="countdown-block" id="countdownBlockSeconds">
<span id="seconds"></span>
<span>秒</span>
</div>
</div>
</div>
</div>
</body>
<script>
var datePicker = document.getElementById("date-picker");
var countdownBlockDays = document.getElementById("countdownBlockDays");
var countdownBlockHours = document.getElementById("countdownBlockHours");
var countdownBlockMinutes = document.getElementById("countdownBlockMinutes");
var countdownBlockSeconds = document.getElementById("countdownBlockSeconds");
var x = setInterval(function () {
var now = new Date().getTime();
var countDownDate = new Date(datePicker.value).getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));//
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
countdownBlockDays.innerHTML = days;
countdownBlockHours.innerHTML = hours;
countdownBlockMinutes.innerHTML = minutes;
countdownBlockSeconds.innerHTML = seconds;
if (distance < 0) {
clearInterval(x);
countdownBlockDays.innerHTML = "0";
countdownBlockHours.innerHTML = "0";
countdownBlockMinutes.innerHTML = "0";
countdownBlockSeconds.innerHTML = "0";
}
}, 1000);
</script>
</html>
加个css
<style>
body {
background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: sans-serif;
font-weight: 300;
letter-spacing: 0.08rem;
}
.container {
background-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
border-radius: 30px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
label {
font-size: 2rem;
font-weight: bold;
margin-bottom: 10px;
color: rgb(0, 0, 0);
}
input[type="date"] {
width: 250px;
font-size: 2rem;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
box-sizing: border-box;
}
.countdown-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: black;
}
.countdown-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.countdown-block {
background-color: rgba(255, 255, 255, 0.7);
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
font-size: 3em;
font-weight: bold;
margin: 0 20px;
padding: 20px;
text-align: center;
width: 15%;
position: relative;
}
.countdown-block:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background-color: blue;
transform: translateY(-50%);
}
.countdown-block span {
position: absolute;
bottom: -40px;
left: 0;
right: 0;
font-size: 0.5em;
color: gray;
text-align: center;
}
.countdown-label {
font-size: 0.5em;
font-weight: bold;
margin-top: 10px;
text-align: center;
text-transform: uppercase;
}
.countdown-label {
font-size: 0.5em;
font-weight: bold;
margin-top: 10px;
text-align: center;
text-transform: uppercase;
}
</style>