20秒倒记时进度条拉升

20秒倒记时
进度条拉升
然后提交服务器怎么写哦 我知道用js写的 谁帮偶写个demo哦 太谢谢了!

解决方案 »

  1.   

    http://www.hbjjrb.com/Jishu/C/200905/165862.html20秒用timer也可以控制。
      

  2.   

    var time = 20;
    var obj = document.getElementById('spanTime');
    function changetime()
    {
        if(time>=0)
        {
            obj.innerText = time;
            time--;
            setTimeout('changetime()',1000);
        }
    }
    changetime();
      

  3.   

    刚随便做了一个玩玩，兼容ie8,firefox3.5，chrome4.0<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
    <!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 type="text/javascript">
            var index = 0;
            var timer;
            function CountDown() {
                if (index == 0) {
                    document.getElementById("div2").style.width = "0px";
                    document.getElementById("span1").innerHTML = 20 - index;
                    index++;
                    timer = setInterval(CountDown, 1000);
                }
                else if (index <= 20) {
                    document.getElementById("div2").style.width = 10 * index + "px";
                    document.getElementById("span1").innerHTML = 20 - index;
                    index++;
                }
                else {
                    index = 0;
                    document.getElementById("span1").innerHTML = "";
                    clearInterval(timer);
                }
            }
        </script></head>
    <body>
        <form id="form1" runat="server">
        <input type="button" onclick="CountDown()" value="click" />
        <div style="width: 200px; height: 20px; border: solid 1px black;" id="div1">
            <div id="div2" style="background-color: Red; width: 0px; height: 20px;">
            </div>
            <span id="span1" style="position:relative; left:95px; top:-20px;"></span>
        </div>
        </form>
    </body>
    </html>