Web APIsPIs第1章

WebApi阶段学习什么?

WebApi是浏览器提供的一组接口

使用 JavaScript 去操作页面文档 和 浏览器

什么是 API

API: 应用程序接口(Application Programming Interface)

接口:本质上就是各种函数,无需关心内部如何实现,程序员只需要调用就可以很方便实现某些功能

作用:开发人员使用 JavaScript提供的接口来操作网页元素和浏览器

如何学习API

阶段课程递进

今日内容

描述

属性/方法

效果

获取DOM对象

document.querySelector()

获取指定的第一个元素

document.querySelectorAll()

获取指定的所有元素

操作元素内容

元素.innerText

操作元素内容,不解析标签

元素.innerHTML

操作元素内容,解析标签

操作元素样式

元素.style.width

通过style操作样式

元素.className

通过类名操作样式

元素.classList.add()

增加类名

元素.classList.remove()

删除类名

元素.classList.toggle()

切换类名

间隔函数

setInterval(function() {}, 1000)

定时器,每隔指定时间重复执行

DOM简介

DOM(Document Object Model——文档对象模型)

作用:DOM用来 操作网页文档,开发网页特效和实现用户交互

DOM的核心思想就是把网页内容当做对象来处理,通过对象的属性和方法对网页内容操作

document 对象

document对象是DOM顶级对象,是网页内容的入口

document对象中提供的属性和方法都是用来访问和操作网页内容的

例:document.write()

获取DOM元素

想要操作页面元素,那我们需要先利用DOM方式来获取(选择)这个元素

方式有2种:

选择匹配的第一个元素(重点)

语法:

const box = document.querySelector('div')// 总结:
const box = document.querySelector('css选择器')

参数:

包含一个或多个有效的CSS选择器字符串

返回值:

CSS选择器匹配的第一个元素对象

如果没有匹配到,则返回 null

多参看文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

// 利用css选择器来获取DOM元素
// 1. document.querySelector() 选择指定css选择器的第一个元素
// 1.1 参数是字符串的css选择器
const box = document.querySelector('div')
console.log(box)// 1.2 返回值是dom对象
console.log(typeof box)  // object
console.dir(box)const box = document.querySelector('.box')
console.log(box)const li = document.querySelector('ul li')
console.log(li)   // 只选择满足条件的第一个元素liconst li = document.querySelector('ul li:nth-child(2)')
console.log(li)   // 选择第2个小li// 1.3 如果获取不到则返回 null
const p = document.querySelector('p')
console.log(p)  // null

随堂练习

请使用document.querySelector获取如下三个li对象输出在控制台中 :

  1. 【我的首页】 - 使用 .nav li:first-child 选择器
  2. 【公司简介】 - 使用 .nav li:last-child 选择器
  3. 【联系方式】 - 使用 .nav li:nth-child(3) 选择器

选择匹配的多个元素对象

语法:

const lis = document.querySelectorAll('div')

参数:

包含一个或多个有效的CSS选择器 字符串

返回值:

CSS选择器匹配的NodeList 伪数组

哪怕满足条件的元素只有一个,通过querySelectAll() 获取过来的也是一个伪数组,里面只有一个元素而已

// 2. document.querySelectorAll() 选择指定css选择器的所有元素
// 2.1 参数还是字符串的css选择器
const lis = document.querySelectorAll('.nav li')// 2.2 返回值是一个伪数组里面包含了所有的dom对象 li
console.log(lis)// 2.3 伪数组
// (1) 有长度和索引号
// (2) 没有数组的一些常用方法 比如 push  pop  splice等方法
// lis.push(1)
// console.log(lis)  // 因为lis是伪数组无法使用push方法所以报错// 2.4 利用循环遍历伪数组得到里面的每一个元素对象
for (let i = 0; i < lis.length; i++) {console.log(lis[i]) // 里面的每一个元素对象
}// 2.5 即使只有1个元素,我们querySelectorAll 获得的也是一个伪数组,里面只有1个元素而已
const boxs = document.querySelectorAll('.box')
console.log(boxs)
伪数组

伪数组:有长度,有索引号的数组,但是没有 pop() push() 等数组方法

想要得到里面的每一个对象,则需要遍历(for)的方式获得

const lis =  document.querySelectorAll('.nav li')let newLis = []for(let i =0;i<lis.length;i++){newLis.push(lis[i])}console.log(newLis)

随堂练习

请在控制台输出 6个 li 的 DOM对象

<body><ul class="nav"><li>我的首页</li><li>产品介绍</li><li>联系方式</li></ul><ol class="nav"><li>一级标题</li><li>二级标题</li><li>三级标题</li></ol></body>

其他方式(了解)

querySelectorquerySelectorAll这些方法在 IE 8浏览器 开始才得到支持。

像IE6等老式浏览器的写法如下:

语法

实例

描述

getElementById

document.getElementById('box')

根据id获取元素,单个元素

getElementsByTagName

document.getElementsByTagName('li')

根据标签名获取元素,伪数组

getElementsByClassName

document.getElementsByClassName('one')

根据类名获取元素,伪数组

getElementsByName

document.getElementsByName('sex')

根据name属性值获取元素,伪数组

// 1. getElementById   根据id获取
const box = document.getElementById('box')
console.log(box)// 2. getElementsByClassName   根据类名获取  返回伪数组
const items = document.getElementsByClassName('item')
console.log(items)// 3. getElementsByTagName  根据标签名获取 返回伪数组
const ps = document.getElementsByTagName('p')
console.log(ps)// 4. getElementsByName  根据name属性获取 返回伪数组
const inputs = document.getElementsByName('username')
console.log(inputs)

操作元素内容

DOM对象可以操作页面标签,所以本质上就是操作DOM对象(增删改查)

如果想要操作标签元素的内容,则可以使用如下2种方式:

1.对象.innerText 属性

2.对象.innerHTML 属性

innerText

元素.innerText 属性作用:"渲染"文本内容到标签里面

基本语法

// 第一步:先获取到元素对象
const 元素对象 document.querySelector('css选择器')
// 第二步:元素对象.innerText操作元素对象的内容
1. 获取元素内容:元素对象.innerText 
2. 新增或修改元素内容:元素对象.innerText  = 新内容
3. 如果要删除元素对象的内容:元素对象.innerText  = ''

举例说明:

注意点:innerText只显示纯文本,不解析html标签

  1. innerText 将文本内容添加/更新到任意标签位置,文本中包含的标签不会被解析。
<script>// 操作DOM元素内容// 1. 对象.innerText 增删改查// 1.1 查console.log(box.innerText)  // 古丽扎娜// 1.2 改box.innerText = '迪丽热巴'// 1.3 增const box1 = document.querySelector('.box1')console.log(box1)box1.innerText = '佟丽丫丫'// 1.4 删  给空字符串可以删除内容box.innerText = ''box1.innerText = ''
</script>

innerHTML

元素.innerHTML 属性作用:"渲染"文本内容到标签里面

基本语法

// 第一步:先获取到元素对象
const 元素对象 document.querySelector('css选择器')
// 第二步:元素对象.innerHTML操作元素对象的内容
1. 获取元素内容:元素对象.innerHTML
2. 新增或修改元素内容:元素对象.innerHTML  = 新内容
3. 如果要删除元素对象的内容:元素对象.innerHTML  = ''

举例说明:

  1. innerHTML 将文本内容添加/更新到任意标签位置,文本中包含的标签会被解析。
<script>const box = document.querySelector('.box1')// 2. 对象.innerHTML  会解析标签box.innerHTML = '<strong>迪丽热巴</strong>'
</script>

注意:innerHTML属性,文本中包含的标签会被解析

总结:如果文本内容中包含 html 标签时推荐使用 innerHTML,否则建议使用 innerText 属性。

年会抽奖案例

图片素材下载:

images.rar

需求:当网页打开后,从数组 ['迪丽热巴', '古丽扎娜', '佟丽丫丫', '马尔扎哈'] 中随机抽取一等奖、二等奖和三等奖,显示到网页对应的标签里面

功能约定:

①:页面刷新,随机抽取数组中的获奖姓名

②:不允许重复得奖(一旦数组中的名字已经得奖,则此名字不再参与后面的抽奖)

技术实现分析:

①:一等奖: 随机生成一个数字(0~数组长度)表示数组下标,根据下标找到对应数组的名字

②:通过innerText 或者 innerHTML 将名字写入span元素内部

③:因为不允许重复抽奖,所以抽取一等奖的姓名要使用 splice方法将其从数组中删除

④: 二等奖、三等奖依次类推 ①②③同样操作

效果:刷新浏览器,随机出现不同的抽奖名单

请拷贝如下静态结构到html中,然后开始编写js逻辑代码


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>年会抽奖</title><style>.wrapper {width: 840px;height: 420px;background: url(./images/bg01.jpg) no-repeat center / cover;padding: 100px 250px;box-sizing: border-box;}.wrapper span {color: #b10e0d;}</style></head><body><div class="wrapper"><strong>年会抽奖</strong><h1>一等奖:<span class="one">???</span></h1><h3>二等奖:<span class="two">???</span></h3><h5>三等奖:<span class="three">???</span></h5></div><script>// 数组const arr = ['迪丽热巴', '古丽扎娜', '佟丽丫丫', '马尔扎哈']// TODO:开始编写抽奖逻辑代码</script></body></html>
  // 数组const arr = ['迪丽热巴', '古丽扎娜', '佟丽丫丫', '马尔扎哈']// 写法1:// 1. 随机获取1等奖的名单 [0-3] let index = Math.floor(Math.random() * arr.length)let uname = arr[index] //随机获取到一等奖的名字// 2. 将uname变量中的名字写到页面元素 class="one" 的span中const span1 = document.querySelector('.one')span1.innerHTML = uname// 3. 将已经抽到了奖项的人从arr数组中删除arr.splice(index,1) // console.log(arr)// 实现二、三等将的抽取index = Math.floor(Math.random() * arr.length)uname = arr[index] //随机获取到2等奖的名字const span2 = document.querySelector('.two')span2.innerHTML = unamearr.splice(index,1) index = Math.floor(Math.random() * arr.length)uname = arr[index] //随机获取到3等奖的名字const span3 = document.querySelector('.three')span3.innerHTML = unamearr.splice(index,1) // 2. 函数封装写法
// 分析:由于1,2,3等奖的逻辑代码是相似的,所以我们可以将这个代码封装成一个函数// 但由于代码里面有一个选择器是要动态变化的,所以将这个选择器的字符串提炼成函数的形参function getName(className){// 1. 随机获取1等奖的名单 [0-3] let index = Math.floor(Math.random() * arr.length)let uname = arr[index] //随机获取到一等奖的名字// 2. 将uname变量中的名字写到页面元素 class="one" 的span中const span1 = document.querySelector(className)span1.innerHTML = uname// 3. 将已经抽到了奖项的人从arr数组中删除arr.splice(index,1) }getName('.one')  //1等奖getName('.two') //2等奖getName('.three') //3等奖    

操作元素属性

  1. 操作元素常用属性
  1. 操作元素样式属性
  1. 操作 表单元素 属性
  1. 自定义属性

操作元素常用属性

可以通过DOM操作元素属性,比如通过 src 更换 图片地址

最常见的属性比如: hreftitlesrc 等等

  1. 直接能过属性名修改,最简洁的语法
<script>// 1. 先获取这个元素const img = document.querySelector('img')// 2. 操作DOM元素常见属性// 2.1 查console.log(img.src)// 2.2 改img.src = './images/3.png'// 2.3 增img.title = '我是播仔,我是不是很可爱'// 2.4 删img.alt = ''
</script>

随堂练习案例

需求:当我们刷新页面,页面中的图片随机显示不同的图片

分析:

①:利用随机数抽取数组中的一个图片地址

②:修改图片元素的src地址(把图片地址赋值给src属性)

const img = document.querySelector('img')

img.src =图片地址


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机显示图片案例</title><style>img {width: 600px;}</style></head><body><img src="./images/1.png" alt=""><script>// 随机显示图片案例// 图片地址const arr = ['./images/1.png','./images/2.png','./images/3.png','./images/4.png']// 获取图片元素const img = document.querySelector('img')// 1. 利用随机数抽取数组中的一个地址const random = Math.floor(Math.random() * arr.length)console.log(arr[random]) // 得到图片地址// 2. 把地址赋值给图片src属性img.src = arr[random]</script></body></html>

操作元素样式属性

什么是样式属性:用来控制html元素样式的属性,比如,color,background-color,translate,width,height,内边距,外边距,边框,边框圆角等

操作样式属性的场景:

  • 比如轮播图小圆点自动更换颜色 样式

操作样式属性分为三块来学习

通过 style 属性操作元素样式

语法:

 const 元素对象 = document.querySelector('css选择器')元素对象.style.样式属性 = 样式值

举例说明:

<body><div class="box"></div>
</body><script>// 通过style操作元素样式// 1. 先要获取这个box元素对象const box = document.querySelector('.box')// 2. 通过style来从操作样式box.style.width = '300px'box.style.height = '50px'box.style.marginTop = '50px'box.style.backgroundColor = 'red'// 3. 注意事项// 3.1 给样式赋值的时候,千万不要忘了加单位比如 300px// 3.2 如果有-的样式,我们采取的是小驼峰命名法比如 marginTop// 3.3 一定不要忘了加 style 属性
</script>

注意事项:

1. 给样式赋值的时候,千万不要忘了加单位比如 300px

2. 如果有-的样式,我们采取的是小驼峰命名法比如 marginTop

3. 一定不要忘了加 style 属性

随堂练习

需求:当我们刷新页面,页面中的背景图片随机显示不同的图片

分析:

①:利用随机数抽取数组中的一个图片地址

②:修改body元素的背景样式地址

核心代码: document.querySelector('body').style.backgroundImage = `url(${arr[random]})`

// 背景图片地址数组
const arr = ['./images/bg1.jpg','./images/bg2.jpg','./images/bg3.jpg','./images/bg4.jpg','./images/bg5.jpg'
]

操作类名(className) 操作CSS

如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式

例如:要将这么多属性一次性应用到同一个元素身上,我们可以将css样式统一放到类选择器中,再将类名应用到元素身上

<style>.size {width:300px;height:50px;background-color:red;margin-top: 50px;}.bd{border-radius:10px;}
</style><body><div class="box"></div>
</body>
<script>// 1. 获取.box元素对象const divObj = document.querySelector('.box')// 2. 利用类名操作元素样式divObj.className = 'size'// 3. 利用类名操作样式添加的新的类名会覆盖掉原先的类名divObj.className = 'size bd'</script>

核心:把多个样式放到css一个类中,然后把这个类添加到这个元素身上

注意:className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

通过 classList 操作元素样式

为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名

<style>.size {width:300px;height:50px;background-color:red;margin-top: 50px;}</style><body><div class="box"></div>
</body><script>// 1. 获取box盒子const box = document.querySelector('.box')// 2.通过classList操作元素样式(推荐)// 2.1 追加类名// box.classList.add('size')// 2.2 删除类名// box.classList.remove('size')// 2.3 切换类名: 如果元素身上有这个类名,那么就删除,如果没有这个类名则添加box.classList.toggle('size')
</script>

总结

使用 style、 className 和classList 怎么选择?

修改样式很少的时候,使用 style

修改大量样式的可以选择类:className / classList

classList 是追加和删除不影响以前类名,更提倡

综合案例

轮播图随机版:

目的:练习操作元素常见属性和样式属性

需求:当我们刷新页面,页面中的轮播图会显示不同图片以及样式

模块分析:

①:页面刷新随机显示图片、文字、背景颜色

②:对应小圆点高亮显示


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>随机轮播图</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了?</p><ul class="slider-indicator"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 初始数据对象数组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)' },]// 1. 利用随机数选取数组中的一个对象    // 2. 利用选取的对象来更换图片// 需求:把图片元素的地址换成数据里面的图片地址// 2.1 获取图片元素   // 2.2 把随机生成的图片地址 赋值给 图片元素.src // 3. 更换文字内容// 3.1 获取文字盒子 p   // 3.2 把随机生成的文字赋值给 p元素.innerText // 4. 更换背景颜色  slider-footer 盒子// 4.1 获取 slider-footer 盒子    // 4.2 把随机生成的背景颜色赋值给 footer元素 style// 5. 更换小圆点// 5.1 先选择对应的小圆点// 5.2 让选出来的小圆点高亮显示</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>随机轮播图</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了?</p><ul class="slider-indicator"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 初始数据对象数组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)' },]// 1. 利用随机数选取数组中的一个对象let index = Math.floor(Math.random() * sliderData.length)let data = sliderData[index]// 2. 利用选取的对象来更换图片// 需求:把图片元素的地址换成数据里面的图片地址// 2.1 获取图片元素   const imgBox = document.querySelector('.slider-wrapper img') // 2.2 把随机生成的图片地址 赋值给 图片元素.src imgBox.src = data.url// 3. 更换文字内容// 3.1 获取文字盒子 p   const pBox = document.querySelector('.slider-footer p')// 3.2 把随机生成的文字赋值给 p元素.innerText  或者 innerHTMLpBox.innerHTML = data.title// 4. 更换背景颜色  slider-footer 盒子// 4.1 获取 slider-footer 盒子    const divBox = document.querySelector('.slider-footer')   // 4.2 把随机生成的背景颜色赋值给 footer元素 styledivBox.style.backgroundColor = data.color// 5. 更换小圆点// 5.1 先选择对应的小圆点const liBox = document.querySelector(`.slider-indicator li:nth-child(${index + 1})`)// 5.2 让选出来的小圆点高亮显示liBox.classList.add('active')</script>
</body></html>

操作表单元素属性

什么是表单元素?

登录页面中的,文本框,复选框等都是表单元素,表单元素可以收集用户输入的信息

<input type="text" value="" placeholder="请输入用户名">
<input type="password" value="1809999999">
<input type="checkbox" checked>
<input type="checkbox" >
<button disabled>登录</button>
。。。。更多去MDN搜索表单元素

操作表单元素属性

表达元素中的属性分为两类:

  1. 操作表单元素的内容、类型属性,比如:value,type,placeholder
DOM对象.属性
DOM对象.属性= 新值
  1. 操作表单元素状态属性, checked、disabled

特点:表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示

DOM对象.属性
DOM对象.checked= true / false
DOM对象.disabled= true / false

<script>// 操作表单属性// 1. 操作表单 type 和 value 属性// 1.1 修改type属性const username = document.querySelector('[name=username]')console.log(username)// username.type = 'password'// 1.2 操作表单的 value 属性// console.log(username.value)  // 查// username.value = '用户名试试'  // 增// username.value = '请输入用户名' // 改// username.value = ''  // 删// 2. 禁用按钮或者是勾选复选框  布尔型// 2.1 禁用按钮  const button = document.querySelector('button')// button.disabled = true  // true 是禁用button.disabled = false  // false 是不禁用// 2.2 勾选复选框const agree = document.querySelector('.isagree')console.log(agree)// agree.checked = true // true 是选中复选框agree.checked = false // flase 是不选中复选框
</script>

自定义属性(重要)

标准属性: 标签天生自带的属性 比如class、id、title等

可以直接使用点语法操作比如:对象.id

  <input id="uname" title="用户名" class="red"type="text"value="" placeholder="请输入用户名">

自定义属性:以data-开头的属性

<input class="box"data-index="1"data-oldname="test">
  • 使用场景:通过自定义属性可以存储数据,后期可以使用这个数据
  • 在标签上一律以data-开头
  • 在DOM对象上一律以dataset对象方式获取
<script>// 自定义属性// 1. 获取盒子const box = document.querySelector('.box')// 2. 得到自定义属性值// console.log(box.dataset)  // 得到一个对象集合// console.log(box.dataset.index) // 1// console.log(box.dataset)  // 得到一个对象集合console.log(box.dataset.oldname) // testbox.dataset.sex = '男' // 增加一个自定义属性
</script>

注意:dataset里面的属性全部是小写

<input data-oldName="test"> -> box.dataset.oldname

定时器-间隔函数

网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发

例如:网页中的倒计时

倒计时大全 节日倒计时 日期倒计时器 - 倒计时网

要实现这种需求,需要定时器函数

定时器函数可以开启和关闭定时器

开启定时器:

语法

作用:每隔一段时间调用这个函数

注意:间隔时间单位是毫秒 , 1秒 = 1000毫秒

举例:

function repeat() {console.log('前端程序员,就是头发多咋滴~~')  
}
// 每隔一秒(1000毫秒)调用repeat函数
let id = setInterval(repeat, 1000)

// 每隔一秒(1000毫秒)调用repeat函数
let id = setInterval(function() {console.log('前端程序员,就是头发多咋滴~~')  
}, 1000)

注意:

  1. 函数名字不需要加括号
  2. 定时器返回的是一个数字,表示标记这个定时器的id

关闭定时器

需要定时器变量名来关闭

举例:

// 开启定时器
// 返回的是一个唯一的数字,存储到了timer变量中
let timer = setInterval(function () {console.log('前端程序员,就是头发多咋滴~~')}, 1000)// 关闭定时器clearInterval(timer)

综合案例-轮播图定时版

效果需求:

①:每隔一秒钟自动切换图片、文本、颜色、小圆点

②:到了最后一张,自动切换到第1张

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>随机轮播图</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了?</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 初始数据对象数组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)' },]// const sfBox = document.querySelector('.slider-footer')// const pBox = document.querySelector('.slider-footer p')// const imgBox = document.querySelector('.slider-wrapper img')// const liBox = document.querySelector(`.slider-indicator li:nth-child(${index + 1})`)// 1. 利用随机数选取数组中的一个对象let index = 0setInterval(function () {index++if (index >= sliderData.length) {index = 0}// 0. 根据index获取数组中对应的对象const data = sliderData[index]// 1. 切换图片const imgBox = document.querySelector('.slider-wrapper img')imgBox.src= data.url// 2. 切换标题const pBox = document.querySelector('.slider-footer p')pBox.innerHTML =  data.title// 3. 切换背景色const sfBox = document.querySelector('.slider-footer')sfBox.style.backgroundColor = data.color// 3. 切换指示器原点样式const liBox = document.querySelector(`.slider-indicator li:nth-child(${index + 1})`)// 找到带有class="avtive"的li标签,将其身上的active移除document.querySelector(`.slider-indicator .active`).classList.remove('active')// 给当前元素设置active样式liBox.className = 'active'}, 1000)</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/889261.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决Vue项目中npm install卡住问题的详细指南

解决Vue项目中npm install卡住问题的详细指南 引言 在开发Vue项目时&#xff0c;我们经常会遇到npm install命令卡住的问题&#xff0c;特别是在构建依赖树时。本文将分享一些实用的解决方案&#xff0c;帮助您快速解决这一常见问题。 问题描述 在执行npm install时&#xf…

Redis与数据库数据一致性保障方法

保证Redis和数据库数据一致性是一个复杂但至关重要的问题&#xff0c;特别是在需要高速缓存和持久化存储并存的系统中。以下是一些常用的方法来确保Redis和数据库之间的数据一致性&#xff1a; 一、事务与回滚机制 Redis事务&#xff1a;Redis支持通过MULTI、EXEC、DISCARD和…

android——录制屏幕

录制屏幕 1、界面 2、核心代码 import android.app.NotificationChannel import android.app.NotificationManager import android.app.PendingIntent import android.app.Service import android.content.Context import android.content.Intent import android.graphics.Bi…

【Excel学习记录】01-认识Excel

1.之前的优秀软件Lotus-1-2-3 默认公式以等号开头 兼容Lotus-1-2-3的公式写法&#xff0c;不用写等号 &#xff1a; 文件→选项→高级→勾选&#xff1a;“转换Lotus-1-2-3公式(U)” 备注&#xff1a;对于大范围手动输入公式可以使用该选项&#xff0c;否则请不要勾选&#x…

短视频矩阵抖音SEO源码OEM独立部署

短视频优化矩阵源码涉及对抖音平台上的视频内容进行筛选与排序&#xff0c;目的是增强其在搜索引擎中的可见度&#xff0c;以便更多用户能够浏览到这些视频。而抖音SEO优化系统则是通过构建一个分析框架&#xff0c;来解析抖音上的用户数据、视频信息及标签等元素&#xff0c;并…

MySQL——buffer poll

为什么要有buffer poll&#xff1f; 如果没有buffer poll&#xff0c;每次读取数据的时候都是从磁盘上读的&#xff0c;这样效率是很差的的。 所以有了提高效率的方式&#xff0c;就加上了一个缓存——buffer poll 所以&#xff0c;当我们读取数据的时候就有以下的方式 当读…

生产慎用之调试日志对空间矢量数据批量插入的性能影响-以MybatisPlus为例

目录 前言 一、一些缘由 1、性能分析 二、插入方式调整 1、批量插入的实现 2、MP的批量插入实现 3、日志的配置 三、默认处理方式 1、基础程序代码 2、执行情况 四、提升调试日志等级 1、在logback中进行设置 2、提升后的效果 五、总结 前言 在现代软件开发中&#xff0c;性能优…

元宇宙时代的社交平台:Facebook的愿景与实践

随着科技的不断进步&#xff0c;元宇宙&#xff08;Metaverse&#xff09;这一概念逐渐走进了人们的视野。作为全球最大的社交平台之一&#xff0c;Facebook&#xff08;现Meta&#xff09;在这场元宇宙革命中扮演着重要角色。Meta不仅在不断扩展其社交平台的边界&#xff0c;还…

C# 小案例(IT资产管理系统)

开发工具&#xff1a;visual studio 2022 语言&#xff1a;C# 数据库&#xff1a;Sql Server 2008 页面展示 一、登录 二、主窗体 三、用户管理 四、资产管理 五、关于 Java版地址&#xff1a;基于若依开发物品管理系统(springbootvue)_若依物品管理系统-CSDN博客 Python版…

分布式日志系统设计

一、分布式日志系统定义 分布式日志系统是一种用于收集、存储和分析大规模分布式系统日志的系统。它可以帮助开发人员和系统管理员实时监控和调试系统&#xff0c;提高系统可靠性和可用性&#xff0c;同时也可以用于日志分析和故障排查。 二、简单设计思路 日志收集&#xff…

虚幻开发中的MYPROJECTFORPLUG_API

百度网盘-免费云盘丨文件共享软件丨超大容量丨存储安全 在虚幻引擎5&#xff08;Unreal Engine 5&#xff09;中&#xff0c;以及许多其他使用C的项目中&#xff0c;__declspec(dllexport) 和 __declspec(dllimport) 是用来处理动态链接库&#xff08;DLL&#xff09;的宏定义…

一文掌握 Go 语言 I/O 操作中的 io.Reader 和 io.Writer

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…

敏捷开发04:Scrum 中的 Product Backlog(产品待办列表) 详细介绍

Product Backlog 产品待办列表 在计划开发产品功能时&#xff0c;都希望产品功能上线后&#xff0c;用户能够喜欢并经常使用。 因此在开发产品新功能时&#xff0c;就要衡量哪些产品需求是对用户最有价值&#xff0c;这是最应该思考的问题。 然后把这些有价值的需求集合放在一…

vmware vsphere5---部署vCSA(VMware vCenter Server)附带第二阶段安装报错解决方案

声明 因为这份文档我是边做边写的&#xff0c;遇到问题重新装了好几次所以IP会很乱 ESXI主机为192.168.20.10 VCSA为192.168.20.7&#xff0c;后台为192.168.20.7:5480 后期请自行对应&#xff0c;后面的192.168.20.57请对应192.168.20.7&#xff0c;或根据自己的来 第一阶段…

USB Ping 事务

文章目录 USB Ping 事务Ping 事务处理机制Ping 示例完整抓包USB Ping 事务 在低速和全速模式下,USB 主机使用控制传输或者批量传输向 USB 设备发送数据时,如果 USB 设备因某些原因(如内存空间不足)无法接收数据,USB 设备会向 USB 主机返回 NAK 包。如果 USB 设备一直无法接…

110.【C语言】编写命令行程序(1)

目录 1.前置知识 "命令"的含义 运行C语言程序 2.介绍 main函数的参数 实验1 执行结果 实验2 执行结果 修改代码 实验3 分析 方法:遍历数组argv[]中的所有参数 执行结果 修改代码 执行结果 1.前置知识 "命令"的含义 WINR输入cmd,在cmd窗口下…

android NumberPicker隐藏分割线或修改颜色

在 Android 中&#xff0c;可以通过以下几种方法隐藏 NumberPicker 的分割线&#xff1a; 使用 XML 属性设置 在布局文件中的 NumberPicker 标签内添加 android:selectionDividerHeight"0dp" 属性&#xff0c;将分割线的高度设置为 0&#xff0c;从而达到隐藏分割线…

Leecode刷题C语言之半有序排列

执行结果:通过 执行用时和内存消耗如下&#xff1a; 代码如下&#xff1a; int semiOrderedPermutation(int* nums, int numsSize) {int first 0, last 0;for (int i 0; i < numsSize; i) {if (nums[i] 1) {first i;}if (nums[i] numsSize) {last i;}}return firs…

RPC设计--从reactor设计 (IOthread)

主从reactor架构 一般的一个网络IO库都是主从reactor模式&#xff0c;即主线程中有一个MainReactor&#xff0c;其负责监听ListenFd&#xff0c;当接受到新的用户连接时&#xff0c;返回的clientfd并不会加入的MainReacotr&#xff0c;而是在子线程&#xff08;这里称为IO线程&…

Scala中求斐波那契数列的第n项

求斐波那契数列的第n项 问题&#xff1a;求 斐波那契数列的第n项 记&#xff1a; 0 1 1 2 3 5 8 13 21 34 55 ... 从第3项开始 f(n) f(n-1) f(n-2) 1.基本情况&#xff08;直接能求的&#xff09;&#xff1a;f(0) 0,f(1) 1 2.递归情况&#xff08;大事化小&#xff0c;自己…