clearTimeout(); setTimeout()用法与实现进度条示例 

@{
ViewBag.Title = "TextOut";
}

<script src="~/Scripts/jquery-1.7.1.min.js"></script>


<html>
<head><title></title></head>
<body>
<div style="width: 300px; height: 20px; border: 1px solid red">
<div style="background-color: #90EE90; width: 0px; height: 20px;" id="divdd"></div>

</div>
<input type="button" value="开始" onclick="statr()" />
<input type="button" value="结束" onclick="end()" />
</body>

</html>
<script type="text/javascript">

var time = 0;
var ee;
function statr() {
if (time < 300) {
time++; 
ee= setTimeout("get()", 50);
} 
}

function get() {
var cc = time + "px";
$("#divdd").css("width", cc);
statr();
}
function end() {
window.clearTimeout(ee);
}
</script>
jquery实现进度条

 

 

定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法

setTimeout(code,millisec)
 描述
code 必需。要调用的函数后要执行的 JavaScript 代码串或方法名
millisec 必需。在执行代码前需等待的毫秒数。

提示和注释

提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

 1 @{
 2     ViewBag.Title = "Index";
 3 }
 4 
 5 <script src="~/Scripts/jquery-1.7.1.min.js"></script>
 6 
 7 
 8 
 9 <html>
10 
11 <head>
12 
13     <title></title>
14 </head>
15 <body>
16    <input type="button" onclick="eat()"/>
17  
18 </body>
19 
20 </html>
21 <script type="text/javascript">
22 
23     function eat() {
24         setTimeout("run()",1000);
25 
26     }
27     function run() {
28         alert("888");
29         setTimeout("eat()",1000);
30 
31     }
32    
33 </script>
setTimeout() 只执行 code 一次。如果要多次调用

实例

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>

<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()">
</form>
<p>Click on the button above. An alert box will be
displayed after 5 seconds.</p>
</body>

</html>

HTML DOM clearTimeout() 方法

HTML DOM Window 对象

定义和用法

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

语法

clearTimeout(id_of_settimeout)
参数描述
id_of_settimeout 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

实例

下面的例子每秒调用一次 timedCount() 函数。您也可以使用一个按钮来终止这个定时消息：

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
  {
  document.getElementById('txt').value=c
  c=c+1
  t=setTimeout("timedCount()",1000)
  }
function stopCount()
  {
  clearTimeout(t)
  }
</script>
</head>
<body>

<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>

</body>
</html>






@{
    Layout = null;
}



<script src="~/Content/Scripts/jquery-1.7.1.min.js"></script>
<html>
<head>
    <title></title>
    <style type="text/css">
        .div {
            /*border: 1px solid red;*/
            width: 1043px;
            height: 130px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }

        .img01, .img02, .img03 {
            width: 1043px;
            height: 130px;
            border: 1px solid green;
            margin: auto;
            display: none;
            /*position: relative;*/
        }

        .divIndex {          
            width: 150px;
            height: 50px;      
            display: block;
            left: 150px;
            position: absolute;
            top: 105px;
        }

        ul li {
            float: right;
            margin: 6px 5px;
            cursor: pointer; 
        }

        .fcArrL {
            left: 0;
            background: url(/Scripts/arrL.png) no-repeat;
        }

        .fcArrR {
            right: 0;
            background: url(/Scripts/arrR.png) no-repeat;
        }



        .spanMeanimg01, spanMeanimg02, .spanMeanimg03 {
            /*border: 1px solid red;*/
            width: 70%;
            height: 100%;
            float: left;
            display: none;
            color: white;
            font-size: 16px;
            font-weight: normal;
        }

        .but_img {
            width: 15px;
            height: 15px;
            border-radius: 7.5px;
            background-color: #b5b5b5;
        }

        .logo_word {
            position: absolute;
            top: 94px;
            color: rgb(255, 209, 84);
            display: inline-block;
            text-shadow: 0 1px 0 #0a354d;
            font-weight: 100;
            letter-spacing: -0.5px;
            font-size: 13px;
            width: 285px;
            left: 0px;
            text-align: left;
            padding: 0px 24px;
        }

        .four_span0 {
            position: absolute;
            top: 49px;
            left: 674px;
            color: #fff;
            font-size: 21pt;
            font-weight: 100;
            width: 200px;
            text-align: center;
        }

        .logo_span0 {
            position: absolute;
            top: 10px;
            left: 386px;
            color: #fff;
            font-size: 15pt;
            font-weight: 100;
            width: 158px;
            text-align: center;
        }

        .logo_span1 {
            position: absolute;
            top: 10px;
            left: 578px;
            color: #fff;
            font-size: 15pt;
            font-weight: 100;
            width: 158px;
            text-align: center;
        }

        .logo_span2 {
            position: absolute;
            top: 10px;
            left: 740px;
            color: #fff;
            font-size: 15pt;
            font-weight: 100;
            width: 220px;
            text-align: center;
        }

        .four_span0 {
            position: absolute;
            top: 49px;
            left: 674px;
            color: #fff;
            font-size: 21pt;
            font-weight: 100;
            width: 200px;
            text-align: center;
        }

        .four_span1 {
            position: absolute;
            top: 82px;
            left: 659px;
            color: #fff;
            font-size: 11pt;
            font-weight: 100;
            width: 350px;
            text-align: center;
        }

        .poker_span0 {
            position: absolute;
            top: 49px;
            left: 674px;
            color: #fff;
            font-size: 21pt;
            font-weight: 100;
            width: 149px;
            text-align: center;
        }

       .poker_span1 {
            position: absolute;
            top: 82px;
            left: 674px;
            color: #fff;
            font-size: 15pt;
            font-weight: 100;
            width: 315px;
            text-align: center;
        }
    </style>
</head>

<body>


    <div class="div ">

        <div class="img01" tag="img01" style="display: block; background-image: url(http://www.txbet.com/Content/css/IMG/tx_bn1.png)">

            <span class="logo_word">WORLD's FIRST 4D EXCHANGE GAME WITH RUNNING MARKET</span>
            <span class="logo_span0">TRANSPARENCY</span>
            <span class="logo_span1">SIMPLICITY</span>
            <span class="logo_span2">FRESH GAMEPLAY</span>

        </div>
        <div class="img02" tag="img01" style="background-image: url(http://www.txbet.com/Content/css/IMG/tx_bn2.png)">

            <span class="logo_word">WORLD's FIRST 4D EXCHANGE GAME WITH RUNNING MARKET</span>
            <span class="four_span0">Malaysia's First</span>
            <span class="four_span1">4D Early and Running Market betting exchange</span>
        </div>
        <div class="img03" tag="img03" style="background-image: url(http://www.txbet.com/Content/css/IMG/tx_bn3.png)">
            <span class="logo_word">WORLD's FIRST 4D EXCHANGE GAME WITH RUNNING MARKET</span>
            <span class="poker_span0">24 Hours</span>
            <span class="poker_span1">Intense Poker Betting exchange</span>
        </div>
        <div class="divIndex">
            <ul style="list-style: none; margin: 0px; float: right; height: 100%">
                <li id="img01" class="li">
                    <div class="but_img"></div>
                </li>
                <li id="img02" class="li">
                    <div class="but_img"></div>
                </li>
                <li id="img03" class="li">
                    <div class="but_img"></div>
                </li>
            </ul>
        </div>
    </div>

</body>
</html>
<script type="text/javascript">
    var t;
    var i = 1;
    function load() {
        i++;
        $(".img01").hide();
        $(".img02").hide();
        $(".img03").hide();
        var img = "img0" + i;
        $("." + img).fadeIn();
        if (i == 3)
        { i = 0; }
        t = setTimeout("load()", 5000);
    }
    t = setTimeout("load()", 2000);
    $(function () {

        $(".li").bind("mouseenter", function () {
            $(".but_img").css("background", "#b5b5b5");
            $(this).find(".but_img").css("background", "white");
            clearTimeout(t);
            var tag = $(this).attr("id");
            $(".img01").hide();
            $(".img02").hide();
            $(".img03").hide();
            $("." + tag).fadeIn();


        });

        $(".li").bind("mouseleave", function () {
            t = setTimeout("load()", 2000);
        });
    });

</script>



广告播放功能


 












        

        

            posted on 
2015-03-16 23:00 
高达 
阅读(454) 
评论(0) 
 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

    
    

    

    





            

        

        

            

导航