毕业倒计时 JavaScript 对象实现

毕业倒计时｜JavaScript对象实现一、需求说明用JS对象封装倒计时逻辑：目标毕业时间、计算剩余天数/时/分/秒、刷新显示，页面实时更新倒计时。二、完整代码html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>毕业倒计时</title>

<style>

body{

background:#1a1a2e;

color:#fff;

text-align:center;

font-family:"微软雅黑";

padding-top:120px;

}

.time-boxspan{

font-size:48px;

color:#ffd166;

margin:08px;

}

</style>

</head>

<body>

<h1>🎓毕业倒计时</h1>

<divclass="time-box">

<spanid="day">00</span>天

<spanid="hour">00</span>时

<spanid="min">00</span>分

<spanid="sec">00</span>秒

</div>

<script>

//使用JS对象封装倒计时数据与方法

constcountDown={

//毕业目标日期：自行修改

targetDate:"2027-06-2000:00:00",

//获取DOM元素

els:{

day:document.getElementById("day"),

hour:document.getElementById("hour"),

min:document.getElementById("min"),

sec:document.getElementById("sec")

},

//计算时间差

calc(){

constnow=newDate().getTime();

consttarget=newDate(this.targetDate).getTime();

letdiff=target-now;

if(diff<=0){

return{d:0,h:0,m:0,s:0}

}

//换算天时分秒

constday=Math.floor(diff/(1000*60*60*24));

consthour=Math.floor(diff/(1000*60*60)%24);

constminute=Math.floor(diff/(1000*60)%60);

constsecond=Math.floor(diff/1000%60);

return{d:day,h:hour,m:minute,s:second}

},

//补0格式化

format(n){

returnn<10?"0"+n:n;

},

//更新页面

render(){

constres=this.calc();

this.els.day.innerText=this.format(res.d);

this.els.hour.innerText=this.format(res.h);

this.els.min.innerText=this.format(res.m);

this.els.sec.innerText=this.format(res.s);

},

//启动定时器

start(){

this.render();

setInterval(()=>{

this.render();

},1000)

}

}

//开启倒计时

countDown.start();

</script>

</body>

</html>三、知识点讲解（JS对象核心）对象结构：属性保存目标时间、DOM；方法封装计算、渲染、启动逻辑，实现数据和行为打包。this在对象方法中指向当前对象coun