javascript+css实现进度条效果

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

主要是以样式实现进度条的效果,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可以使进度条展示不同的效果,这就需要一点点的调了;

(0)

相关推荐

  • 利用js编写网页进度条效果

    一.基本思路 为了让我们编写的网页进度条满足现有需求,又足够轻便,所以使用原生js写一个构造函数,为了见名知义,可以把该函数命名为"Loading".该函数接收2个参数,分别为arr.callback.其中arr定义图片数组,callback定义执行完成后回调函数.该构造函数内部,遍历图片数组加载图片,每加载完一张图片,修改进度条进度,直至全部加载完成,进度条进度为100%. 二.实现步骤 (1)先搭建好进度条的样子,把html和css写好. 写完后预览一下进度条的效果 (2)编写Lo

  • JS插件plupload.js实现多图上传并显示进度条

    本文实例为大家分享了plupload.js多图上传的具体代码,供大家参考,具体内容如下 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

  • js实现定时进度条完成后切换图片

    定时进度条,进度100%以后可以切换图片等. setInterval() 和setTimeout() 两个方法都可以实现. 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

  • 环形加载进度条封装(Vue插件版和原生js版)

    本文实例为大家分享了环形加载进度条封装代码,供大家参考,具体内容如下 1.效果预览 2.用到的知识 主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性. 在看下面文章之前,你需要了解 <!DOCTYPE html> <html> <head> <title>svg demo</title> <style type="text/css"> #line{ transition

  • JavaScript实现水平进度条拖拽效果

    本文实例为大家分享水平进度条拖拽效果的js具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ margin:100px; width: 500px; height: 5px; background: #ccc; posit

  • javascript 进度条的几种方法

    我们先看看最终效果: 第一步,基本 构建基本的代码,看效果演示: 制作进度条的两种方法 *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /*进度条样式*/ .progressbar_1{ background-color:#eee; height:16px; width:150px; border:

  • JavaScript实现简单动态进度条效果

    本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 1.效果 2.源码 <html> <head> <script type="text/javascript"> window.onload = function () { var myProgress = document.getElementById("myProgress"); var mySpan = document.getElementByI

  • 简单实现js进度条加载效果

    本文实例为大家分享了js进度条加载效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下载进度</title> <style> /*定义父容器*/ .content{ width: 500px; height: 200px; background: pin

  • 原生JS上传大文件显示进度条 php上传文件代码

    JS原生上传大文件显示进度条,php上传文件,供大家参考,具体内容如下 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_limit = 20M <!DOCTYPE html> <html> <head> <title>原生JS大文件显示进度条</title> <meta charset="UTF-8"> <s

  • JavaScript实现简单进度条效果

    本文实例为大家分享了JavaScript实现进度条效果的具体代码,供大家参考,具体内容如下 效果图: 简单说一下思路: 主要就是进度条的宽度的动态调整!要用到JS的间隔定时器 setInterval( ) setInterval( ) 功能:每隔指定时间调用一次函数 参数:函数,时间间隔 返回值:定时器编号(数字) 想让它到一定的宽度就停止,那么需要设定它的最大宽度,在它外面套一个有宽度的元素就可以啦!这样的话控制它在父元素里的百分比就行了. 在函数里进行判断是否道达指定宽度,没有到达就增长,否

随机推荐