脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js进度条

javascript+css实现进度条效果

 更新时间：2020年03月25日 17:06:37   作者：JYX8  
这篇文章主要为大家详细介绍了javascript+css实现进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;
}

实现的效果：

感觉这个进度条显示的特别生硬；之后通过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;
}

效果：

阴影的颜色可以自定义，通过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可以使进度条展示不同的效果，这就需要一点点的调了；

您可能感兴趣的文章:

相关文章

  • JS实现网页上随机产生超链接地址的方法

    JS实现网页上随机产生超链接地址的方法

    这篇文章主要介绍了JS实现网页上随机产生超链接地址的方法,涉及JavaScript随机数的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 纯js的右下角弹窗实例

    纯js的右下角弹窗实例

    下面小编就为大家带来一篇纯js的右下角弹窗实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • bootstrap输入框组代码分享

    bootstrap输入框组代码分享

    Bootstrap 支持的另一个特性，输入框组,输入框组扩展自表单控件.下面小编给大家介绍bootstrap输入框组的代码，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06
  • 在javascript中使用com组件的简单实现方法

    在javascript中使用com组件的简单实现方法

    下面小编就为大家带来一篇在javascript中使用com组件的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-08-08
  • Promise.all中对于reject的处理方法

    Promise.all中对于reject的处理方法

    这篇文章主要介绍了Promise.all中对于reject的处理方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-08-08
  • 微信小程序开发之获取用户手机号码(php接口解密)

    微信小程序开发之获取用户手机号码(php接口解密)

    这篇文章主要介绍了微信小程序开发之获取用户手机号码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JS解惑之Object中的key是有序的么

    JS解惑之Object中的key是有序的么

    这篇文章主要介绍了JS解惑之Object中的key是有序的么，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • JS实现的另类手风琴效果网页内容切换代码

    JS实现的另类手风琴效果网页内容切换代码

    这篇文章主要介绍了JS实现的另类手风琴效果网页内容切换代码,通过JavaScript响应鼠标事件动态操作页面元素样式属性实现手风琴效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • javascript获取设置div的高度和宽度兼容任何浏览器

    javascript获取设置div的高度和宽度兼容任何浏览器

    Javascript如何获取和设置div的高度和宽度，并且兼容任何浏览器，感兴趣的朋友不妨看看下面的代码或许有意想不到的收获
    2013-09-09
  • javaScript实现滚动条事件详解

    javaScript实现滚动条事件详解

    这篇文章主要为大家详细介绍了javaScript实现滚动条事件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论