页面百分比进度条

最新推荐文章于 2021-06-07 16:38:52 发布

H_Hao

最新推荐文章于 2021-06-07 16:38:52 发布

阅读量2k

点赞数

<%@ 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" οnclick="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>

H_Hao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面百分比进度条

.graph { position: relative; width: 200px; border: 1px solid #B1D632; padding: 2px; margin-bottom: .5em; } .graph .b
复制链接

扫一扫