js第六天笔记

最新推荐文章于 2024-05-11 21:19:51 发布

孤城星空

最新推荐文章于 2024-05-11 21:19:51 发布

阅读量26

点赞数 1

分类专栏： js学习日记文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_60137795/article/details/129534064

版权

js学习日记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

web APIs

变量声明优先使用const，const在声明复杂数据类型时，可以实现修改数据，如数组和对象

1. web APIs基本认识

作用和分类
1. 作用：使用js去操作html和浏览器
2. 分类：DOM(文档对象模型),BOM(浏览器对象模型)
DOM树(将html文档以树状结构直观的表现出来)
DOM对象
1. 浏览器根据HTML标签生成的js对象
2. DOM的核心就是把内容当对象来处理

2. 获取DOM对象

1. 根据css选择器来获取DOM元素

选择匹配的第一个元素
1. 语法：document.querySelector('css选择器')
2. 参数：包含一个或多个有效的css选择器，字符串
3. 返回值：css选择器匹配的第一个元素，没有返回null
选择所有的元素
1. 语法：document.querySelectorAll('css选择器')
2. 返回值：是一个伪数组，没有pop,push等方法

3. 操作元素内容

对象.innerText属性(获取元素内容，不识别html标签)
对象.innerHtml属性(获取元素内容，可以识别html标签)

// 随机抽奖
<div class="wrapper">
        <strong>传智教育年会抽奖</strong>
        <h1>一等奖：<span id="one">???</span></h1>
        <h3>二等奖：<span id="two">???</span></h3>
        <h5>三等奖：<span id="three">???</span></h5>
      </div>
    <script>
        // 声明数组
        const personArr = ['刘德华','张学友','刘振','pink']
        // 生成随机数
        const random = Math.floor(Math.random() * personArr.length)
       // 获取元素
       const one = document.querySelector('#one')
       one.innerHTML = personArr[random]
        // 删除已抽元素
        personArr.splice(random, 1)
        // 生成随机数
        const random1 = Math.floor(Math.random() * personArr.length)
       // 获取元素
       const two = document.querySelector('#two')
       two.innerHTML = personArr[random1]
        // 删除已抽元素
        personArr.splice(random1, 1)
        // 生成随机数
        const random2 = Math.floor(Math.random() * personArr.length)
       // 获取元素
       const three = document.querySelector('#three')
       three.innerHTML = personArr[random2]
        // 删除已抽元素
        personArr.splice(random2, 1)
    </script>

4. 操作元素属性

修改元素常用属性

<img src="../04-code/images/1.webp" alt="">
    <script>
        // 获取元素
        const img = document.querySelector('img')
        // 修改属性
        img.src = '../04-code/images/2.webp'
        img.title = '艺术照'
    </script>

修改元素样式属性

通过style属性修改样式
1. 语法：对象.style.属性

// 取到 N ~ M 的随机整数
 function getRandom(N, M) {
   return Math.floor(Math.random() * (M - N + 1)) + N
 }
 // 生成随机数
 const ran = getRandom(1,10)
 // body不需要获取,含有横杠的属性采用小驼峰命名使用
 document.body.style.backgroundImage = `url(../04-code/images/desktop_${ran}.jpg)`

通过类名(className)修改样式

   // 获取元素
   const div = document.querySelector('div')
   // 修改类名
   div.className = 'box'

通过classList修改样式(h5)

      // 获取元素
      const div = document.querySelector('div')
     // 修改类名
     div.classList.add('box')//添加类
     div.classList.remove('box')//删除类
     div.classList.toggle('box')//切换类：有就删掉，没有就加上

######随机轮播图

   // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    const ran = getRandom(0,7)
    // 获取图片
    const img = document.querySelector('.slider-wrapper img')
    // 修改图片属性
    img.src = sliderData[ran].url
    // 获取p
    const p = document.querySelector('.slider-footer p')
    // 修改内容
    p.innerHTML = sliderData[ran].title
    // 修改背景色
    const foot = document.querySelector('.slider-footer')
    foot.style.backgroundColor = sliderData[ran].color
    // 获取小圆点
    const li = document.querySelector(`.slider-indicator li:nth-child(${ran + 1})`)
    // console.log(li)
    // 修改li标签属性
    li.classList.add('active')

修改表单样式属性

      // 获取input
        const ipt = document.querySelector('input')
        // 修改属性
        ipt.value = '手机'
        ipt.type = 'password'

<input type="checkbox" name="" id="">
    <button>点击</button>
    <script>
        // 获取元素
        const ipt = document.querySelector('input')
        const btn = document.querySelector('button')
        // 修改(diaabled,checked,slected)属性
        ipt.checked = true //被选中
        btn.disabled = true //不能点击
    </script>

自定义属性(data-自定义属性)

    <div data-id="1" data-sp="秀">1</div>
    <div data-id="2">2</div>
    <div data-id="3">3</div>
    <div data-id="4">4</div>
    <div data-id="5">5</div>
    <script>
        const div = document.querySelector('div')
        console.log(div.dataset.id)
        console.log(div.dataset.sp)
    </script>

5. 定时器-间歇函数

      function fn() {
            console.log('牛逼')
        }
        setTimeout(fn,5000)//延迟多久执行，只执行一次
        setInterval(fn,1000)//间隔多久执行，无限次执行

<textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(5)</button>

    <script>
        // 获取btn
        const btn = document.querySelector('.btn')
        // 开启定时器
        let i = 5
        let num = setInterval(function fn(){
            i--
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if(i === 0) {
                clearInterval(num)
                btn.disabled = false
            }
        },1000)
        </script>

定时轮播图

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