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 相关文章推荐
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
浅析vue component 组件使用
Mar 06 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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
php连接mysql数据库代码
2009/03/10 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php函数连续调用实例分析
2015/07/30 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Python 中的 else详解
2016/04/23 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
高二化学教学反思
2014/01/30 职场文书
上班打牌检讨书
2014/02/07 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
市政管理求职信范文
2014/05/07 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
运动会致辞稿
2015/07/29 职场文书
5行Python代码实现一键批量扣图
2021/06/29 Python
各国货币符号大全
2022/02/17 杂记
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js