Bootstrap Progress（进度条控件）

来源：互联网发布：云计算架构师招聘编辑：程序博客网时间：2024/05/22 10:57

Bootstrap Progress是Bootstrap中自带实用的一款进度条控件。

官方网站 http://www.bootcss.com/

示例：（复制即用）

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><!-- 所需JS/CSS --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script><body><!-- HTML --><!-- 外部div --><div class="progress"><!-- 内部div --><div id="divID" class="progress-bar" style="width:0%"><div id="divTextID">0%</div></div></div><!-- JS:使用倒计时来展现进度条 --><script type="text/javascript">$(function() {// 定义JS计时器，每0.1秒执行一次var interval = setInterval(progress,100);// 定义进度条初始值var count = 0 ;function progress() {// 当为100时结束if(count<100){// 每0.1秒,加1%的进度count=count+1;// 通过修改内部div的css属性width来进行进度条控制$("#divID").css("width",count+"%");// 修改进度值$("#divTextID").text(count+"%");}else{clearInterval(interval);}}});</script></body></html>

主要通过class来进行初始化，css来实现进度。相关class属性值：

外成div标签class属性：

progress 必须有，初始化控件

progress-striped 在进度条添加条纹

active 使添加的条纹动起来

内层div标签class属性：（仅可选择一种）

progress-bar-info 表示信息进度条，进度条颜色为蓝色
progress-bar-success 表示成功进度条，进度条颜色为绿色
progress-bar-warning 表示警告进度条，进度条颜色为黄色
progress-bar-danger 表示错误进度条，进度条颜色为红色

0 0