经典回顾倒计时
倒计时的基本布局介绍。
一个内容区域和一个输入区域，内容区域进行划分
直接使用flex布局会更快一点。
js代码
我们利用一下模块化思想，直接把获得时间这个功能写成一个函数。方便后续的调用
function getTime() {
const date = new Date()
return `今年是${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`
}
document.querySelector('.contain-top').innerHTML = getTime()
然后将输入框中的事件给加载进去，注意格式的划分。使用基本的时间算法
const input = document.querySelector('input')
function dateChat() {
const nowdate = +new Date()
let enddate = +new Date()
let time = 0
const date1 = new Date()
enddate = +new Date(`${date1.getFullYear()}-${date1.getMonth()+1}-${date1.getDate()} ${input.value}`)
time = (enddate - nowdate) / 1000
let h = parseInt(time / 60 / 60 % 24)
h = h < 10 ? '0 ' + h : h + " "
let m = parseInt(time / 60 % 60)
m = m < 10 ? '0 ' + m : m + " "
let s = parseInt(time % 60)
s = s < 10 ? '0' + s : s
document.querySelector('.hour').innerHTML = h
document.querySelector('.min').innerHTML = m
document.querySelector('.second').innerHTML = s
}
设置回车监听和按钮监听
input.addEventListener('keyup', function (e) {
if (e.key === 'Enter') {
if (input.value.length > 8) {
alert('输入有误')
} else {
document.querySelector('.timeout').innerHTML = input.value
dateChat()
setInterval(dateChat, 1000)
}
}
})
const button = document.querySelector('button')
button.addEventListener('click', function () {
if (input.value.length > 8) {
alert('输入有误')
} else {
document.querySelector('.timeout').innerHTML = input.value
dateChat()
setInterval(dateChat, 1000)
}
})
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.contain {
width: 300px;
height: 300px;
background-color: rgb(174, 10, 42);
margin: 0 auto;
}
.contain-top {
text-align: center;
color: white;
padding-top: 20px;
margin-bottom: 20px;
}
.font {
text-align: center;
color: white;
font-size: 25px;
}
.contain-middle-time {
display: flex;
justify-content: center;
}
.contain-middle-time div {
text-align: center;
margin-top: 40px;
width: 40px;
line-height: 40px;
height: 40px;
color: white;
background-color: rgb(50, 44, 44);
border-radius: 5px;
}
.contain-middle-time .word {
width: 20px;
height: 20px;
color: white;
background-color: rgb(174, 10, 42);
}
.timeout {
margin-top: 60px;
font-size: 20px;
color: white;
text-align: center;
}
.timeout::after {
content: "下课";
}
.timechoice {
margin-top: 10px;
text-align: center;
}
input {
outline: none;
text-align: center;
width: 100px;
height: 20px;
border: 1px solid black;
border-radius: 3px;
}
button {
background-color: white;
height: 20px;
border: none;
color: black;
border-radius: 2px;
}
button:active {
color: red;
}
</style>
</head>
<body>
<div class="contain">
<div class="contain-top">
今年是2222年2月22日
</div>
<div class="font">
下班倒计时
</div>
<div class="contain-middle-time">
<div class="hour">
12
</div>
<div class="word">:</div>
<div class="min">
12
</div>
<div class="word">:</div>
<div class="second">
12
</div>
</div>
<div class="timeout">
18 : 30 : 00
</div>
</div>
<div class="timechoice">
<input type="text" placeholder="18:00:00">
<button>提交</button>
</div>
<script>
//加载上边的时间
function getTime() {
const date = new Date()
return `今年是${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`
}
document.querySelector('.contain-top').innerHTML = getTime()
// 加载定义的下课时间
const input = document.querySelector('input')
function dateChat() {
const nowdate = +new Date()
let enddate = +new Date()
let time = 0
const date1 = new Date()
enddate = +new Date(`${date1.getFullYear()}-${date1.getMonth()+1}-${date1.getDate()} ${input.value}`)
time = (enddate - nowdate) / 1000
let h = parseInt(time / 60 / 60 % 24)
h = h < 10 ? '0 ' + h : h + " "
let m = parseInt(time / 60 % 60)
m = m < 10 ? '0 ' + m : m + " "
let s = parseInt(time % 60)
s = s < 10 ? '0' + s : s
document.querySelector('.hour').innerHTML = h
document.querySelector('.min').innerHTML = m
document.querySelector('.second').innerHTML = s
}
input.addEventListener('keyup', function (e) {
if (e.key === 'Enter') {
if (input.value.length > 8) {
alert('输入有误')
} else {
document.querySelector('.timeout').innerHTML = input.value
dateChat()
setInterval(dateChat, 1000)
}
}
})
const button = document.querySelector('button')
button.addEventListener('click', function () {
if (input.value.length > 8) {
alert('输入有误')
} else {
document.querySelector('.timeout').innerHTML = input.value
dateChat()
setInterval(dateChat, 1000)
}
})
// 倒计时模块
</script>
</body>
</html>
