学校组织观看纪录片《我在故宫修文物》，讲的是中国的顶级“工匠”在故宫修文物的故事。从纪录片中张华得知，潍坊就有两位传承人被选入故宫修文物。想去故宫修文物并不容易，不仅要有过硬的技艺，还要“过五关斩六将”。张华没有去过故宫，深深地被纪录片中的各种修补工作吸引了，于是开始搜索有关故宫的一些知识，浏览到故宫博物院的网站时，发现首页最上面的图片很特别。

张华向李老师请教，这是什么效果？李老师告诉他，这是轮播图。随着互联网技术的飞速发展，网页内容的呈现越来越注重用户体验和动态效果的艺术展现，轮播图就是很好的例子。无论是购物网站，还是新闻网站，轮播图几乎是网站的“标配”。

张华开始编写轮播图的代码，使用在项目6中学到的DOM的相关知识，图片只能切换一轮，不能连续进行更换，他请教李老师这个问题该怎么解决。

李老师告诉他，这需要用到BOM的相关知识，JavaScript是由ECMAScript、BOM和DOM这3部分组成的。

根据项目目标，实现自动轮播图效果。该页面所有内容通过最外层的“大盒子”slider来封装，也就是轮播图的可视区域，图片放在list盒子中，具体如图7-21、图7-22所示。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/013c275a7f0eb34c31be62d35d929cad.image.webp)

轮播的关键在于每隔一段时间更换一张图片，工作原理如图7-23所示。各大网站上的轮播图默认情况下是循环向右（向后）轮播的，包括自动轮播和手动轮播，本项目实现自动轮播效果。图片每次移动一张图片的宽度的距离，采用定时器实现连续移动。

为了保证平滑过渡，我们添加transition属性。为了实现无缝衔接的效果，我们在图片4的后面再放上图片1，如图7-24所示，这样就能保证最后一张图片4和下一轮的图片1衔接起来，在程序中添加延时器来实现无缝衔接的效果。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/4b15757467815843d4d907f06cc6a737.image.webp)

1. 页面结构
根据项目分析，轮播6张图片，图片列表中设置7张图片，具体如下。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e8547f0331678553f9c7bbfd37e3dfc3.image.webp)


```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="js7.css">
</head>
<body>
    <div id="silder">
        <ul id="list">
            <li><img src="image/1.jpg" alt=""></li>
            <li><img src="image/2.png" alt=""></li>
            <li><img src="image/3.jpg" alt=""></li>
            <li><img src="image/4.jpg" alt=""></li>
            <li><img src="image/5.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/1.jpg" alt=""></li>
        </ul>
    </div>
    <script src="js7.js"></script>
</body>
</html>

```

2. CSS样式

采用CSS样式进行图片美化和网页布局，将图片“浮动”，同时定义父盒子和子盒子的定位关系，具体如图。
  

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/125c7c6b19a4453a1ff0a409679ec0ba.image.webp)


```
* {
    padding: 0;
    margin: 0;
    list-style: none;
}

#silder {
    margin: auto;
    position: relative;
    width: 1366px;
    height: 700px;
    overflow: hidden;
}

#list {
    position: absolute;
    left: 0;
    top: 0;
    width: 700%;
    height: 700px;
}

#list li {
    float: left;
    width: 1366px;
    height: 700px;
}

#list li img {
    max-width: 1366px;
}
```



3. 脚本代码

如上代码实现的页面是没有动态效果的，若想实现图片的轮播效果必须添加脚本，轮播的关键在于每隔一段时间更换一张图片。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f4c740cc9d3f46022024ea0f7e544ce3.image.webp)

```
var slider = document.querySelector("#slider");
var list = document.querySelector("#list");
var img = document.querySelector("img");
var uli = list.children; //获取图片列表
var index = 0; //图片序号
console.log("test1");
setInterval(move, 1000);

function move() {
    console.log("test2");
    if (index < uli.length - 1) {
        index++;
        list.style.left = -index * img.offsetWidth + "px";
        list.style.transition = 'left 1s';
        if (index == uli.length - 1) {
            console.log('tttt');
            setTimeout(function() {
                index = 0;
                list.style.left = -index * img.offsetWidth + "px";
                list.style.transition = 'left 0s';
            }, 1000);
        }
    } else {
        index = 0;
        list.style.left = -index * img.offsetWidth + "px";
        list.style.transition = 'left 0s';
        console.log("test3");
    }
}


function silder(){
    while(1){
        index++;
        if(index==uli.length)
            index =0;
        
    }
}

```


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5585bddc87a0b2a591092d32039c38af.image.webp)

以上课本代码，能够实现轮播图切换，但较繁琐，而且要切换图时html、css、js代码均需要修改。

可以直接通过更换img图片的src路径来达到实现更换轮播图的效果，只需改js代码便可达到更换图片的效果。
具体代码如下：

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        img{
            width: 1366px;
            height: 700px;
        }
    </style>
</head>
<body>
    <div id="silder">
        <ul id="list">
            <li><img id="img" src="image/1.jpg" alt=""></li>
        </ul>
    </div>
    <input type="button" value="change" onclick="change()">
    <script>
        var imgs = ["image/1.jpg","image/2.png","image/3.jpg",
                        "image/4.jpg","image/5.jpg","image/6.jpg"];
                    // 给出所有轮播图路径
        var img = document.getElementById("img");
        var i=0;
        //获取当前轮播图路径
        setInterval(silder,1000); // 1秒切换
        function change(){  //随机切换图片            
            var i = Math.floor(Math.random()*imgs.length);            
            img.src = imgs[i]; // 更改图片路径
        }    
        
        function silder(){ //实现顺序换图
            i++;
            // console.log(i);
            if(i==imgs.length-1) i=0;  //如果到达最后一张图片，回到第一张
            img.src = imgs[i]; // 更改图片路径
        }
        
    </script>
</body>
</html>
```
核心代码 ：

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8ddf3cea6572e778376759108226fd0f.image.webp)

手动按钮+自动切换，代码如下所示：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            list-style: none;
        }
        img{
            width: 1366px;
            height: 700px;
        }
    </style>
</head>
<body>
    <div id="silder">
        <ul id="list">            
            <li><img src="image/1.jpg"></li>                  
        </ul>
        <input type="button" value="left" onclick="left()">
        <input type="button" value="right" onclick="change()">
    </div>
    <script>
        var imgSrc = document.querySelector("img").src;
        var index = 1;
        var length = 6; //图片个数
        function change(){
            if(index<length){
                index++; 
                document.querySelector("img").src = "image/"+index+".jpg";
            }
            if(index==length) index=0;
        }  
        function left(){
            if(index>1){
                index--; 
                document.querySelector("img").src = "image/"+index+".jpg";
            }
            if(index==1) index=length;
        }         
        setInterval(change,2000);      
    </script>
</body>
</html>
```


项目实训7 轮播图

# 5.1.1 面向对象和面向过程
## 面向过程
在日常工作和学习中，当我们去完成一项复杂的任务时，通常会罗列出要做的步骤，然后按步骤去解决问题，这实质上就是按照面向过程的思想去解决问题。在面向过程的程序设计中，一般使用函数来解决问题。

 生活中体现这两大编程思想的例子很多，比如用洗衣机洗衣服，面向过程的设计思路就是分析洗衣服的步骤。
 
首先打开洗衣机的机盖，然后放入衣服，设定洗衣时间，最后启动洗衣机。不同步骤使用不同的函数实现即可。
      

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/945548fc58f10eda3e80276a280bf77f.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8f55246e63828f3c5bfcb15f5ffee617.image.webp)

```
<!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>
    <script>
        function open(){
            document.write("打开洗衣机<br>");
        }
        function putIn(){
            document.write("放入衣服<br>");
        }
        function setTime(){
            document.write("设定时间<br>");
        }
        function start(){
            document.write("启动洗衣机<br>");
        }
        function washClothes(){
            open();
            putIn();
            setTime();
            start();
        }
        washClothes();
    </script>
</body>
</html>
```

定义4个函数，然后按照顺序调用，这就是采用面向过程的思想解决问题

我们扮演的是执行者，分析事情发生的过程都由自己来完成

我们用面向过程的思想去编程或解决问题时，首先要清楚详细的实现过程。过程清楚了，代码的实现就比较简单

## 面向对象
  在面向对象的程序设计中，应尽可能地去模拟真实的现实世界，把构成问题的事物分解成各个对象，通过建立对象来描述某个事物在解决问题各个步骤中的行为。**面向对象是一种更符合人类思维习惯的编程思想，它关注的是对象，使用对象间的关系来描述事物之间的联系。**
       
面向对象不同于面向过程，它按照现实世界的逻辑关系处理问题，而非步骤。
- 要分析问题中存在的实体
- 要分析这些实体的属性和方法

如果用面向对象的思想来模拟洗衣服的过程，就需要换个思路来思考问题。面向对象的设计思路就是分析其中涉及的对象及其发出的动作，对象有洗衣机和衣服，洗衣机的动作有打开机盖、放入衣服、设定时间、启动洗衣机，衣服没有涉及具体的动作。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/0c6313e14f8623e489c7f0e707a022b1.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1b3a19dc4958372117f7863125380cd2.image.webp)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象</title>
</head>
<body>
    <script>
        function Washer(){
            this.open = function(){
                document.write("打开洗衣机<br>");
            }
            this.puIn =function(clothes){
                document.write("放入衣服:"+clothes);
            }
            this.setTime =function(){
                document.write("<br>设定时间<br>");
            }
            this.start = function(){
                document.write("启动洗衣机<br>");
            }
        }
        function Clothes(type){
            this.type = type;
        }
        var dress = new Clothes("上衣");
        var washer1 = new Washer();
        washer1.open();
        washer1.puIn("上衣");
        washer1.setTime();
        washer1.start();
    </script>
</body>
</html>
```


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f1c98c20927a8a848fb6f18850f38ee5.image.webp)

# 5.1.2 对象的概念
1. 类的概念

      类是封装对象的属性和行为的载体，也就是说类（也称对象类）是具有相同属性和方法的一组对象的抽象描述。定义了类以后就可以使用类来创建对象。在JavaScript中通过类创建的对象称为对象实例，创建对象的过程就是类的实例化过程。类是一个抽象的概念，而对象是一个实例化的概念。
      

      例如，鸟类封装了所有鸟的共同属性和应具有的行为，定义完鸟类以后，可以根据这个类抽象出一个实体对象，例如，使用鸟类创建一个实例对象大雁，那么大雁就是一个对象实例，一般称为对象。
      

2. 对象的概念
      在理解对象时，可以将对象划分为两个部分，即静态部分和动态部分，静态部分就是“不能动”的部分，称为“属性”。任何对象都具备属性，如一个人包括身高、体重、性别、年龄等属性。动态部分就是除了这些属性外的行为、动作，例如，人有哭泣、微笑、说话、行走等行为。我们就是通过观察对象的属性和行为来了解和描述对象的。


      在计算机编程中，面向对象程序设计的思想就是要以对象来思考问题例如，使用面向对象的思想解决大雁从北方飞往南方的实际问题。

可以从这个问题中抽象出对象，这里抽象出来的对象是大雁。

识别这个对象的属性，对象具备的属性都是静态属性，如大雁有一对翅膀、黑色的羽毛等。

识别这个对象的动态行为，即大雁可以进行的动作，如飞行、觅食等。这些行为都是基于其属性而具有的动作。

实质上，所有的大雁都具有以上属性和行为，可以将这些属性和行为封装起来，描述大雁这类动物。

3. 对象的属性和方法
（1）属性是指用来描述对象特征的一组数据，以变量的形式存在，也叫成员变量。

（2）方法是指用来描述对象的动作，表现为函数。

在JavaScript中，对象就是属性和方法的集合。方法是作为对象成员的函数，表明对象所具有的行为。而属性是作为对象成员的变量，表明对象的状态。通过访问或设置对象的属性，并且调用对象的方法，就可以对对象进行各种操作，实现某种功能。

4. 面向对象的特征
（1）封装性

封装是指隐藏内部的实现细节，只对外开放操作接口。接口是对象的方法，无论对象的内部多么复杂，用户只需知道这些接口怎么使用即可。

（2）继承性

继承是指一个对象继承另一个对象，从而在不改变另一个对象的前提下进行扩展。

（3）多态性

多态是指在同一个操作作用域操作不同的对象，会产生不同的执行结果。在面向对象中，多态的实现离不开继承，这是因为当多个对象继承了同一个对象后，就获得了相同的方法，然后可以根据每个对象的需求来改变同名方法的执行结果。



# 5.1.3  JavaScript的对象框架
  JavaScript是一种基于对象的语言，在面向对象上它不像Java那样要求严格，相对比较灵活。在大部分情况下，JavaScript的类和对象是可相互转换的概念.

 在JavaScript中，通常包括两种对象，即自定义对象和预定义对象。自定义对象是根据需求自己创建的对象；预定义对象是JavaScript提供的已经定义好的对象，用户可以直接使用。

浏览器对象是浏览器提供的、可供JavaScript使用的对象，项目7将详细介绍的BOM，就是一个典型的浏览器对象模型。大部分浏览器可以根据系统当前的配置和所装载的页面自动地为JavaScript提供一些可使用的对象。本书前面经常使用到的Document对象就是浏览器对象的一种。项目6将介绍的DOM对象是文档对象模型，提供了大量的JavaScript内置对象。



5.1 认识对象

Python开发Web网页，主要是使用Flask或Django框架技术来实现，类似于Java Web技术采用Spring框架来实现。

核心技术也是以下几个部分：

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a6c2a58aa75a29f43abe6dd577cc9448.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/13a4f26a58f9113ad819f825c5a85b1e.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/2a236c3fb81efc435e74a7970c92c7d7.image.webp)

Python Web开发技术

（1）创建一个HTML页面，其中包含一个有id为“content”的div元素。使用JavaScript编写一个函数，当调用时，能够修改这个div的背景颜色。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/57c8e545d03c9ab4aa95fbe27cd4478b.image.webp)
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改背景颜色</title>
    <style>
        div{
            background: #8b7070;
            width: 100px;
            height: 100px;
            border: 1px black solid ;
        }
    </style>
</head>
<body>
    <div id="content"></div>
    <input type="button" value="修改背景颜色">
</body>
</html>
```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d2ee719ec01d14e57019bc00b6555055.image.webp)

分析：属于元素操作的改变元素样式知识点

核心代码如下：

```
function changeBackgroundColor() {
  var contentDiv = document.getElementById("content");
  contentDiv.style.backgroundColor = "lightblue"; // 你可以选择任何你喜欢的颜色
}

```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/9867501a2f7123784d6a4454278911a4.image.webp)


进阶：更改随机背景颜色

```
<div id="content"></div>
    <input type="button" value="更改背景颜色" onclick="changeBG()">
    <script>
        function changeBG(){
            var rgbs = ["red","blue","lightblue","white","black"]
            var i = Math.floor(Math.random()*rgbs.length);
            document.getElementById("content").style.background = rgbs[i];
        }
    </script>
```
（2）给定一个有多个子元素的无序列表ul，列表项li包含各种文本内容。使用JavaScript编写代码，当鼠标悬停在任何列表项上时，会显示一个警告框，内容是该列表项的文本。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/dfa162f40cc8eccaa78cdd33b4b292cc.image.webp)

```
var listItems = document.querySelectorAll("ul li");
listItems.forEach(function(item) {
  item.addEventListener("mouseover", function() {
    alert(item.textContent);
  });
});

```

（3）假设有一个按钮，其id为“toggleButton”，编写一个JavaScript函数，每当用户点击这个按钮时，就会隐藏或显示页面上id为“secret” 的元素。

```
function toggleElement() {
  var secretElement = document.getElementById("secret");
  if (secretElement.style.display === "none") {
    secretElement.style.display = "block";
  } else {
    secretElement.style.display = "none";
  }
}

// 需要在HTML中给按钮添加点击事件
// <button id="toggleButton" onclick="toggleElement()">Toggle</button>

```

（4）编写JavaScript代码，监听页面上所有输入框（input type="text"）的输入事件，一旦用户在任何一个输入框中输入文字，就在控制台中打印出来。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/065baf739b83860aff1df0f6eb4b155d.image.webp)

```
var textInputs = document.querySelectorAll('input[type="text"]');
textInputs.forEach(function(input) {
  input.addEventListener("input", function() {
    console.log(input.value);
  });
});

```

（5）创建一个表单，其中包含几个输入字段和一个提交按钮。使用DOM操作，在用户提交表单前，验证所有输入字段是否已填写，并阻止表单的提交如果有任何字段为空。

```
document.getElementById("myForm").addEventListener("submit", function(event) {
  var inputs = document.querySelectorAll("#myForm input[type='text']");
  for (var i = 0; i < inputs.length; i++) {
    if (!inputs[i].value.trim()) {
      alert("请填写所有输入字段。");
      event.preventDefault(); // 阻止表单提交
      return;
    }
  }
  // 所有字段都已填写，表单将正常提交
});

```

（6）创建一个HTML页面，包含若干图片和一个按钮。编写JavaScript代码，当点击按钮时，将所有图片的宽度设置为200像素，高度按比例缩放。

```
function resizeImages() {
  var images = document.getElementsByTagName("img");
  for (var i = 0; i < images.length; i++) {
    images[i].style.width = "200px";
    images[i].style.height = "auto";
  }
}

// 在HTML中添加按钮点击事件
// <button onclick="resizeImages()">Resize Images</button>

```

DOM操作 练习题

如何在VSCode中配置PHP运行环境



在 Visual Studio Code (VSCode) 中运行 PHP 文件需要进行一些配置。下面是详细的步骤和说明：

### （1）安装 PHP

首先，确保你的计算机上安装了 PHP。你可以访问 PHP 的官方网站 [php.net](https://www.php.net/) 下载安装包。安装完成后，你需要将 PHP 的可执行文件路径添加到系统的环境变量中，这样你就可以在命令行中直接运行 PHP。

### （2）安装 Visual Studio Code

如果你还没有安装 VSCode，可以从其官网 [code.visualstudio.com](https://code.visualstudio.com/) 下载并安装。

### （3）在 VSCode 中配置 PHP

打开 VSCode 后，按以下步骤配置：

- 打开一个包含 PHP 文件的文件夹或单独的 PHP 文件。
- 点击左侧边栏的“插件”图标，搜索并安装一个名为 “PHP Server” 或 “PHP Intelephense” 的插件。这些插件可以提供 PHP 语法高亮、代码完成、定义跳转等功能。
- （可选）安装其他有用的 PHP 开发插件，如 “PHP Debug” 用于调试。

### （4）运行 PHP 文件

安装了 PHP Server 插件后，你可以很容易地在本地服务器上运行 PHP 文件：

- 打开你想要运行的 PHP 文件。
- 右击文件内容区域，选择 “PHP Server: Serve Project” 或者 “PHP Server: Serve File”。
- 浏览器会自动打开并显示运行结果。

如果你想通过命令行运行 PHP 文件，可以按以下步骤操作：

- 打开 VSCode 的终端（菜单栏中选择“视图” -> “终端”）。
- 输入命令 `php -S localhost:8000`，其中 `8000` 是你想要使用的端口号。
- 在浏览器中访问 `http://localhost:8000/yourfile.php`，其中 `yourfile.php` 是你的 PHP 文件名。

### （5）配置调试（可选）

如果需要调试 PHP 代码，你可以安装和配置 Xdebug：

- 下载并配置 Xdebug，详细信息可以在 [xdebug.org](https://xdebug.org/) 上找到。
- 在 VSCode 中安装 “PHP Debug” 插件。
- 在 VSCode 的设置中配置 Xdebug 相关选项。

这样，你就可以在 VSCode 中运行和调试 PHP 文件了。希望这些步骤对你有帮助！如果有其他问题或需要进一步的帮助，随时告诉我。