JS——webAPIs（1）

一、知识点

1.随机函数

//N~M的随机数
function getRandom(N,M){
      return Math.floor(Math.random()*(M-N+1))+N
    }
//数组Arr取随机项
const random=Math.floor(Math.random()*Arr.length)

2.修改基础属性

3.修改样式属性

// 修改样式-通过style修改 多组单词采取小驼峰命名
    box.style.width='500px'
    box.style.backgroundColor='lightpink'
    //修改背景图
    const random=getRandom(1,10)
    document.body.style.backgroundImage=`url(./images/desktop_${random}.jpg)`

// 修改样式-通过类名className修改
    //可以添加类名，给div绑定了.box，覆盖原来的类名
    div.className='nav box'

// 修改样式-通过类名classList添加
    const box=document.querySelector('.box')
    //追加类
    box.classList.add('active')
    //删除类
    box.classList.remove('box')
    //切换类（有就删，没有就加上）
    box.classList.toggle('box')
    //查找是否包含类（包含则返回true，不包含返回false）
    box.classList.contains('box')
    

4.修改表单属性

 //修改表单属性
    const uname=document.querySelector('input')
    uname.value='我要买电脑'
    uname.type='password'

    const ipt=document.querySelector('input')
    ipt.checked=false //默认true，勾选

    const btn=document.querySelector('button')
    btn.disabled=true //默认false，不禁用

5.修改自定义属性

// 修改自定义属性
    const one=document.querySelector('div')
    console.log(one.dataset.id)
    console.log(one.dataset.spm)

6.定时器

    //间歇函数（函数，时间ms）
    function fn(){
      console.log('一秒执行一次')
    }
    //打开定时器，返回序号值
    let n=setInterval(fn,1000)//n=1
    let m=setInterval(fn,1000)//m=2
    //关闭定时器
    clearInterval(n)

二、综合案例

1.轮播图（刷新随机）

    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    // 2. 获取随机对象
    const random=parseInt(Math.random()*sliderData.length)
    // 3. 把对应数据渲染到标签里
    const img=document.querySelector('.slider-wrapper img')
    img.src=sliderData[random].url
    const p=document.querySelector('.slider-footer p')
    p.innerHTML=sliderData[random].title
    const footer=document.querySelector('.slider-footer')
    footer.style.backgroundColor=sliderData[random].color
    // 4. 小圆点变换
    const li=document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    li.classList.add('active')

 2.轮播图定时器版（自动遍历）

    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    // 2. 获取元素
    let i = 0
    const img=document.querySelector('.slider-wrapper img')
    const p=document.querySelector('.slider-footer p')
    const footer=document.querySelector('.slider-footer')
    // 3. 开启定时器
    let n = setInterval(function() {
      i++
      // 无缝衔接位置
      if (i >= sliderData.length){
        i = 0
      }
      img.src=sliderData[i].url
      p.innerHTML=sliderData[i].title
      footer.style.backgroundColor=sliderData[i].color
      // 先删除以前带active类名的li
      document.querySelector('.slider-indicator .active').classList.remove('active')
      // 只让当前li加active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)

3.抽奖

    const personArr=['zjl','ldh','zxc','pink','zxy']
    //一等奖
    const random1=Math.floor(Math.random()*personArr.length)
    const one=document.querySelector('#one')
    one.innerHTML=personArr[random1]
    personArr.splice(random1,1)//删除当前
    //二等奖
    const random2=Math.floor(Math.random()*personArr.length)
    const two=document.querySelector('#two')
    two.innerHTML=personArr[random2]
    personArr.splice(random2,1)//删除当前
    //三等奖
    const random3=Math.floor(Math.random()*personArr.length)
    const three=document.querySelector('#three')
    three.innerHTML=personArr[random3]
    personArr.splice(random3,1)//删除当前

4.注册倒计时

const btn=document.querySelector('.btn')
        let i = 5
        let n = setInterval(function(){
            i--
            btn.innerHTML=`我已经阅读用户协议(${i}s)`
            if(i === 0){
                clearInterval(n)
                btn.disabled=false
                btn.innerHTML='同意'
            }
        },1000)