博客园 首页 私信博主 我的git 我的网站 管理 动画

js小案例

1.轮播图(无定时器纯手动操作)

<!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>
</head>
<style>
    *{margin: 0;padding: 0;}
    .lunbo{height: 600px;width: 1140px;position: relative;}
    .picture .item{list-style: none; position: absolute;transition: all .5s; opacity: 0;}
    .item img{height: 600px;width: 1140px;}
    .picture .cur{z-index: 9;opacity: 1;}
    .btn{position: absolute;height: 200px; width: 50px;top: 150px;background: none;border: none;font-size: 36px;color: aquamarine;z-index: 10;}
    #btnPex{left: 0px;}
    #btnNext{right: 0px;}
    .round_list{position: absolute;z-index: 99;bottom: 10px;right: 0px;}
    .round_list .round{float: left; list-style: none;height: 15px;width: 15px;border-radius: 50%;border: 1px solid grey;margin-right: 15px;background-color: darkgray;cursor: pointer;}
    .round_list .cur{background-color: #ffffff;}
</style>
<body>
    <div class="lunbo">
        <ul class="picture">
            <li class="item cur"><img src="./img/1577663866422.jpeg" alt=""></li>
            <li class="item"><img src="./img/1577663869884.jpeg" alt=""></li>
            <li class="item"><img src="./img/1577663877104.jpeg" alt=""></li>
            <li class="item"><img src="./img/1577663881433.jpeg" alt=""></li>
            <li class="item"><img src="./img/1577663888613.jpeg" alt=""></li>
        </ul>
        <ul class="round_list">
            <li class="round  cur" data-index="0"></li>
            <li class="round" data-index="1"></li>
            <li class="round" data-index="2"></li>
            <li class="round" data-index="3"></li>
            <li class="round" data-index="4"></li>
        </ul>
        <button class="btn" id="btnPex"> < </button>
        <button class="btn" id="btnNext"> > </button>
    </div>

    <script>
        var items=document.getElementsByClassName('item');
        var rounds=document.getElementsByClassName('round');
        var goNextBtn=document.getElementById('btnNext');
        var goPexBtn=document.getElementById('btnPex');
        var index=0;
        
        //清除列表的 cur样式
        var clearCur=function(){
            for(var i=0;i<items.length;i++){
                items[i].className='item';
            }
            for(var i=0;i<rounds.length;i++){
                rounds[i].className='round'
            }
        }
        //移动图片 相当于移动cur类 (给图片添加cur类)
        var goIndex=function(){
            clearCur();
            items[index].className='item cur'
            rounds[index].className='round cur'
        }
        //下一张
        var goNext=function(){
            if(this.index<items.length-1){
                index++;
            }else{
                index=0
            }
            goIndex();
        }
        //上一张
        var goPex=function(){
            if(index==0){
                index=items.length-1;
            }else{
                index--;
            }
            goIndex();
        }

        //添加小圆点
        for( var i=0;i<rounds.length;i++){
            rounds[i].addEventListener('click',function(){
                var roundIndex=this.getAttribute('data-index');//getAttribute获取标签属性 data-index
                index=roundIndex; //将小圆点列表获取的data-index赋值给图片列表以便找到相对应的图片
                goIndex();
            })
        }


        goNextBtn.addEventListener('click',function(){
            goNext();
        })
        goPexBtn.addEventListener('click',function(){
            goPex();
        })
        
    </script>
</body>
</html>

2.短信验证秒数

<!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>
</head>
<style>
    a{
        color:red;
    }
    .disable{
        pointer-events:none;
        color:#666;
    }
</style>
<body>
    <p>
        <input type="text" placeholder="请输入手机号">
    </p>
    <p>
        <input type="text" placeholder="验证码">
        <a href="javascript:;" id="btn">发送验证码</a>
    </p>
    <input type="checkbox" name="" id="">同意并已阅读《条例》
    
    <script>
        var oBtn = document.getElementById('btn');
        var flag = true;

        oBtn.addEventListener("click", function () {
            var time = 10;
            oBtn.classList.add('disable');
            oBtn.innerText = '已发送';

            if (flag) {
                flag = false;
                var timer = setInterval(() => {
                    time--;
                    oBtn.innerText = time + ' 秒';
                    if (time === 0) {
                        clearInterval(timer);
                        oBtn.innerText = '重新获取';
                        oBtn.classList.remove('disable');
                        flag = true;
                    }
                }, 1000)
            }
        });
    </script>
</body>
</html>

  

posted @ 2019-12-31 08:59  魏婴  阅读(180)  评论(0编辑  收藏  举报