建设申请网站首页,国家卫生健康官网入口,wordpress怎么修改模板,如何查看网站语言文章目录 效果过程日历与获取时间居中背景与字计时器清空计时器 代码HTMLCSSJS 其他demo
效果 效果预览#xff1a;倒计时器 可选择时间 (codepen.io)
参考#xff1a;
Simple Clock/Countdown timer (codepen.io)
前端页面实现倒计时效果的几种方法_前端倒计时__Boboy的… 文章目录 效果过程日历与获取时间居中背景与字计时器清空计时器 代码HTMLCSSJS 其他demo
效果 效果预览倒计时器 可选择时间 (codepen.io)
参考
Simple Clock/Countdown timer (codepen.io)
前端页面实现倒计时效果的几种方法_前端倒计时__Boboy的博客-CSDN博客
过程
日历与获取时间
这个是input typedate 想要获取时间这样就可以把点击的时间传入
input classdate iddate typedate value onchangetimeChange(this.value)居中
想让body的内容上下居中设置了flex并justify-content: center;时没有效果。这是因为body没有高度它的高度是由内容撑开的无法上下居中。 想要解决这个问题需要设置
height: 100vh;使得body占满整个窗口此时就有内容的上下居中效果了。 左右居中同理width:100vw。
背景与字
背景颜色
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);背景是一种绿色字体颜色color是白色或偏白色的浅绿色影子text-shadow的阴影颜色是深绿色。颜色很和谐。 计时器
我们获取选择的时间后就可以计算选择的时间与当前时间的差值然后需要写一个计时器setTimeOut每一秒调用一次自己 这样才会有秒数动态减少的效果。
timer setTimeout(function () {timeChange(date)}, 1000);我们令每次调用timeChange都输出当前时间很显然每次都要调用一次。 注意这里不能写
timer setTimeout(timeChange(date), 1000);这是复杂度为2n的递归调用会调用很多次函数。第1秒的时候调用1次第2秒时调用2次原本的和新递归出来的第3秒调用4次…会爆栈。
清空计时器
当选择新的时间时要把之前的计时器清除否则会出现两个计时器同时工作的情况 if(timer!) clearTimeout(timer);代码
HTML
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title倒计时器/titlelink relstylesheet hrefstyle.css
/headbodydiv classmaindiv classtitlediv classtext请输入未来的时间/divinput classdate iddate typedate value onchangetimeChange(this.value)/divdiv classcontainerdiv classitemp classtimeD/pp classtextDAYS/p/divdiv classitemp classtimeO/pp classtextHOURS/p/divdiv classitemp classtimeN/pp classtextMINUTES/p/divdiv classitemp classtimeE/pp classtextSECONDS/p/div/div/div/body/htmlscript srcindex.js/scriptCSS
body {background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}.main {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;width: 100vw;}.title {text-align: center;
}.title .text {font-size: 50px;color: #dbfff69c;text-shadow: 0 0 10px #009974;margin: 40px 0;
}.title .date {width: 100px;text-align: center;margin-bottom: 35px;background-color: #beffef;border-radius: 10px;border: 1px solid #beffef;padding: 5px;}.container {display: flex;margin-left: 90px;
}.container .item {margin-right: 70px;text-align: center;
}.container .item .time {font-size: 36px;font-weight: 300;
}.container .item .text {font-size: 14px;font-weight: 400;border-top: 1px solid #131313;padding-top: 10px;margin-top: -14px;
}JS
let timerfunction timeChange(date) {console.log(date)// 每次选择了新时间要关闭之前的定时器if(timer!) clearTimeout(timer);let now new Date().getTime();let future new Date(date).getTime()let distance future - nowconst time document.getElementsByClassName(time)const len time.length;if (distance 0) {let arr DONEfor (let i 0; i len; i) {time[i].innerHTML arr[i];}timerreturn;}let days Math.floor(distance / (1000 * 60 * 60 * 24));distance - days * (1000 * 60 * 60 * 24);let hours Math.floor(distance / (1000 * 60 * 60));distance - hours * (1000 * 60 * 60);let minutes Math.floor(distance / (1000 * 60));distance - minutes * (1000 * 60);let seconds Math.floor(distance / 1000);let arr [days, hours, minutes, seconds];for (let i 0; i len; i) {time[i].innerHTML arr[i];}timer setTimeout(function () {timeChange(date)}, 1000);
}
