第5章 自动化编程实战：Web应用
在本章中，我们会结合ChatGPT以及GitHub Copilot，自动编写与Web相关的应用，实现一些纯Web的页面，如轮播图、Web特效（随鼠标指针移动的小星星）、键盘指法练习器。我们还会学习如何将桌面应用转换为Web应用，如何利用ChatGPT和GitHub Copilot开发各种类型的Chrome插件。为了实现这一切，除输入一些提示文字外，我们基本上不需要编写一行代码。
5.1 Web特效
下面介绍利用ChatGPT和GitHub Copilot自动生成一些Web特效和应用的方法。
5.1.1 轮播图
轮播图是Web页面中常见的应用，主要用于展示多页图像或其他页面，每隔一定时间会自动切换。用户也可以通过单击页面切换器（通常位于轮播图下方的小点）切换到任意页面。轮播图组件的实现代码在网上非常多。但这些轮播图组件都是固定样式的，如果要定制这些轮播图组件，就需要理解其中的代码。对于Web技术不熟悉的读者，这可能比较麻烦。不过有了ChatGPT，用户只要输入提示文字，就能自动生成任何形式的轮播图。图5-1展示了一幅标准样式的轮播图。这个轮播图并不是手工编码实现的，也不是现成的轮播图组件实现的，而是直接使用ChatGPT生成的，用时不到1min，一次生成，且是独一无二的形式。
图5-1 轮播图
用户在让ChatGPT如何生成轮播图代码之前，要想清楚到底想要什么样的轮播图。根据图5-1所示的轮播图样式，可以得出如下关键点。
·轮播图可以自动循环播放，每隔一定时间切换一次。
· 轮播图正下方是页面切换器，由5个点组成，所以轮播图一共5页。
了解了这两个关键点，我们就可以组织如下文本，并向ChatGPT发出请求。
用HTML、CSS和JavaScript等Web技术实现一个Web版的轮播图应用。轮播图在页面的正中心显示。页面切换功能在轮播图的正下方水平中心的位置。轮播图每3秒自动切换一次，通过页面切换功能也可以切换轮播图中的某一个页面。轮播图一共5页。 页面使用的样式文件是slideshow.css，使用的JavaScript文件是slideshow.js。给出完整的代码和中文注释。
注意，生成Web页面的代码通常会同时生成.html文件、.css文件和.js文件。.html文件是主文件，在.html文件中会引用.css文件和.js文件，所以最好在.html文件中指定.css文件名和.js文件名，如本例的slideshow.css和slideshow.js，否则ChatGPT会自己随便指定一个。如果要生成多个这样的页面，.css文件和.js文件名可能会冲突，到时还需要再修改代码，所以直接告诉ChatGPT要生成的.css文件名和.js文件名。这样.html文件在引用.css文件时，就会使用指定的.css文件和.js文件。
ChatGPT会根据前面的描述，分别给出.html文件、.css文件和.js代码。
HTML代码如下。
代码位置：src/web/slideshow.html
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<link rel="stylesheet" href="slideshow.css">
</head>
<body>
<!-- 创建轮播图容器 -->
<div class="slider">
<!-- 插入5张图片 -->
<div class="slides">
<div class="slide"><img src="../images/girl.png" alt="图片1"></div>
<div class="slide"><img src="../images/girl1.jpg" alt="图片2"></div>
<div class="slide"><img src="../images/girl2.jpg" alt="图片3"></div>
<div class="slide"><img src="../images/girl3.jpg" alt="图片4"></div>
<div class="slide"><img src="../images/girl4.jpg" alt="图片5"></div>
</div>
<!-- 创建页面切换功能 -->
<div class="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<!-- 引入JavaScript -->
<script src="slideshow.js"></script>
</body>
</html>
CSS代码如下。
代码位置：src/web/slideshow.css
/* 设置整个页面居中 */
body, html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: #f2f2f2;
}
/* 轮播图样式 */
.slider {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.slides {
display: flex;
width: 100%;
height: 100%;
}
.slide {
width: 100%;
height: 100%;
flex-shrink: 0;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 页面切换功能样式 */
.dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dot {
width: 10px;
height: 10px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
cursor: pointer;
}
/* 设置选中状态的样式 */
.dot.active {
background-color: #717171;
}
JavaScript代码如下。
代码位置：src/web/slideshow.js
let currentIndex = 0; // 当前显示的图片的索引
const slides = document.querySelectorAll('.slide'); // 获取所有的轮播图元素
const dots = document.querySelectorAll('.dot'); // 获取所有的页面切换元素
// 每3秒自动切换轮播图
setInterval(nextSlide, 3000);
// 切换到下一张轮播图
function nextSlide() {
currentIndex++;
if (currentIndex > slides.length - 1) {
currentIndex = 0; // 如果到了最后一幅图，再次切换时返回第一幅图
}
updateSlides();
}
// 更新轮播图
function updateSlides() {
// 隐藏所有轮播图
for (let slide of slides) {
slide.style.transform = `translateX(-${currentIndex * 100}%)`;
}
// 将对应的页面切换点设置为选中状态
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active');
if (i === currentIndex) {
dots[i].classList.add('active');
}
}
}
// 为页面切换点添加单击事件
for (let i = 0; i < dots.length; i++) {
dots[i].addEventListener('click', function() {
currentIndex = i; // 将当前索引设置为单击的页面切换点的索引
updateSlides(); // 更新轮播图
});
}
生成代码的核心点在slideshow.js文件中，在该文件中使用setInterval(nextSlide, 3000)设置每3秒切换一幅图的功能，然后通过nextSlide()函数调用updateSlides()函数实现具体的图片更换。在slideshow.js开头使用document.querySelectorAll()获取所有轮播图的元素，这就是slideshow.js要在slideshow.html最后引用的原因。
