javascript学习-APIs部分2

1.定时器-间歇函数

开启定时器：setInterval(函数,间隔时间) //间隔时间单位是ms

            1.匿名函数
                 setInterval(function () {
                    console.log('一秒执行一次');
                 }, 1000);
            2.有名函数    setInterval(函数名，时间)   //注意：函数名后边不加()
                 function fn(){
                    console.log('一秒执行一次');
                 }
                 setInterval(fn,1000)

关闭定时器：clearInterval(变量名)

	  	 let 变量名 = setInterval(函数,间隔时间)   ； 
	     clearInterval(变量名)         //此变量存放定时器id数
	     开启后定时器返回一个id数，用来区分不同的定时器

阅读协议定时案例

需求：按钮60s后才可使用
1.开始时按钮禁用
2.函数内逻辑：
按钮上面秒数减减
如果秒数等于0停止定时器，文字变为同意，按钮可以点击

<textarea cols="30" rows="10">
       京东用户注册协议
    本协议的订立、执行和解释及争议的解决均应适用中国法律。如双方就本协议内容或其执行发生任何争议，双方应尽力友好协商解决；协商不成时，应向协议签订地有管辖权的人民法院提起诉讼。本协议签订地为中华人民共和国北京市大兴区。
    如果本协议中任何一条被视为废止、无效或因任何理由不可执行，该条应视为可分的且并不影响任何其余条款的有效性和可执行性。
    本协议未明示授权的其他权利仍由京东保留，您在行使这些权利时须另外取得京东的书面许可。京东如果未行使前述任何权利，并不构成对该权利的放弃。
</textarea> <br>
<button disabled>已阅读用户协议(60s)</button>
<script>
    const btn = document.querySelector('button')
    let s = 60
    function timer() {
        s--
        btn.innerHTML = `已阅读用户协议(${s}s)`
        if(s === 0){
            clearInterval(n)
            btn.disabled = false
            btn.innerHTML = '同意'
        }
    }
    let n = setInterval(timer,1000)
</script>

2.轮播图定时器案例（！！！）

需求：
每隔1s 切换一张图片；
标题文字改变；
小圆点变动

<div class="container">
    <img src = '../imgs/goods1.jpg'/>
    <p></p>
    <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<style>
.container{
width: 600px;
height: 475px;
background-color: rgb(174, 223, 242);
}
img{
width: 600px;
height: 400px;
}
p{
width: calc(100% - 20px);
height: 40px;
line-height:40px;
font-size: larger;
padding-left: 20px;
margin-top: 5px;
margin-bottom: 0;
color: aliceblue
}
ul{
display: inline-block;
display: flex;
margin-top: 0;
margin-bottom: 0;
}
li{
width: 20px;
height: 20px;
color: rgba(255, 255, 255, 0.469);
}
.active{
color: white;
}
</style>
<script>
const data = [
    {url:'../imgs/goods1.jpg',
     uname:'格力七叶轻音立式电风扇家用柔风落地扇',
     color:'rgb(174, 223, 242)',
     num :1
    },
    {url:'../imgs/goods2.jpg',
     uname:'资生堂专业美发 芯护理道轻盈丝逸洗发露',
     color:'rgb(211, 190, 168)',
     num :1
    },
    {url:'../imgs/goods3.jpg',
     uname:'国台酒 好礼经典版 三斤坛子 酱香型白酒',
     color:'rgb(94, 169, 146)',
     num :1
    },
    {url:'../imgs/goods4.jpg',
     uname:'AppleAirPods Pro (第二代)配MagSafe无线充电盒',
     color:'rgb(227, 179, 171)',
     num :1
    },
    {url:'../imgs/goods5.jpg',
     uname:'海尔（Haier）216升冰箱三门三温区租房低音节能',
     color:'rgb(139, 216, 246)',
     num :1
    },
]
const img = document.querySelector('img')
const p = document.querySelector('p')
const con = document.querySelector('.container')
let i = 1  //信号量  刚开始是第一张图片，1s后开始第二张
setInterval(function (){
    img.src = data[i].url   //变换图片
    p.innerHTML = `${data[i].uname}`    //变换标题
    con.style.backgroundColor = `${data[i].color}` //变换背景
    //变换小圆点
    //删除此时图片小圆点选中状态   重点！！！
    document.querySelector(`.active`).classList.remove('active')
    //再给下一张添加选中状态    与上一步步骤不能反
    document.querySelector(`li:nth-child(${i + 1})`).classList.add('active')
    i++ 
    if(i == data.length){
        i = 0           //如果图片播放完最后一张，重新从第一张即i=0开始
    }
},1000)
</script>