Let’s look at the rendering first. 
The start time defaults to the current time, and the end time can be selected (the default is the Chinese New Year time). Here we find the difference between the current time and a certain period of time.
Not much to say, let’s talk about code
html code
<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 code
<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 code
<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 ——————————
Of course, the start time can also be set to a selectable time
There is a bug. The code can be run on the computer, but when it is sent to the mobile phone and clicked to run, the time generated by the input date picker and type=datetime-local directly reports an error as Invalid Date (invalid date). Why is this ? Please ask the boss to answer this question. I guess the format of the date on the phone is different from that on the computer?