重复定时器使用

最新推荐文章于 2022-07-19 22:15:39 发布

菲允龙歌

最新推荐文章于 2022-07-19 22:15:39 发布

阅读量608

点赞数

分类专栏：应用案例文章标签： js

本文链接：https://blog.csdn.net/Steve_Richard/article/details/100608900

版权

应用案例专栏收录该内容

23 篇文章 1 订阅

订阅专栏

验证码发送倒计时


    setTimeout(function(){},1000)  时间  单位  毫秒 -->
    验证码:<input type="text"><button>发送验证码</button> 
    <!-- 57s以后重新发送 -->
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function(){
            send(60)
        }
       var timer;
       function send(n){
       timer=setInterval(function(){
            clearInterval(timer)
            n--
            if(n<=0){
                btn.innerHTML = "发送验证码" 
                btn.disabled = false;
                clearInterval(timer);
            }else{
            console.log(n)
            btn.innerHTML = n+'s以后重新发送'
            btn.disabled = true
            }
        },1000) 
}

动图

<body>
    <button>按钮</button><br>
    <img src="images/a1.jpg" alt="">
    <script>
        var btn = document.querySelector('button')
        var pic = document.querySelector('img')
        var gif 
        var timer
        var count = 1
        function gif(){
            clearInterval(timer)
                timer = setInterval(function(){
                    count++   
                    if(count>12){
                        count = 1
                    }                
                    pic.src = 'images/a'+count+'.jpg'
                 
                },200)
        }
        btn.onclick = function(){
            gif()
        }
    </script>
</body>

图片轮播定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{ margin: 0; padding: 0;}
        img{ display:block;}
        .box{ width: 700px; height: 525px; margin: 10px auto; border: 1px solid #000; position: relative;}
        .list{ position: absolute;  left: 0; top:0; background:rgba(0,0,0,.3); width: 100%; height: 30px; text-align: center; line-height: 30px;color: #fff; font-size: 20px;}
        .list span{ color: #fff; font-size: 20px;}
        .nav{ position: absolute; left: 0; bottom: 40px; text-align: center; width: 100%;}
        .nav span{ cursor: pointer; display: inline-block; width: 0; height: 0; border: 6px solid #eee; border-radius:50%; margin-right:5px; }
        .nav .active{ border: 6px solid #f60;}
        .content{ position: absolute;  left: 0; bottom:0; background:rgba(0,0,0,.3); width: 100%; height: 30px; text-align: center; line-height: 30px;color: #fff; font-size: 20px;}
        button{ width: 30px; height: 50px; position: absolute; top: 50%; margin-top: -25px; cursor: pointer;}
        .prev{ left: 0;}
        .next{ right: 0;}
    </style>
</head>
<body>
    <div class="box">
        <p class="list"><span>1</span>/<span>4</span></p>
        <img src="images/1.jpg" alt="">
        <p class="nav">
            <!-- <span class="active"></span>
            <span></span> -->
        </p>
        <p class="content">美女1</p>
        <button class="prev"><</button>
        <button class="next">></button>
    </div>
    <script>
        var box = document.querySelector('.box');
        var lists = document.querySelectorAll('.list span');
        // console.log(lists)
        var imgs = document.querySelectorAll('.box img')[0];
        var nav = document.querySelector('.nav');
        var content = document.querySelector('.content');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var piclist = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"]
        var contlist = ['美女1','美女2','美女3','美女4']
        var len = piclist.length;
        var str = '';
        for(i=0;i<len;i++){
            str +='<span></span>' 
        }
        nav.innerHTML = str;
        lists[1].innerHTML = len
        var spans = document.querySelectorAll('.nav span');
        spans[0].className = 'active';
        for(i=0;i<len;i++){
            spans[i].index = i
            spans[i].onmouseover=function(){
                for(i=0;i<len;i++){
                    spans[i].className=''
                }
                num = this.index
                this.className = 'active';
                imgs.src = piclist[this.index];
                content.innerHTML = contlist[this.index];
                lists[0].innerHTML = this.index+1
            }
        }
        //  下一个按钮  和  划过的索引值  对应    num = this.index
        var num = 0;
        next.onclick = function(){
            play()
           
        }
        function play(){
            num++;
            if(num>3){
                num=0;
            }
            imgs.src = piclist[num];
            content.innerHTML = contlist[num];
            lists[0].innerHTML = num+1;
            for(i=0;i<len;i++){
                spans[i].className = '';
            }
            spans[num].className = 'active';
        }
        var timer = setInterval(function(){
            play()
        },2000)
        box.onmouseover = function(){
            clearInterval(timer)
        }
        box.onmouseout = function(){
            timer = setInterval(function(){
            play()
        },2000)
        }
        prev.onclick = function(){
            num--;
            if(num<0){
                num=3;
            }
            imgs.src = piclist[num];
            content.innerHTML = contlist[num];
            lists[0].innerHTML = num+1;
            for(i=0;i<len;i++){
                spans[i].className = '';
            }
            spans[num].className = 'active';
        }
    </script>
</body>
</html>

菲允龙歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重复定时器使用

验证码发送倒计时 setTimeout(function(){},1000) 时间单位毫秒 --> 验证码:<input type="text"><button>发送验证码</button>  <script> var btn = do...
复制链接

扫一扫