倒计时进度条动态效果

效果图

HTML

<div class="progress-bar-box"><div class="wrap"><div class="box"><div class="text">0%</div></div></div><div class="hint">倒计时：00:00:00</div>
</div>

CSS

.progress-bar-box {margin:30px auto;
}
.wrap {width:200px;height:20px;border-radius: 15px;margin:60px auto 0;background: #4e56d5;//overflow: hidden;
}.box {width: 0%;height: 20px;border-radius: 15px;position: relative;background: -webkit-repeating-linear-gradient(-36deg, #aabef9 0, #aabef9 0.2rem, #7c82eb 0.2rem, #7c82eb .4rem);-webkit-animation: move 5s linear infinite;animation: move 5s linear infinite;
}.text {width:50px;height:20px;background:red;position: absolute;top: -21px;right:-25px;text-align: center;color: #FFF;background:#4e56d5;
}
.hint {text-align: center;color: #ffb400;font-szie: 12px;margin:5px auto;
}@-webkit-keyframes move {0% {background-position: 0 0;}100% {background-position:200px 0;}
}

JS


countDown(60,0,60);
/** remainTime 剩余秒数* miningTime 已使用秒数* totalTime 需要倒计时的秒数
*/
function countDown (remainTime, miningTime, totalTime) {var times = window.setInterval(function () {var remain_time = remainTime * 1000; //剩余毫秒数var mining_time = miningTime * 1000; //已用毫秒数var total_time = totalTime * 1000; //总秒数var days = parseInt(remain_time / 1000 / 60 / 60 / 24, 10); //计算剩余的天数var hours = parseInt(remain_time / 1000 / 60 / 60 % 24, 10); //计算剩余的小时var minutes = parseInt(remain_time / 1000 / 60 % 60, 10); //计算剩余的分钟var seconds = parseInt(remain_time / 1000 % 60, 10); //计算剩余的秒数if (remainTime >= 0) {$('.hint').html(checkTime(hours) + ':' + checkTime(minutes) + ':' + checkTime(seconds));$('.text').html(Math.floor((mining_time / total_time * 100) * 100) / 100+'%');$('.box').css({'width':Math.floor((mining_time / total_time * 100) * 100) / 100+'%'});remainTime--;miningTime++;} else {$('.hint').html('倒计时结束');clearInterval(times);}}, 1000);}function checkTime(i) {//将0-9的数字前面加上0，例1变为01if (i < 10) {i = "0" + i;}return i;
}

倒计时进度条动态效果相关推荐

用PowerPoint2007制作倒计时进度条
今天心血来潮,想学习ppt的一些有趣的样式,就到网上搜索了下, 看了几个网易学院上提供的ppt视频和IT资源库上的一些小技巧.现在就介绍一下如何制作倒计时进度条吧(多余的步骤我就不写了,图我就直接用它 ...
自定义圆形进度条自定义倒计时进度条
自定义圆形进度条自定义倒计时进度条版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 此控件源码已开源到Github:https: ...
如何实现一个圆弧倒计时进度条
一.前言最近的项目中,需要实现一个圆弧形倒计时进度条,对于本来 css 知识薄弱的我当场就懵逼,脑海里总是不断思考如何实现,不幸的是脑袋里没能蹦出半个想法.然后立马百度查看网上是否有相似的解决方案, ...
《Linux小项目-倒计时+进度条》
本文主要讲解在linux系统下实现进度条以及倒计时小程序文章目录成果展示 1.`\r和\n` 理解字符含义: 测试字符 (1)`\r和\n`都存在 (2)`\r和\n`都不存在 (3) `只有\n ...
h5 Canvas实现圆形时间倒计时进度条
在项目中,我们会遇到需要显示进度条或者倒计时的功能,我们今天就来实现一下. 一.效果展示实现效果要求: 1.环形倒计时 2.能够根据总时间和当前时间进行比例性的倒计时 3.进度条环形能够有颜色渐变效 ...
html动态资源加载进度,JavaScript_快速解决js动态改变dom元素属性后页面及时渲染的问题，今天实现一个进度条加载过程 - phpStudy...
快速解决js动态改变dom元素属性后页面及时渲染的问题今天实现一个进度条加载过程,dom结构其实就是两个div 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文 ...
android欢迎页圆形倒计时,android 欢迎页圆形进度条倒计时功能
常见app欢迎页圆形进度条倒计时功能,可设置显示文字,进度条颜色,宽度,倒计时时间,内圆颜色.设置进度条类型顺数进度条(0-100)还是倒数进度条(100-0): 先上效果图: 下面介绍实现逻辑: ...
html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
html进度条倒计时代码,html5+css3进度条倒计时动画特效代码【推荐】_html5教程技巧...
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...

倒计时进度条动态效果

效果图

HTML

CSS

JS

倒计时进度条动态效果相关推荐

最新文章

热门文章