javascript+css实现进度条效果


Posted in Javascript onMarch 25, 2020

本文实例为大家分享了javascript+css实现进度条效果的具体代码,供大家参考,具体内容如下

主要是以样式实现进度条的效果,JavaScript控制显示的百分比

html模板

<div class="progress_area">
 <span id="progress" class="progress_bac"></span>
</div>
<input type="button" class="progress-inp" value="100%" οnclick="progress(100);"/>
<input type="button" class="progress-inp" value="86%" οnclick="progress(86);" />
<input type="button" class="progress-inp" value="20%" οnclick="progress(20);"/>

css:

.progress_area{
 width: 255px;
 height: 13px;
 border: 1px solid #ccc;
 border-radius: 15px;
 margin-bottom: 30px;
}
.progress-inp{
 width: 60px;
 height: 28px;
 border: 1px solid #ccc;
 background: #62c7ef;
 border-radius: 8px;
 color: white;
 cursor: pointer;
 outline:none;
}
.progress_bac{
 display: block;
 height: 100%;
 width: 50%;
 background: #83a4f1;
 border-radius: 10px;
}

实现的效果:

javascript+css实现进度条效果

感觉这个进度条显示的特别生硬;之后通过box-shadow对它加了个阴影效果:

box-shadow有6个参数:

box-shadow:inset x-offset y-offset blur-radius spread-radius color
分别为:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色

css:

.progress_bac{
 display: block;
 height: 100%;
 width: 50%;
 background: #83a4f1;
 border-radius: 10px;
 -moz-box-shadow:0px 0px 7px 0px #4486ca;
 -webkit-box-shadow:0px 0px 7px 0px #4486ca;
 box-shadow:0px 0px 7px 0px #4486ca;
}

效果:

javascript+css实现进度条效果

阴影的颜色可以自定义,通过box-shadow可以实现高亮的效果,多多尝试;

在点击下方按钮的时候,进度条会显示对应的值,到指定的位置,但是通过之上的代码来看,当点击按钮的时候进度条是一下子就到了指定的位置,没有过度的效果;

通过javascript和css两种方式来实现:

css:

css来实现很简单,css中有个参数叫transition动画效果,通过改变改参数的宽度的动画效果,很简单的就实现出来

.progress_bac{
 display: block;
 height: 100%;
 width: 50%;
 background: #83a4f1;
 border-radius: 10px;
 -moz-box-shadow:0px 0px 7px 0px #4486ca;
 -webkit-box-shadow:0px 0px 7px 0px #4486ca;
 box-shadow:0px 0px 7px 0px #4486ca;
 -moz-transition: width 0.5s;
 -webkit-transition: width 0.5s;
 transition: width 0.5s;
}

javascript:

js实现的方式就有多种了可以写个循环可以写个定时器:以下代码就是用定时器写的;

function progress(value){
 if ( value ){ 
  var num = "";
  var loader_progress = setInterval(function(){
   num++;
   document.getElementById("progress").style.width = num+"%";
   if ( num == value ){
    clearInterval(loader_progress);
   }
  },10);
 }
};

以上是简单的实现进度条方式;修改css可以使进度条展示不同的效果,这就需要一点点的调了;

Javascript 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
JS实现可控制的进度条
Mar 25 #Javascript
js实现简单进度条效果
Mar 25 #Javascript
JavaScript实现简单进度条效果
Mar 25 #Javascript
JavaScript实现随机点名程序
Mar 25 #Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 #Javascript
JS实现网页时钟特效
Mar 25 #Javascript
js实现小时钟效果
Mar 25 #Javascript
You might like
PHP5/ZendEngine2的改进
2006/10/09 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Python对列表排序的方法实例分析
2015/05/16 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python 将Excel转Word的示例
2021/03/02 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
马智宇结婚主持词
2014/04/01 职场文书
心理健康活动总结
2014/04/30 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
幼儿园感谢信
2015/01/21 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python