页面百分比进度条

来源：互联网发布：广东省地名地址数据库编辑：程序博客网时间：2024/05/29 04:34
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="进度条.aspx.cs" Inherits="遮罩层.进度条" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>    <style>        .graph        {            position: relative;            width: 200px;            border: 1px solid #B1D632;            padding: 2px;            margin-bottom: .5em;        }        .graph .bar        {            display: block;            position: relative;            background: #37709B;            text-align: left;            color: #fff;            height: 1em;            line-height: 1em;        }        .graph .bar span        {            position: absolute;            left: 1em;        }    </style></head><body>    <form id="form1" runat="server">    <div>        <h2>            Jquery+CSS 进度条</h2>        <div class="graph">            <strong class="bar" style="width: 54%;" id="cut"><span>54%</span></strong>        </div>        <div class="graph">            <strong class="bar" style="width: 0%;" id="crea"><span></span></strong>        </div>        <input type="button" onclick="inseat()" value="增加10%" />    </div>    </form></body></html><script type="text/javascript">    var a1 = 0;    function inseat() {        a1 = a1 + 10;        alert(a1);        $("#crea").width(a1 + "%"); //说明。如果没有明确指定单位（如：em或%），使用px。      }  </script>
页面 百分比进度条

页面百分比进度条
