API基本认知

最新推荐文章于 2024-07-14 15:54:59 发布

哑笑

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量221

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_52994227/article/details/124369960

版权

API基本认知

1.定时器

 <script>
        let btn = document.querySelector('.btn');
        let i = 6;
        let time = setInterval(function () {
            i--;
            btn.innerHTML = `我已阅读用户协议(${i})`
            if (i === 0) {
                //清除定时器
                clearInterval(time);
                //开启按钮
                btn.disabled =false
                //更改文字
                btn.innerHTML = `我同意用户协议`
            }
        }, 1000)

    </script>

2.焦点图案例

 <div><img src="../../../images/nav0.png" alt="" class="pig"></div>
    <div class="text">动力不扯</div>
    <script>
        let data = [
            {
                imgSrc: '../../../images/nav0.png',
                title: '动力不扯'
            },
            {
                imgSrc: '../../../images/nav1.png',
                title: '不扯'
            },
            {
                imgSrc: '../../../images/nav2.png',
                title: '力不扯'
            },
            {
                imgSrc: '../../../images/nav3.png',
                title: '动不扯'
            },
            {
                imgSrc: '../../../images/nav4.png',
                title: '动力不'
            },
            {
                imgSrc: '../../../images/nav5.png',
                title: '动力扯'
            },
        ]
        let pig = document.querySelector('.pig');
        let text = document.querySelector('.text');
        let i = 0;
        setInterval(function () {
            i++
            pig.src = data[i].imgSrc
            text.innerHTML = data[i].title
            if (i === data.length-1) {
                i = -1
            }
        }, 1000)
    </script>

3.随机点名

 抽中的选手：<div></div>
    <script>
        let box = document.querySelector('div')
        //封装随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        //随机点名
        //声明一个数组
        let arr = ['machao', 'huangzhong', 'guanyu', 'zhangfei']
        //生成一个随机数，作为数组索引号
        let random1 = getRandom(0, arr.length - 1)
        //写入标签内部
        box.innerHTML = arr[random1]
        arr.splice(random1, 1)
    </script>

4.随机背景

  <script>
        //封装随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let arr = getRandom(0, 5);
        document.body.style.backgroundImage=`url(../../images/nav${arr}.png)`
    </script>

5.随机显示图片

 <script>
        let pic = document.querySelector('img')
         //封装随机数
         function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let num = getRandom(0,5);
        pic.src = `../../images/nav${num}.png`
    </script>