前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）_js 获取不到dom 可以修改css吗

1. Web API 基本认知

1.1. 作用和分类

作用: 就是使用 JS 去操作 html 和浏览器

分类：DOM (文档对象模型)、BOM（浏览器对象模型）

1.2. 什么是DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。
即DOM是浏览器提供的一套专门用来 操作网页内容（比如：轮播图滚动以及页面滚动、鼠标经过显示和隐藏、鼠标放上显示下拉菜单等） 的功能。

1.3. DOM作用

开发网页内容特效和实现用户交互

1.4 DOM树

HTML文档：

DOM树

1.4.1. DOM树是什么？

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树,是描述网页内容关系的名词。其中文档（document）级别最高,其次是HTML ，再者是head和body。

1.4.2. DOM 树的作用

DOM树（文档树）直观的体现了标签与标签之间的关系

1.5 DOM 对象

1.5.1.DOM对象概念：

浏览器根据html标签生成的 JS对象，所有的标签属性都可以在这个对象上面找到，并且修改这个对象的属性会自动映射到标签身上

1.5.2. DOM的核心思想

把网页内容当做对象来处理

比如： document 对象是 DOM 里提供的一个对象， 所以它提供的属性和方法都是用来访问和操作网页内容的

例：document.write()

网页所有内容都在document里面

实例：将 button标签内的名称由‘click me!’修改为 ‘唐伯虎’。

 <!-- 标签 -->
    <button> click me !</button>
    <script>
        // btn是dom对象，button 在html 是标签，在js里面是dom对象
        let btn = document.querySelector('button')
        console.dir(btn)
        // 修改btn的innerHTML属性，click me ! 变唐伯虎，文档是对象
        btn.innerHTML = '唐伯虎'
    </script>
1
2
3
4
5
6
7
8
9

2.获取DOM元素

查找元素DOM元素就是选择页面中标签元素

2.1.根据CSS选择器来获取DOM元素 (重点)

2.1.1.选择匹配的第一个元素且只能得到一个元素

语法：

document.querySelector('css选择器')
1

参数:

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

返回值：

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

如果没有匹配到，则返回null。

实例
1.js获取一个元素

<div>the first box</div>
<script>
// 1.js 获取一个元素
let div = document.querySelector('div')
console.log(div)
</script>
1
2
3
4
5
6

2. 获取无序列表ul中的最后一个li

 		<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    	</ul>
        let li = document.querySelector('ul li:last-child')
        console.log(li)
1
2
3
4
5
6
7

注意事项

1.document.querySelector(‘css选择器’)只能获取同一名称的css选择器当中的第一个选择器元素

 <div>the first box</div>
 <div> the second box</div>
   
  <script>
        // 1.js 获取一个元素
        let div = document.querySelector('div')
        console.log(div)
 </script>
1
2
3
4
5
6
7
8

2.document.querySelector(‘css选择器’)可以获取类选择器

<div>the first box</div>
    <div> the second box</div>
    <div class="three"> the third box</div>
    <script>
        // 1.document.querySelector('css选择器'),js 获取一个元素
        // let div = document.querySelector('div')
        let div = document.querySelector('.three')
        console.log(div)
        
    </script>
1
2
3
4
5
6
7
8
9
10

2.1.2.选择匹配的多个元素

语法

document.querySelectorAll('css选择器')
1

参数:

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

返回值：

CSS选择器匹配的NodeList 对象集合，即伪数组（即：不能进行增删操作的数组）

实例

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // 1.document.querySelector('css选择器'),js 获取第一个元素,选择匹配的第一个元素且只能得到一个元素
        // let div = document.querySelector('div')
        // let div = document.querySelector('.three')
        // console.log(div)
        //获取无序列表ul中的最后一个li
        // let li = document.querySelector('ul li:last-child')
        // console.log(li) 
        // 2.获取多个元素 返回值为NodeList 对象集合，即伪数组
        let lis = document.querySelectorAll('ul  li')
        console.log(lis)
        

    
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

什么是NodeList 对象集合 伪数组 ？

有长度有索引号的数组，但是没有 pop() push() 等数组方法。

想要得到伪数组里面的每一个对象，怎样实现？

需要遍历（for）的方式获得。
实例

  // 通过遍历的方式，获得伪数组NodeList里面的每一个dom对象（元素）
let lis = document.querySelectorAll('ul  li')
         // console.log(lis)
        for( let i = 0 ; i < lis.length; i++){
            console.log(lis[i])
        }
1
2
3
4
5
6

注意事项

哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已。

<span> 一个</span>
//哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

        let span = document.querySelectorAll('span')
        console.log(span)
1
2
3
4
5

2.2. 其他获取DOM元素方法（了解）

2.2.1.根据id获取一个和第一个元素

document.getElementById('id名称')
1

实例：获取id名称为abc的第一个标签

<div id="abc">abx</div>
<span id="abc">qw</span>
 //根据id获取一个和第一个元素 document.getElementById('id名称')
        let abc = document.getElementById('abc')
        console.log(abc)

1
2
3
4
5
6

2.2.2.根据标签获取一类标签元素

不管标签是否有无类名或id，只要是同样的标签名称均会被获取

document.getElementsByTagName('标签名称')
1

实例: 获取页面 所有 div

	    <div id="abc">abx</div>
	    <span id="abc">qw</span>
	    <div>1</div>
	    <div> q </div>
	    <div class="b"></div>
//2.根据标签获取一类标签元素 ，不管标签是否有无类名
//document.getElementsByTagName('标签名称')
// 获取页面 所有 div
let div = document.getElementsByTagName('div')
console.log(div)
1
2
3
4
5
6
7
8
9
10

2.2.3.根据类名，获取所有类名相同的标签元素

 document.getElementsByClassName('类名')
1

实例： 获取所有类名为b的所有标签

<div id="abc">abx</div>
    <span id="abc">qw</span>
    <div>1</div>
    <div> q </div>
    <div class="b"></div>
    <h1 class=" b">2</h1>
    <ul class="b">
        <li></li>
        <li></li>
        <li></li>
    </ul>
 let b = document.getElementsByClassName('b')
 console.log(b)
1
2
3
4
5
6
7
8
9
10
11
12
13

2.3 获取DOM元素对象总结

1. 获取一个DOM元素我们使用谁？

document.querySelector()

2. 获取多个DOM元素我们使用谁？

document.querySelectorAll()

3. document.querySelector() 方法能直接操作修改吗？

可以。由于获取的是一个元素，元素是唯一的，可以直接对其进行修改。

4. document.querySelectorAll() 方法能直接修改吗？ 如果不能可以怎么做到修改？

不可以， 因为得到的是数组，想要获取数组中的值，不能直接单独取数据操作，只能通过for循环遍历的方式一次给里面的元素做修改。

5. 获取页面中的标签我们最终常用那两种方式？

document. querySelectorAll()

document.querySelector()

6. querySelectorAll()和querySelector()两者的区别是什么？

querySelector() 只能选择一个元素， 可以直接操作

querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到
每一个元素

7. 他们两者小括号里面的参数有什么注意事项？

里面写css选择器

必须是字符串，也就是必须加引号

3.设置/修改DOM元素文本内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
就是操作对象使用的点语法。

如果想要修改标签元素的里面的文字内容，则可以使用如下几种方式：

1. document.write() 方法
2. 对象.innerText 属性
3. 对象.innerHTML 属性
1
2
3

3.1 document.write()

作用特点：

只能将文本内容追加到 前面的位置

文本中包含的标签会被解析

实例

<body>
    <div> I LOVE YOU!</div>
    <script>
        // 修改元素的文本更换内容
        //方法一：document.write()
        document.write('北京欢迎你！')
    
        document.write(`<h4>Hey!</h4>`)

    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11

3.2.元素innerText 属性

作用特点

1).将文本内容添加/更新到任意标签位置

2).文本中包含的标签不会被解析

语法

对象.属性名 = '属性值'
dom文本对象名·innerText = '修改/新增后文本的内容（属性值）'
1
2

注意事项

1.需要搭配获取DOM元素方法配合使用，且body中必须存在这个标签；
2.若标签有文本内容，innerText进行修改文本内容操作，但向修改的文本中包含的标签不会被解析；
3.若标签没有文本内容，innerText进行新增文本内容操作。
1
2
3

实例

案例操作文本

 <div>I LOVE YOU!</div>
  <span></span>
  <h1>100</h1>
1
2
3

1.将div标签的文字I LOVE YOU!进行修改为‘123’

// 1.将div标签的文字I LOVE YOU!进行修改为‘123’
  let a = document.querySelector('div')
   a.innerText = '123'
1
2
3

2.将‘’添加文本内容

 // 2.将‘<span></span>’添加文本内容
        let b = document.querySelector('span')
        b.innerText= '568'
1
2
3

3.将h1标签整体进行修改’

1999

'，文本中包含的标签不会被解析，h3不被解析

// 3.将h1标签整体进行修改'<h3>1999</h3>'，文本中包含的标签不会被解析，h3不被解析
        let h = document.querySelector('h1')
         h.innerText = '<h3>1999</h3>'
1
2
3

3.3.元素innerHTML属性

作用与特点

将文本内容添加/更新到任意标签位置

文本中包含的标签会被解析

语法

对象.属性名 = '属性值'
dom文本对象名·innerHTML = '修改/新增后文本的内容（属性值）'
1
2

注意事项

1.需要搭配获取DOM元素方法配合使用，且body中必须存在这个标签；
2.若标签有文本内容，innerHTML进行修改文本内容操作，但向修改的文本中包含的标签会被解析；
3.若标签没有文本内容，innerHTML进行新增文本内容操作；
4.innerHTML修改和新增标签类别受同时出现多个同名标签影响，
当代码中出现多个同名标签时：
case 1：若代码同时进行新增和修改同一类标签的文本内容，则通过js代码新增的该标签文本内容，
会被修改后的内容覆盖
case 2 :若代码没有同时进行新增和修改同一类标签的文本内容，而出现多个多个同类标签，执行该同类文本标签修改操作时，则该HTML文档中出现第一个这个同类标签的文本内容被修改。
1
2
3
4
5
6
7
8

实例

案例操作文本

 <div>I LOVE YOU!</div>
  <span></span>
  <h1>100</h1>
1
2
3

1.将div标签的文字I LOVE YOU!进行修改为‘123’；
2.将‘’添加文本内容，并修改标签为h3；
3.将h1标签整体进行修改，文本中包含的标签会被解析

  // 1.将div标签的文字I LOVE YOU!进行修改为‘123’
        let a = document.querySelector('div')
        a.innerHTML = '123'
        //2.将‘<span></span>’添加文本内容，并修改标签为h3
        let b = document.querySelector('span')
        b.innerHTML = '<h3>568</h3>'
        // 3.将h1标签整体进行修改'<h6>1233456</h6>'，文本中包含的标签会被解析，h6被解析
        let h = document.querySelector('h1')
         h.innerHTML = '<h6>123456</h6>'
1
2
3
4
5
6
7
8
9

自我延伸思考：

在HTML文档中出现多个相同类别的标签，
然后既向该同一类标签添加文本，
且在添加后，又再进行修改该类标签文本内容，
执行结果是怎样的？
1
2
3
4

案例：
在HTML文档中出现多个h1标签，
然后既向h1添加文本，
且在添加后，又再进行对h1标签修改文本内容，
执行结果是怎样的？
（哪个h1标签被修改为123456？）
案例操作文本

 <div>I LOVE YOU!</div>
  <span></span>
  <h1>100</h1>
  <h1>330</h1>
1
2
3
4

js代码

  //2.将‘<span></span>’添加文本内容，并修改标签为h3
        let b = document.querySelector('span')
        //将‘<span></span>’添加文本内容，并修改标签为h1
        b.innerHTML = '<h1>568</h1>'
        //b.innerHTML = '<h3>568</h3>'
        // 3.将h1标签整体进行修改'<h3>1999</h3>'，文本中包含的标签不会被解析，h3不被解析
        let h = document.querySelector('h1')
         h.innerHTML = '<h6>123456</h6>'
1
2
3
4
5
6
7
8

“将span标签添加文本内容，并修改标签为h1”，这里的h1标签被修改为123456

若不将‘span标签添加文本内容，并修改标签为h1，哪个h1标签被修改为123456？

案例操作文本

 <div>I LOVE YOU!</div>
  <span></span>
  <h1>100</h1>
  <h1>330</h1>
1
2
3
4

 //2.将‘<span></span>’添加文本内容，并修改标签为h3
        let b = document.querySelector('span')
        //将‘<span></span>’添加文本内容，并修改标签为h1
        // b.innerHTML = '<h1>568</h1>'
        b.innerHTML = '<h3>568</h3>'
        // 3.将h1标签整体进行修改'<h3>1999</h3>'，文本中包含的标签不会被解析，h3不被解析
        let h = document.querySelector('h1')
         h.innerHTML = '<h6>123456</h6>'
1
2
3
4
5
6
7
8

第一个h1标签被修改为123456

3.4.设置/修改DOM元素文本内容

1. 设置/修改DOM元素内容有哪3钟方式？

document.write() 方法

元素.innerText 属性

元素.innerHTML 属性

2. 三者的区别是什么？

document.write() 方法 只能追加到body中

元素.innerText 属性 只识别内容，不能解析标签

元素.innerHTML 属性 能够解析标签

如果还在纠结到底用谁，你可以选择innerHTML

3.5.案例：随机抽取的名字显示到指定的标签内部

需求：将名字放入span 盒子内部

参考资料：

vertical-align属性的用法

文章链接:
https://blog.csdn.net/Aislli/article/details/117250213?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167075254416782388027378%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167075254416782388027378&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-117250213-null-null.142^v68^pc_new_rank,201^v4^add_ask,213^v2^t3_control2&utm_term=vertical-align%E5%B1%9E%E6%80%A7&spm=1018.2226.3001.4187
1
2
3

vertical-align属性:

baseline(默认值) :把行内级盒子的基线与父盒的基线对齐,如果没有基线, margin bottom边缘与父盒基线对齐；
sub :把行内级盒子的基线降到父盒下标的适当位置；
super :把行内级盒子的基线升到父盒上标的适当位置；
<percentage> :把行内级盒子提升或者下降段距离 (距离相对于line height计算)，0%意味着同baseline一样；
<length> :把行内级盒子提升或者下降一段距离 , 0cm意味着同baseline-样；
middle :行内级盒子的中心点与父盒基线加上x height-半的线对齐；
text top :把行内级盒子的顶部同父盒的内容区域顶部对齐；
text bottom :把行内级盒子的底部同父盒的内容区域底部对齐；
top :把行内级盒子的顶部跟line box顶部对齐；
bottom :把行内级盒子的底部跟line box底部对齐；
1
2
3
4
5
6
7
8
9
10

注意：vertical-align属性中没有center、left 和 bottom

分析与代码：

HTML

一个box大盒子+文字“抽中的选手是:”+ box内的小盒子name(用于存放随机生成的名字）

	<div class="box">
      抽中的选手是:
      <div class="name"></div> 
    </div>
1
2
3
4

CSS
由于div是块级元素，需要将其转换为行内块元素，
vertical-align: middle; 行内级盒子的中心点与父盒基线加上x height-半的线对齐；

 <style>
        .name {
            display: inline-block;
            width: 100px;
            height: 20px;
            border: 1px solid #000;
            vertical-align: middle;
            text-align: center;
            line-height: 20px; 
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11

没有veritcal-align : center/left/right属性，否则如下：


当veritcal-align出现划线，说明这个css属性没有生效，需要查阅文档看看是否有该属性。

JavaScript

思路：

        //随机函数
         1. 定义数组变量存放名字
        
         2.声明随机点名函数，在函数中，将数组序号与生成随机数公式进行绑定
      
         3.调用函数获取并打印输出生成随机的名字数组序号，并保存到存储随机序号的变量中。
         
        // 获取文本，向文本添加内容
         4.获取要追加内容的标签，注意：获取类元素标签要带“.”,即：.类名
        
         5.div文本对象属性innerHTML添加随机生成的名字文本内容

         6.之后删除这个人名字
        数组名.splice(从哪里开始删， 删几个)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

 <script>
        //随机函数
         // 1. 定义数组变量存放名字
        let randomname =  ['赵云','黄忠', '关羽', '张飞', '马超', '刘备', '曹操'] 

        // 2.声明随机点名函数，在函数中，将数组序号与生成随机数公式进行绑定
        function randomGet (min,max){
            return Math.floor(Math.random()*(max- min + 1))+min
        }
        //3.调用函数获取并打印输出生成随机的名字数组序号，并保存到存储随机序号的变量中。
        let getName1 = randomGet(0,randomname.length-1)
        
        // 获取文本，向文本添加内容
        // 4.获取要追加内容的标签，注意：获取类元素标签要带“.”,即：.类名
        let div = document.querySelector('.name')
        //观察div是否获取到元素
        //console.log(div)
        //5.div文本对象属性innerHTML添加随机生成的名字文本内容
        div.innerHTML= randomname[getName1]
        //6.之后删除这个人名字
        // 数组名.splice(从哪里开始删， 删几个)
        randomname.splice(getName1,1 )
       
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

遇到的bug:

注意：获取类元素标签要带“.”,即：.类名，要不然，想要获取的元素无法被获取到
例：

操作文本

<div class="box">
      抽中的选手是:
      <div class="name"></div> 
    </div>
1
2
3
4

<style>
        .name {
            display: inline-block;
            width: 100px;
            height: 20px;
            border: 1px solid #000;
            vertical-align: middle;
            text-align: center;
            line-height: 20px; 
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11

JavaScript 代码

let div = document.querySelector('name')
//观察div是否获取到元素
        console.log(div)
1
2
3

结果为null
当将let div = document.querySelector(‘name’)修改为let div = document.querySelector(‘.name’)后

let div = document.querySelector('.name')
        //观察div是否获取到元素
        console.log(div)
1
2
3

运行结果

4.设置/修改DOM元素属性

4.1. 设置/修改元素常用属性

还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片

常见的属性比如： href、title、src 等

语法

对象.属性名
（存储获取标签对象的变量名.要修改/新增的标签属性）
1
2

注意事项

1.需要配合获取标签元素方法使用；
2.若标签有这个属性,则进行修改标签元素属性操作；
3.若标签没有这个属性，则进行新增这个标签元素属性操作；
4.因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位。

实例

例1：修改img标签的src属性，将src由"./images/3.webp"修改为"./images/3.webp"，并新增title属性’刘德华好帅’

 <img src="./images/3.webp" alt="">
  //1.获取要修改的标签元素
    let pic = document.querySelector('img')
  //2.修改标签对应的属性值 
    //语法：存储获取标签对象的变量名.要修改的标签属性
    //例1：修改img标签的src属性
    pic.src = './images/5.webp'
    pic.title = '刘德华好帅'
1
2
3
4
5
6
7
8

运行结果 ：

图片发生变化，并且图片多了title属性。

编写js代码前如下：

编写js代码后：

例2：
需求：当我们刷新页面，页面中的图片随机显示不同的图片

我的思路和代码：

思路 ：

HTML
在body中添加img标签

<img src="./images/1.webp" alt="">
1

JavaScript

1. 在定义数组变量存放图片路径
    
2.声明随机函数，在函数中，将数组序号与生成随机数公式进行绑定

3.调用函数获取并打印输出生成随机的图片路径数组序号，并保存到存储随机序号的变量中。

 
 获取img标签，向标签添加图片路径src
 
4.pic变量获取要追加内容的标签


5.pic文本对象属性添加随机生成的图片路径src属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14

代码：

 <img src="./images/1.webp" alt="">
    <script>
       // 1. 定义数组变量存放图片路径
       let imgRoad =  ['./images/1.webp','./images/2.webp', './images/3.webp','./images/4.webp','./images/5.webp','./images/6.webp'] 

// 2.声明随机函数，在函数中，将数组序号与生成随机数公式进行绑定
function randomGet (min,max){
    return Math.floor(Math.random()*(max- min + 1))+ min
}
//3.调用函数获取并打印输出生成随机的图片路径数组序号，并保存到存储随机序号的变量中。
let getPic = randomGet(0,imgRoad.length-1)

// 获取标签，向标签添加图片
// 4.获取要追加内容的标签
let pic = document.querySelector('img')
//观察pic是否获取到元素
// console.log(pic)

//5.pic文本对象属性添加随机生成的图片路径src属性
pic.src = imgRoad[getPic]

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

参考代码
代码思路对比分析：

利用图片是连续数字的特点，生成随机数

1.获取图片元素
2.随机得到图片的序号
3.完成  src 属性赋值
1
2
3

代码：

//1.获取图片元素
    let pic = document.querySelector('img')
    //2.随机得到图片的序号
    function getRandom(min ,max){
        return Math.floor(Math.random() * (max - min + 1))+min
    }
    let num = getRandom(1,6)
    //3.完成  src 属性赋值
    pic.src = './images/${num}.webp'
1
2
3
4
5
6
7
8
9

4.2.设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。比如通过 轮播图小圆点自动更换颜色样式，点击按钮可以滚动图片，这是移动的图片的位置 left 等等。

1. 通过 style 属性操作CSS
2. 操作类名(className) 操作CSS
3. 通过 classList 操作类控制CSS

4.2.1.通过 style 属性操作CSS

语法：

对象.style.样式属性 = 值
1

注意事项：

1.需要配合获取标签元素方法使用；
2.若标签有这个属性,则进行修改标签元素属性操作；
3.若标签没有这个属性，则进行新增这个标签元素属性操作。
4.遇到带“ - ”的css属性，需要将其转换为小驼峰命名法
比如：改变background-color样式css属性应该为：
获取标签元素对象名.style.backgroundColor = ‘新属性值’

实例

例1：将一个div标签样式通过js将blue背景色修改为red，宽度由300px修改为500px,新增margin-top = 300px

 //1.获取元素
        let div = document.querySelector('div')
        // 2.改变样式属性 通过style 属性操作CSS
        //语法： 对象.style.样式属性 = 值
        // 注意事项：
        //1.需要配合获取标签元素方法使用；
        // 2.若标签有这个属性,则进行修改标签元素属性操作；
        // 3.若标签没有这个属性，则进行新增这个标签元素属性操作。
        // 4.遇到带“ - ”的css属性，需要将其转换为小驼峰命名法
        // 比如：改变background-color样式css属性应该为：
        // 获取标签元素对象名.style.backgroundColor = '新属性值'
        //例1：将一个div标签样式通过js将blue背景色修改为red，宽度由300px修改为500px,新增margin-top = 300px
        div.style.backgroundColor = 'red'
        div.style.width = '500px'
        div.style.marginTop = '300px'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.页面刷新，页面随机更换背景图片

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

思路：

1.定义和调用随机函数

2.css页面背景图片 background-image

3.调用函数获取并打印输出生成随机的序号，并保存到变量中。

4. 标签选择body， 因为body是唯一的标签，可以直接写 document.body.style，
即： document.body.style.backgroundImage

1
2
3
4
5
6
7
8
9

 <style>
        /* 2.css页面背景图片 background-image */
        body{
            background-image: url(./images/desktop_1.jpg);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <script>
        

    // 1.定义和调用随机函数
    function randomGet (min,max){
        return Math.floor(Math.random()*(max- min + 1))+min
    }
    //3.调用函数获取并打印输出生成随机的序号，并保存到变量中。
    let num = randomGet(1,10)
    // 4.标签选择body， 因为body是唯一的标签，可以直接写 document.body.style，
    // 即： document.body.style.backgroundImage
    document.body.style.backgroundImage = `url(./images/desktop_${num}.jpg)`

    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.2.2. 操作类名(className) 操作CSS

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

语法：

获取元素变量名.className = '想要修改完成实现的css类名'
1

注意：

1. 由于class是关键字, 所以使用className去代替；

2. 要搭配获取标签属性方法使用；

3. 类名属性值不要带‘.’,即不要写成’.类名’；

4. 直接使用 className 赋值会覆盖以前的类名, className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名。

实例

将 one类div标签的css样式通过js将样式替换成 active,并添加two类

初始静态页面

<!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>使用className修改样式</title>
    <style>
        .one{
            width: 100px;
            height: 200px;
            background-color: #0012ff;
        }
       
    </style>
</head>
<body>
    <div class="one"></div>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

css 要求：

.active{
            
            width: 300px;
            height: 400px;
            background-color: #e1211e;
            margin-top: 200px;

        }
        .two {
           border: 4px solid #000;
        }
1
2
3
4
5
6
7
8
9
10
11

代码：

<!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>使用className修改样式</title>
    <style>
        .one{
            width: 100px;
            height: 200px;
            background-color: #0012ff;
        }
        /* 将方法一修改的css样式封装在style标签中的一个css样式类active */
        .active{
            
            width: 300px;
            height: 400px;
            background-color: #e1211e;
            margin-top: 200px;

        }
        .two {
           border: 4px solid #000;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <script>
        // 将 one类标签的css样式通过js将样式替换成 active,并添加two类
        //1.获取元素
        let box = document.querySelector('.one')
        //2.设置 .one类标签的css样式
        //方法一：通过style控制css样式属性
        // box.style.width = '300px'
        // box.style.height = '400px'
        // box.style.backgroundColor = '#e1211e'
        // box.style.marginTop = '200px'
        //方法二：使用className修改样式，将方法一修改的css样式封装在style标签中的一个css样式类active
        // 语法：获取元素变量名.className = '想要修改完成实现的css类名'
        box.className = 'active'
        //className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
        box.className = 'active two'
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

运行结果：

4.2.3. 通过 classList 操作类控制CSS

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

语法

 1.在元素中，追加某个css样式类：元素.classList.add('类名')；
 2.在元素中，删除某个css样式类：元素.classList.remove('类名')
 3.在元素中，切换某个css样式类：元素.classList.toggle('类名')
 （什么是切换？获取元素中有这个类就做删除和替代类操作，原来元素没有这个类，则是在现有类的基础上，再添加这个类)

1
2
3
4
5

注意

需要配合获取元素方法使用，无论增加/删除/切换这个类，在括号内不要带‘.’,即括号内不要写成’.类名’

实例
将 one类div标签的css样式通过js中的classList将样式将样式进行如下修改操作：

(1).在元素中，追加’two’样式类
(2).在元素中，删除(1)的样式类
(3).在元素中，切换为active样式类

初始静态页面与css样式代码

<!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>使用clasList修改样式</title>
    <style>
        .one{
            width: 100px;
            height: 200px;
            background-color: #0012ff;
        }
        /* 将方法一修改的css样式封装在style标签中的一个css样式类active */
        .active{
            
            width: 300px;
            height: 400px;
            background-color: #e1211e;
            margin-top: 200px;

        }
        .two {
           border: 4px solid #000;
        }
    </style>
</head>
<body>
    <div class="one"></div>
   
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

代码实现：

<!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>使用clasList修改样式</title>
    <style>
        .one{
            width: 100px;
            height: 200px;
            background-color: #0012ff;
        }
        /* 将方法一修改的css样式封装在style标签中的一个css样式类active */
        .active{
            
            width: 300px;
            height: 400px;
            background-color: #e1211e;
            margin-top: 200px;

        }
        .two {
           border: 4px solid #000;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <script>
        //将 one类div标签的css样式通过js中的classList将样式将样式进行如下修改操作：
        //(1).在元素中，追加'two'样式类
        //(2).在元素中，删除(1)的样式类
        //(3).在元素中，切换为active样式类
        // 1.获取元素
        let box = document.querySelector('.one')
        //2.使用classList修改样式
        //语法：
        //1.在元素中，追加某个css样式类：元素.classList.add('类名')；
        box.classList.add('two')
        //2.在元素中，删除某个css样式类：元素.classList.remove('类名')
        box.classList.remove('two')
        //3.在元素中，切换某个css样式类：元素.classList.toggle('类名')（什么是切换？获取元素中有这个类就做删除和替代类操作，原来元素没有这个类，则是在现有类的基础上，再添加这个类)
        box.classList.toggle('active')


    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

4.2.4.设置/修改元素样式属性小结

1. 设置/修改元素样式属性通过style属性引出来

2. 通过 style 属性操作CSS,如果需要修改一个div盒子的样式，比如 padding-left, 如何写？

element.style.paddingLeft = ‘300px’

小驼峰命名法

3. 通过 style 属性操作CSS,因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位

4. 使用 className 有什么好处？

   可以同时修改多个样式

5. 使用 className 有什么注意事项？
   直接使用 className 赋值会覆盖以前的类名

6. 使用 className 和classList的区别？

className修改大量样式的更方便

classList修改不多样式的时候方便

classList 是追加和删除不影响以前类名
1
2
3
4
5

4.3. 设置/修改表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别

表单元素 HTML

参考资料

1. W3School：

https://www.w3school.com.cn/html/html_forms.asp
1

2.简书
input的name属性

https://www.jianshu.com/p/6782d69c1140
1

input 元素

<input type=" ">
input元素是最重要的表单元素。
input元素有很多形态，根据不同的 type 属性。

(1)type值使用类型：
类型	    描述
text	  定义常规文本输入。
radio	  定义单选按钮输入（选择多个选择之一）
submit	  定义提交按钮（提交表单）
password  定义密码字段：
checkbox  定义复选框。
button    定义按钮。
number    用于应该包含数字值的输入字段。

(2) 常用的输入限制（其中一些是 HTML5 中新增的:

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

（3）input的name 属性  

1.作为可与服务器交互数据的HTML元素的服务器端的标示，在服务器通过这个取得元素提交的值；
2.在input标签的属性 type='radio'分组，就是根据相同的Name属性来实现的，比如：实现男女性别分组

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div class="login">
  <form action="/getInfo" method="get">
    
    <div class="sex">
      <label>性别</label>
      <input type="radio" name="sex" value="男"> 男
      <input type="radio" name="sex" value="女"> 女
    </div>
    </div>
  </form>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

例：将input标签设置type类型为包含数字值的输入字段,并且标识name为points，输入最小值为0"，最大值为100 ,间隔为10，默认值为 30

设置/修改表单元素属性步骤：

1.获取: DOM对象.属性名

2.设置: DOM对象.属性名 = 新值

实例

设置表单内默认值为真我GT，将输入内容设置为密码，让用户不可见value里的值
延伸知识点 ：
输入密码眼睛可见与不可见原理：
可见时 input的type值先设置为text,不可见时input的type值为password

 <input type="text">
  
   		<script>
        //基本实例
        // 1.获取表单元素
        let input = document.querySelector('input')
        // 2.取值或设置值 得到input里面的值可以用value
        //设置表单内默认值为真我GT
        input.value = '真我GT'
        //输入密码眼睛可见与不可见原理：
        //可见时 input的type值先设置为text,不可见时input的type值为password
        //将输入内容设置为密码，让用户不可见value里的值
         input.type = 'password'
        
        </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

设置/修改表单启用/禁用、选中与不选中、下拉菜单option选中与不选中

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性，比如： disabled、checked、selected。

disabled(禁用)、checked（默认选中）、selected(下拉菜单select选项标签option设置)

disable === false 启用，disable === true 禁用
不勾选复选框checked = false，勾选复选框checked = true
设置select的option选项不选中，selected = true，选项选中，selected = false

实例

启用button，不勾选复选框， select 选项option默认选中与不选中
操作文本

<!-- 将button默认设置为禁用，通过js设置启用与禁用 -->
    <button disabled> end</button> 
     <!-- 复选框-->
    <input type="checkbox" name="" id="" class="check">
    <!-- 下拉菜单select -->
     <select name="" id="" >
        <option value="" >南京信息工程大学</option>
        <option value="" selected >无锡学院（南京信息工程大学滨江学院）</option>
        <option value="" >南京信息工程大学金牛湖校区</option> 
        
     </select>
1
2
3
4
5
6
7
8
9
10
11

 <!-- 将button默认设置为禁用，通过js设置启用与禁用 -->
    <button disabled> end</button> 
     <!-- 复选框-->
    <input type="checkbox" name="" id="" class="check">
    <!-- 下拉菜单select -->
     <select name="" id="" >
        <option value="" >南京信息工程大学</option>
        <option value="" selected >无锡学院（南京信息工程大学滨江学院）</option>
        <option value="" >南京信息工程大学金牛湖校区</option> 
        
     </select>
 		//启用与禁用
        // 操作标签：button
        // 1.获取标签元素
         let btn = document.querySelector('button')
        //2.设置启用与禁用
        // 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性，比如： disabled、checked、selected
        // disabled(禁用)、checked（默认选中）、selected(下拉菜单select选项标签option设置)
        // disable === false 启用，disable === true 禁用
        
        //启用button
        btn.disabled = false
        // 勾选复选框
        let checkbox = document.querySelector('.check')
        //不勾选复选框checked = false，勾选复选框checked = true
        checkbox.checked = false
        // select 选项option默认选中与不选中
        let sel = document.querySelector('option')
        //设置选项不选中，selected = true，选项选中，selected = false
        sel.selected = true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

5.定时器-间歇函数

5.1.定时器函数在开发中的使用场景

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发，例如：网页中的倒计时，
要实现这种需求，需要定时器函数，定时器函数有两种，间歇函数是其中的一种。

5.2.定时器函数基本使用

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

5.2.1. 开启定时器

语法

setInterval (函数，时间)
1

间隔时间单位是ms(毫秒)，1s= 1000ms,函数和时间中间要用“，”（逗号隔开），且间隔时间不带时间单位。

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

注意

1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

实例
1.匿名函数输出 ，每隔1s,console.log 输出月薪过万

setInterval(function(){
            console.log('月薪过万！')
        },1000)
1
2
3

2.使用普通函数每隔2s,console.log 输出月薪过1.5万

function fun (){
            console.log('月薪过1.5万！')
        }
        setInterval(fun,2000)
1
2
3
4

3.观察定时器返回值

 //2.使用普通函数每隔2s,console.log 输出月薪过1.5万
        function fun (){
            console.log('月薪过1.5万！')
        }
        // setInterval(fun,2000)
        // 定时器返回的是一个id数字
        //观察定时器返回值
        let timer = setInterval(fun,2000)
        let timer2 = setInterval(fun,2000)
1
2
3
4
5
6
7
8
9

5.2.2. 关闭定时器

语法

let 变量名 = setInterval (函数，时间)
 clearInterval(变量名)
1
2

注意

1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

实例：

关闭fun函数定时器

//2.使用普通函数每隔2s,console.log 输出月薪过1.5万
        function fun (){
            console.log('月薪过1.5万！')
        }
        // setInterval(fun,2000)
        // 定时器返回的是一个id数字
        //观察定时器返回值
        // let timer = setInterval(fun,2000)
        let timer2 = setInterval(fun,2000)
        // 清除关闭定时器
        //语法：let 变量名 = setInterval (函数，时间)
        //clearInterval(变量名)
        //关闭fun函数定时器
        clearInterval(timer2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

运行结果：

使用清除定时器前

清除定时器后

5.3.定时器-间歇函数小结

1. 定时器函数有什么作用？

可以根据时间自动重复执行某些代码。

2. 定时器函数如何开启？

setInterval(函数名, 时间)

定时器函数如何关闭？

语法：let 变量名 = setInterval (函数，时间)

clearInterval(变量名)

5.4 综合案例 - 倒计时效果

需求：按钮60秒之后才可以使用

素材

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

我的代码与思路
思路

1.禁用button 
2.设置时间初始值，获取标签对象，修改标签对象内的文本 
3.写倒计时函数 
4.开启定时器
5.清除定时器   
       
1
2
3
4
5
6

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <!-- 1.禁用button -->
    <button class="btn" disabled>我已经阅读用户协议</button>
    <script>
        //2.设置时间初始值
         let time = 30
        //  3.写倒计时函数 
         function timeDown (){
            //获取标签对象，修改标签对象内的文本 
            let bt = document.querySelector('.btn')
            
            bt.innerHTML = `我已经阅读用户协议(${time--})`
           
         }
         
        //  4.开启定时器
       let start = setInterval(timeDown,1000)
        //  5.清除定时器   
        if (time === -1){ 
            bt.disabled = false   
            clearInterval(start)
         }    
       
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

bug

参考代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(6)</button>
    <script>
        // 1. 获取元素 button 
        let btn = document.querySelector('.btn')
        // 2. 计算逻辑
        // 2.1 我们需要一个变量 用来计数  
        let i = 6
        // 2.2 开启定时器 间歇函数  timer 定时器的序号id
        let timer = setInterval(function () {
            i--
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if (i === 0) {
                // 不走了，清除定时器 
                clearInterval(timer)
                // 开启按钮
                btn.disabled = false
                // 更换文字
                btn.innerHTML = '我同意该协议啦'
            }
        }, 1000)
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

参考代码分析

1. 获取元素 button
2. 计算逻辑。定义一个变量 用来计数，开启定时器 间歇函数 timer 定时器的序号id
3. 当倒计时为0不走了，清除定时器，开启按钮启用，更换文字内容
   参考代码使用匿名函数写间歇函数，把控制关闭间歇函数的代码封装在间歇函数的函数部分

我的代码bug分析与修复

bug分析：

由于我定义的timeDown函数只在间歇函数内有效和被调用，若需要使用条件语句控制其开启和关闭，必须在间歇函数内部。

修复措施：
将使用条件语句控制间歇函数关闭的代码写在开启间歇函数的函数语句中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <!-- 1.禁用button -->
    <button class="btn" disabled>我已经阅读用户协议</button>
    <script>
        //2.设置时间初始值
         let time = 30
        //  3.写倒计时函数 
         function timeDown (){
            //获取标签对象，修改标签对象内的文本 
            let bt = document.querySelector('.btn')
            
            bt.innerHTML = `我已经阅读用户协议(${time--})`
            
            //  5.清除定时器   
        if (time === -1){ 
            bt.disabled = false   
            clearInterval(start)
         }    
           
         }
         
        //  4.开启定时器
       let start = setInterval(timeDown,500)
        
       
    </script>
    
    

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

6.综合案例-网页轮播图效果

需求：每隔一秒钟切换一个图片

素材

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐10屏轮播图</title>
    <style>
        .img-box {
            width: 700px;
            height: 320px;
            margin: 50px auto 0;
            background: #000;
            position: relative;
        }

        .img-box .tip {
            width: 700px;
            height: 53px;
            line-height: 53px;
            position: absolute;
            bottom: 0px;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 10;
        }

        .img-box .tip h3 {
            width: 82%;
            margin: 0;
            margin-right: 20px;
            padding-left: 20px;
            color: #98E404;
            font-size: 28px;
            float: left;
            font-weight: 500;
            font-family: "Microsoft Yahei", Tahoma, Geneva;
        }

    </style>
</head>

<body>
    <div class="img-box">
        <img class="pic" src="images/b01.jpg" alt="第1张图的描述信息">
        <div class="tip">
            <h3 class="text">挑战云歌单，欢迎你来</h3>
        </div>
    </div>


</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

HTML+CSS简要分析
大盒子img-box包着放图片的小盒子pic以及剩余区域的tip盒子，tip盒子再包着放文字内容的text盒子，然后利用子绝父相将剩余区域的tip盒子定位到图片上。

补充知识点：
z-index就是堆叠上下文，它规定一个元素的堆叠顺序。一般来说，拥有更高堆叠顺序的元素会处于较低堆叠元素的前面。
参考链接

https://blog.csdn.net/qq_39643546/article/details/124729278
1

JavaScript思路分析
基本思路：

引入标签对象，开启定时器
1

详细思路

 1.定义数组对象存放图片和文字
 
 2.获取图片和文字内容标签对象
 
 3.定义变量i用于控制图片内容和文字从data数组对象第一个数据开始跳转的序号
 
 4.启动定时器实现图片和文字轮播
 
    4.1 实现图片和文字轮播，通过js修改pic图片标签的src属性和text文字标签的innerHTML属性
     
    4.2 实现图片和文字循环轮播，当i到8时，给i重新赋值，由于i++，当i=0,图片从第二张图（i=1）开始跳转，所以将i设置为-1,i++后就从第一张图开始跳转1
        
  
    
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

代码:

// 1.定义数组对象存放图片和文字
    let data = [
            {
                imgSrc: 'images/b01.jpg',
                title: '挑战云歌单，欢迎你来'
            },
            {
                imgSrc: 'images/b02.jpg',
                title: '田园日记，上演上京记'
            },
            {
                imgSrc: 'images/b03.jpg',
                title: '甜蜜攻势再次回归'
            },
            {
                imgSrc: 'images/b04.jpg',
                title: '我为歌狂，生为歌王'
            },
            {
                imgSrc: 'images/b05.jpg',
                title: '年度校园主题活动'
            },
            {
                imgSrc: 'images/b06.jpg',
                title: 'pink老师新歌发布，5月10号正式推出'
            },
            {
                imgSrc: 'images/b07.jpg',
                title: '动力火车来到西安'
            },
            {
                imgSrc: 'images/b08.jpg',
                title: '钢铁侠3，英雄镇东风'
            },
            {
                imgSrc: 'images/b09.jpg',
                title: '我用整颗心来等你'
            },
        ]
    // 2.获取图片和文字内容标签对象
    let pic = document.querySelector('.pic')
    let text = document.querySelector(' .text')
    // 3.定义变量i用于控制图片内容和文字从data数组对象第一个数据开始跳转的序号
    let i = 0
    // 4.启动定时器实现图片和文字轮播
     setInterval(function(){
        //4.1 实现图片和文字轮播
        //通过js修改pic图片标签的src属性和text文字标签的innerHTML属性
        i++
        pic.src = data[i].imgSrc
        text.innerHTML = data[i].title
        // 4.2 实现图片和文字循环轮播，
        //当i到8时，给i重新赋值，
        // 由于i++，当i=0,图片从第二张图（i=1）开始跳转，所以将i设置为-1,i++后就从第一张图开始跳转1
        if ( i = data.length - 1){
            i = -1
        }

      
       
            
    },1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

测试
起始图片

最后一张图片

测试结果与代码bug:

图片轮播到第二张后不再轮播
1

参考代码

script>
        // 数据
        let data = [
            {
                imgSrc: 'images/b01.jpg',
                title: '挑战云歌单，欢迎你来'
            },
            {
                imgSrc: 'images/b02.jpg',
                title: '田园日记，上演上京记'
            },
            {
                imgSrc: 'images/b03.jpg',
                title: '甜蜜攻势再次回归'
            },
            {
                imgSrc: 'images/b04.jpg',
                title: '我为歌狂，生为歌王'
            },
            {
                imgSrc: 'images/b05.jpg',
                title: '年度校园主题活动'
            },
            {
                imgSrc: 'images/b06.jpg',
                title: 'pink老师新歌发布，5月10号正式推出'
            },
            {
                imgSrc: 'images/b07.jpg',
                title: '动力火车来到西安'
            },
            {
                imgSrc: 'images/b08.jpg',
                title: '钢铁侠3，英雄镇东风'
            },
            {
                imgSrc: 'images/b09.jpg',
                title: '我用整颗心来等你'
            },
        ]

        // 1. 获取元素  图片  和  h3
        let pic = document.querySelector('.pic')
        let text = document.querySelector('.text')
        // i 记录图片的张数
        let i = 0
        // 2.开启定时器
        setInterval(function () {
            i++
            // 修改图片的src属性
            // console.log(data[i].imgSrc)
            pic.src = data[i].imgSrc
            // 修改文字内容
            text.innerHTML = data[i].title

            // 无缝衔接
            if (i === data.length - 1) {
                i = -1
            }
            // i === 8 ? i = -1 : i
        }, 1000)
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

bug分析与修复
分析

 if ( i = data.length - 1){
            i = -1
        }
   这个语句中i=data.length是赋值语句，不是全等，我们需要的是i的值全等或数值相等时，i = -1
从而保证i=-1时开始跳转
1
2
3
4
5

修复
i == data.length - 1 或 i === data.length - 1
即

 if ( i == data.length - 1){
             i = -1
        }
     或
   if ( i === data.length - 1){
           i = -1
        }
1
2
3
4
5
6
7

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐10屏轮播图</title>
    <style>
        .img-box {
            width: 700px;
            height: 320px;
            margin: 50px auto 0;
            background: #000;
            position: relative;
        }

        .img-box .tip {
            width: 700px;
            height: 53px;
            line-height: 53px;
            position: absolute;
            bottom: 0px;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 10;
        }

        .img-box .tip h3 {
            width: 82%;
            margin: 0;
            margin-right: 20px;
            padding-left: 20px;
            color: #98E404;
            font-size: 28px;
            float: left;
            font-weight: 500;
            font-family: "Microsoft Yahei", Tahoma, Geneva;
        }
        img{
            src: url();
        }
        

    </style>
</head>

<body>
    <div class="img-box">
        <img class="pic" src="images/b01.jpg" alt="第1张图的描述信息">
        <div class="tip">
            <h3 class="text">挑战云歌单，欢迎你来</h3>
        </div>
    </div>
<script>
    // 1.定义数组对象存放图片和文字
    let data = [
            {
                imgSrc: 'images/b01.jpg',
                title: '挑战云歌单，欢迎你来'
            },
            {
                imgSrc: 'images/b02.jpg',
                title: '田园日记，上演上京记'
            },
            {
                imgSrc: 'images/b03.jpg',
                title: '甜蜜攻势再次回归'
            },
            {
                imgSrc: 'images/b04.jpg',
                title: '我为歌狂，生为歌王'
            },
            {
                imgSrc: 'images/b05.jpg',
                title: '年度校园主题活动'
            },
            {
                imgSrc: 'images/b06.jpg',
                title: 'pink老师新歌发布，5月10号正式推出'
            },
            {
                imgSrc: 'images/b07.jpg',
                title: '动力火车来到西安'
            },
            {
                imgSrc: 'images/b08.jpg',
                title: '钢铁侠3，英雄镇东风'
            },
            {
                imgSrc: 'images/b09.jpg',
                title: '我用整颗心来等你'
            },
        ]
    // 2.获取图片和文字内容标签对象
    let pic = document.querySelector('.pic')
    let text = document.querySelector(' .text')
    // 3.定义变量i用于控制图片内容和文字从data数组对象第一个数据开始跳转的序号
    let i = 0
    // 4.启动定时器实现图片和文字轮播
     setInterval(function(){
        //4.1 实现图片和文字轮播
        //通过js修改pic图片标签的src属性和text文字标签的innerHTML属性
        i++
        pic.src = data[i].imgSrc
        text.innerHTML = data[i].title
        // 4.2 实现图片和文字循环轮播，
        //当i到8时，给i重新赋值，
        // 由于i++，当i=0,图片从第二张图（i=1）开始跳转，所以将i设置为-1,i++后就从第一张图开始跳转1
        // if ( i = data.length - 1){
        //     i = -1
        // }
       

        if ( i == data.length - 1){
            i = -1
        }
        
         // if ( i === data.length - 1){
        //    i = -1
        // }
            
    },1000)
    
    
        
   
</script>

</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

运行结果