先看效果图
开始时间默认为当前时间,结束时间可以选择(默认过年的时间),这里求当前时间到某一段时间段相差多少时间。
话不多说上代码
html代码
<div class="search-package">
<div class="time-package">
<span class="time-span">开始时间</span>
<input type="datetime-local"
disabled
class="date-time"
id="startTime">
</div>
<div class="time-package">
<span class="time-span">结束时间</span>
<input type="datetime-local"
class="date-time"
id="endTime">
</div>
<div id="time"></div>
</div>
css代码
<style>
#time {
width: 300px;
height: 100px;
background-color: rgba(127, 255, 202);
margin: 0 auto 50px;
text-align: center;
line-height: 100px;
border: 1px solid black;
border-radius: 50px;
color: rgb(31, 16, 241);
font-size: 20px;
font-weight: bold;
}
.search-package {
padding: 16px 8px;
text-align: center;
}
.date-time {
width: 198px;
height: 42px;
line-height: 1;
appearance: none;
padding-left: 14px;
font-size: 16px;
color: #525C66;
outline: none;
border-radius: 4%;
}
input[type='datetime-local'] {
position: relative;
}
input[type='datetime-local']::-webkit-calendar-picker-indicator {
position: absolute;
right: 0;
padding-left: calc(100% - 20px);
padding-right: 10px;
}
.time-package {
display: inline-block;
margin: 50px 10px 10px;
border: 1px slateblue solid;
background: #6152661e;
padding: 4px 8px;
border-radius: 2px;
}
.time-span {
color: #1887e2cb;
font-weight: bold;
font-size: 14px;
margin-right: 10px;
}
</style>
js代码
<script>
let timer = document.getElementById('time');
let startTime = document.getElementById('startTime')
let endTime = document.getElementById('endTime')
//设置结束时间默认为过年的时间
endTime.value = '2023-01-22 00:00:00';
setInterval(() => {
//设置开始时间默认为当前时间
startTime.value = getDayTime();
dateTimes();
})
//封装时间的函数
function dateTimes() {
let start = startTime.value
document.getElementById('spanId').innerText = start
let end = endTime.value
//获取当前时间
const today = new Date(start.replace(/-/g, '/').replace('T', ' '));
document.getElementById('spanId2').innerText = today
//获取过年时间
const newYear = new Date(end.replace(/-/g, '/').replace('T', ' '));
//相差时间
let diffTime = newYear.getTime() - today.getTime();
const day = Math.floor(diffTime / (1000 * 60 * 60 * 24))
diffTime = diffTime % (1000 * 60 * 60 * 24)
const hour = Math.floor(diffTime / (1000 * 60 * 60))
diffTime = diffTime % (1000 * 60 * 60)
const minute = Math.floor(diffTime / (1000 * 60))
diffTime = diffTime % (1000 * 60)
const seconds = Math.floor(diffTime / (1000))
let dateStr = `还有 ${
day}天 ${
hour}时${
minute}分${
seconds}秒`
timer.innerText = dateStr;
}
//获取当前时间
function getDayTime() {
const today = new Date();
const nowTime = today.getTime();
today.setTime(parseInt(nowTime));
const oYear = today.getFullYear();
let oMoth = (today.getMonth() + 1).toString();
if (oMoth.length <= 1) oMoth = '0' + oMoth;
let oDay = today.getDate().toString();
if (oDay.length <= 1) oDay = '0' + oDay;
const hour = today.getHours() < 10 ? "0" + today.getHours() : today.getHours();
const minute =
today.getMinutes() < 10 ? "0" + today.getMinutes() : today.getMinutes();
const seconds =
today.getSeconds() < 10 ? "0" + today.getSeconds() : today.getSeconds();
return `${
oYear}-${
oMoth}-${
oDay} ${
hour}:${
minute}:${
seconds}`
}
</script>
————————————END——————————
当然开始时间也可以设置成可以选择的时间
有个bug,在代码在电脑上面可以运行,但是发送到手机点击运行的时候,input日期选择器、type=datetime-local生成的时间直接报错为 Invalid Date(无效日期),这是为什么呢?还请大佬来解答一哈。猜想可能是手机上面的日期和电脑的格式不一样?