如何利用jQuery+css做一个倒计时进度条,下面web建站小编给大家简单介绍一下具体实现代码!
html代码:
<div class="progress-bar"> <div class="item"></div> </div> <div class="btn">进度条</div> <div class="count-down"> <div class="item"></div> </div> <div>剩余时间 : <span class="time"></span>s</div>
css代码:
.progress-bar { width:200px; height:20px; background-color:aliceblue; border-radius:20px; display:flex; } .btn { margin:20px; width:70px; height:30px; line-height:30px; text-align:center; background-color:#bfa; cursor:pointer; color:rgb(202,202,90); } .progress-bar .item { width:0; height:100%; background-color:rgb(56,148,255); border-radius:20px; transition:all 1s; } .count-down { width:200px; height:20px; background-color:aliceblue; border-radius:20px; display:flex; } .count-down .item { width:100%; height:100%; background-color:rgb(56,148,255); border-radius:20px; transition:all 0.1s; }
jquery代码:
var w = 0 let w2 = 100 let t = 50 $('.time').html(t) $('.btn').on("click", function() { w += 20 $('.progress-bar .item').css("width", `${w}%`) console.log(w); }) let timer = setInterval(() => { w2 -= 0.2 if (w2 < 0) { clearInterval(timer) } console.log(w2); $('.count-down .item').css("width", `${w2}%`) }, 100); let timer2 = setInterval(() => { t -= 1 if (t <= 0) { clearInterval(timer2) } $('.time').html(t) }, 1000);
上面是“jQuery+css做一个倒计时进度条”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_3821.html
workflows工作流
- 一辆在泥潭中奔跑的布加迪ComfyUI工作流
- 一位身穿金色铠甲的美丽女子守卫在寺庙外
- 一张由表情符号组成的照片ComfyUI工作流
- 3d卡通风格多彩头发的女人
- 一个表情深思熟虑的成熟男人
- 彩色雄鹰玉雕ComfyUI工作流
- 去掉背景(抠图)comfyui工作流
- 一个精心制作的微型赛车场ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!