首页 > 代码库 > setTimeout和setInterval

setTimeout和setInterval

2024-10-14 00:18:02   215人阅读

setTimeout和setInterval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setInterval和setTimeout</title>
    <script src=http://www.mamicode.com/"https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        .one{width: 100px;height: 100px;overflow: hidden;}
        .aa{width: 100px;height: 100px;}
        .aa:nth-child(1){background: red;}/* :nth-child(n) 匹配其父元素的第n个子元素,不论类型*/
        .aa:nth-child(2){background: green;}
        .aa:nth-child(3){background: purple;}
        .img{width: 100px;height: 100px;}
        .img img{width: 100px;height: 100px;background-size: 100px 100px;}
    </style>
</head>
<body>
    <div class="one">
        <div class="aa"></div>
        <div class="aa"></div>
        <div class="aa"></div>
    </div>
    <div class="img"></div>
    <script>
        var x=0;
        function Odisplay()
        {
            $(‘.one .aa‘).hide();
            $(‘.one .aa‘).eq(x).show();
            
            x=x+1;
            if(x==$(‘.one .aa‘).length){x=0;}

        }
     setInterval(‘Odisplay()‘,1000);

     var j = 1;
     function changeUrl()
     {
         //var imgurl = $(‘.img‘).html(‘<img src="http://www.mamicode.com/img/timo0‘+j+‘.jpg">‘);
         var imgurl = $(‘.img‘).css(‘background‘,‘url(img/timo0‘+j+‘.jpg) no-repeat‘);
         j++;
         if(j==4){j=1;}
         setTimeout(‘changeUrl()‘,1000);
     }
     changeUrl();
     //setInterval(‘changeUrl()‘,1000);
    </script>
</body>
</html>

 

setTimeout和setInterval


联系
我们