台州网站制作策划,响应式网站栅格,h5素材做多的网站,wordpress游客怎么发表文章思路
利用css动画和js定时器#xff08;setTimeout#xff09;#xff0c;实现简单的进度条。
优势
不使用 setInterval#xff0c;减少js代码量#xff0c;业务代码更加简洁。
示意图
上传中上传成功上传失败
代码
html
!-- img-wrap有两种状态#xff1a;u…思路
利用css动画和js定时器setTimeout实现简单的进度条。
优势
不使用 setInterval减少js代码量业务代码更加简洁。
示意图
上传中上传成功上传失败
代码
html
!-- img-wrap有两种状态uploading上传中、uploadfailed上传失败--
div classimg-wrap uploadingimg src alt /div classimg-state!-- progress-bar 有三种状态progress-bar-status0、progress-bar-status1、progress-bar-status2--div classprogress-bardiv classprogress-innerbar/div/div/div
/divscss
.img-wrap {/*上传中、上传失败*/.uploading, .uploadfailed {/*黑色遮罩*/::before {content: ;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: rgba(0,0,0,0.3);} }.img-state {/*底部进度条*/.progress-bar {width: 8.8rem;height: 0.4rem;position: absolute;left: 0;right: 0;bottom: 0.6rem;margin: auto;border-radius: 0.2rem;background: rgba(255,255,255,0.72);/*底部进度条内部*/.progress-innerbar {width: 0;height: 0.4rem;background: #FF5500;border-radius: 0.2rem;}/*进度条初始状态*/.progress-bar-status0 {.progress-innerbar {width: 20%;-webkit-transition: width .5s linear;-moz-transition: width .5s linear;-o-transition: width .5s linear;transition: width .5s linear; /*动画时长500ms*/}}/*上传失败进度条60%*/.progress-bar-status1 {.progress-innerbar {width: 60%;-webkit-transition: width .5s linear;-moz-transition: width .5s linear;-o-transition: width .5s linear;transition: width .5s linear; /*动画时长500ms*/}}/*上传成功进度条100%*/.progress-bar-status2 {.progress-innerbar {width: 100%;-webkit-transition: width .5s linear;-moz-transition: width .5s linear;-o-transition: width .5s linear;transition: width .5s linear; /*动画时长500ms*/}}}}/*上传失败*/.uploadfailed .img-state::after {content: 上传失败;position: absolute;left: 0;right: 0;top: 50%;margin: auto;-webkit-transform: translateY(-50%);transform: translateY(-50%);display: block;font-size: 1.1rem;line-height: 2rem;text-align: center;color: #fff;}
}js
new Promise((resolve) {// 执行上传图片方法uploadImage(base64) {$(.progress-bar).addClass(progress-bar-status0); // 开始上传进度条状态变成status0resolve()}
}).then((result) {// 上传成功if(result.rc 1) {// 上传成功进度条状态变成status2$(.progress-bar).removeClass(progress-bar-status0 progress-bar-status1).addClass(progress-bar-status2);setTimeout(() {$(.img-wrap).removeClass(uploading uploadfailed);$(.img-wrap).find(.img-state).remove();}, 500) // 假延时500ms因为css动画需要500ms} // 上传失败else {// 上传失败进度条状态变成status1$(.progress-bar).removeClass(progress-bar-status0 progress-bar-status2).addClass(progress-bar-status1);setTimeout(() {$(.img-wrap).removeClass(uploading).addClass(uploadfailed);}, 500) // 假延时500ms因为css动画需要500ms}})
