Jquery 一个进度条方法
程序员文章站
2022-04-09 17:06:55
效果展示html部分
css部分.bac{ background-color: black;//进度条北京 height: 16...
效果展示
html部分
<div class="bac"><div class="progress"></div></div>
<button class="start">点击开始</button>
<button class="stop">点击暂停</button>
css部分
.bac{
background-color: black;//进度条北京
height: 16px;
width: 180px;
position: relative;
border-radius: 8px;
margin-bottom: 10px;
}
.progress{
width: 180px;
height: 16px;
background: url("imgs/progress.png") no-repeat 0 0;//进度条的图片
position: absolute;
top:0px; left:0;
}
这里用了子绝父相(.son:absolute father:relative)的定位方法,以便于图片可以覆盖在黑色的背景颜色上
script部分
var timer;
$('.start').click(function ()
//开启定时器
timer=setInterval(function () {
var progresswidth=$('.progress').width();//拿到进度条当前的宽度
progresswidth-=5;
$('.progress').css({
width:progresswidth
})
},200)
})
$('.stop').click(function () {
clearTimeout(timer);
})
本文地址:https://blog.csdn.net/weixin_45439010/article/details/109236791
上一篇: 嘉靖帝是如何通过自己的帝王术牢牢掌握住朝堂格局的?
下一篇: 北汉来自何方?北汉为何如此强大?
推荐阅读
-
java 字符串相减(很简单的一个方法)
-
iOS中利用CoreAnimation实现一个时间的进度条效果
-
asp.net实现在XmlTextWriter中写入一个CDATA的方法
-
js截取第一个字符串(javascript截取字符串的方法)
-
Android编程之ProgressBar圆形进度条颜色设置方法
-
android显示意图激活另一个Activity的方法
-
判断一个整数是否是2的N次幂实现方法
-
使用.NET Core3.0创建一个Windows服务的方法
-
在uiview 的tableView中点击cell进入跳转到另一个界面的实现方法
-
Android中断并重启一个Thread线程的简单方法