写一个网页,要求有十种网页特效,且必须包含轮播图,下拉菜单,简易留言板,简易计算器,动态时钟,分三次回答我
时间: 2023-10-06 22:09:43 浏览: 40
回答一：
好的，这个任务听起来很有趣。我可以使用 HTML、CSS 和 JavaScript 来创建这个网页，并添加以下十种特效：
1. 滑动特效
2. 渐变特效
3. 缩放特效
4. 旋转特效
5. 弹跳特效
6. 淡入淡出特效
7. 翻转特效
8. 倾斜特效
9. 阴影特效
10. 边框特效
除此之外，我也可以添加轮播图、下拉菜单、简易留言板、简易计算器、动态时钟等功能。感觉这个任务很有趣，我很期待开始！
回答二：
我可以使用 React 框架来创建这个网页，因为它可以帮助我更轻松地管理组件和状态。我可以通过使用 CSS 动画来添加以下十种特效：
1. 滑动特效
2. 渐变特效
3. 缩放特效
4. 旋转特效
5. 弹跳特效
6. 淡入淡出特效
7. 翻转特效
8. 倾斜特效
9. 阴影特效
10. 边框特效
我也可以使用一些 React 组件来添加轮播图、下拉菜单、简易留言板、简易计算器、动态时钟等功能。这些组件可以帮助我快速构建这个网页，同时还可以提高代码的可重用性。
回答三：
我可以使用 Vue.js 框架来创建这个网页，因为它可以帮助我更轻松地组织和管理代码。我可以使用 CSS 动画来添加以下十种特效：
1. 滑动特效
2. 渐变特效
3. 缩放特效
4. 旋转特效
5. 弹跳特效
6. 淡入淡出特效
7. 翻转特效
8. 倾斜特效
9. 阴影特效
10. 边框特效
我也可以使用一些 Vue.js 组件来添加轮播图、下拉菜单、简易留言板、简易计算器、动态时钟等功能。这些组件可以帮助我快速构建这个网页，同时还可以提高代码的可读性和可维护性。
相关问题
用前端三件套做一个旅游网页包含十种网页特效，必须含有 轮播图，简易计算器，级联下拉列表，留言板，动态时钟，
好的，这个任务可以分为以下几个步骤：
1. 设计页面布局和样式
2. 添加轮播图、简易计算器、级联下拉列表、留言板和动态时钟的功能
3. 实现网页特效
我会详细介绍每一步的具体操作。
## 1. 设计页面布局和样式
首先，我们需要设计网页的布局和样式。可以使用 HTML 和 CSS 来实现。
下面是一个简单的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旅游网页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>旅游网页</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">目的地</a></li>
<li><a href="#">行程</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<section id="carousel">
<!-- 轮播图 -->
</section>
<section id="calculator">
<!-- 简易计算器 -->
</section>
<section id="dropdown">
<!-- 级联下拉列表 -->
</section>
<section id="message">
<!-- 留言板 -->
</section>
<section id="clock">
<!-- 动态时钟 -->
</section>
</main>
<footer>
<p>© 2021 旅游网页</p>
</footer>
</body>
</html>
```
在这个代码中，我们使用了 header、main、section 和 footer 标签来定义网页的结构。在 header 中包含了网页标题和导航栏，在 main 中包含了五个部分，分别是轮播图、简易计算器、级联下拉列表、留言板和动态时钟，在 footer 中包含了版权信息。
接下来，我们需要使用 CSS 来美化页面。可以使用 flexbox 或者 grid 来实现布局，使用样式来设置颜色、字体、边框等。
以下是一个示例 CSS 代码：
```css
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
display: flex;
align-items: center;
padding: 10px;
}
header h1 {
margin: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
padding: 20px;
}
section {
background-color: #eee;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
```
这里我们使用了 grid 布局来将 main 分成了两列，每个 section 占据一行。同时使用了 box-shadow 来为每个 section 添加阴影效果。
现在，我们已经完成了页面的基本设计。
## 2. 添加轮播图、简易计算器、级联下拉列表、留言板和动态时钟的功能
接下来，我们需要添加五个部分的功能。
### 轮播图
轮播图可以使用 JavaScript 和 CSS 来实现。在 JavaScript 中，可以使用 setInterval 函数来定时切换图片，使用 DOM 操作来修改图片的 src 属性。在 CSS 中，可以使用 transform 属性来实现图片的滑动效果。
以下是一个示例代码：
```html
<section id="carousel">
<h2>轮播图</h2>
<div class="carousel-container">
<img src="https://picsum.photos/id/1008/300/200" alt="轮播图1">
<img src="https://picsum.photos/id/1018/300/200" alt="轮播图2">
<img src="https://picsum.photos/id/1024/300/200" alt="轮播图3">
</div>
</section>
```
```css
.carousel-container {
position: relative;
overflow: hidden;
}
.carousel-container img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.carousel-container img.active {
opacity: 1;
}
.carousel-container img.next {
left: 100%;
}
.carousel-container img.prev {
left: -100%;
}
.carousel-container img.first {
left: 0;
}
.carousel-container img.last {
left: 0;
}
.carousel-container .prev, .carousel-container .next {
opacity: 1;
}
```
```javascript
const carouselContainer = document.querySelector('#carousel .carousel-container');
const carouselImages = carouselContainer.querySelectorAll('img');
let currentImage = 0;
setInterval(() => {
const nextImage = (currentImage + 1) % carouselImages.length;
carouselImages[currentImage].classList.remove('active');
carouselImages[nextImage].classList.add('active', 'next');
setTimeout(() => {
carouselImages[currentImage].classList.remove('prev', 'next');
carouselImages[nextImage].classList.remove('prev', 'next');
carouselImages[currentImage].classList.add('prev');
carouselImages[nextImage].classList.add('last');
currentImage = nextImage;
}, 500);
}, 3000);
```
这里我们使用了一个变量 currentImage 来表示当前显示的图片，使用 setInterval 函数每隔三秒钟切换一次图片。在 JavaScript 中，我们使用 DOM 操作来修改图片的 class 属性，从而实现切换图片和滑动效果。
### 简易计算器
简易计算器可以使用 HTML 和 JavaScript 来实现。在 HTML 中，可以使用 input 标签来实现输入框和按钮，使用 CSS 来美化样式。在 JavaScript 中，可以使用 DOM 操作来获取输入框和按钮的值，使用 eval 函数来计算结果。
以下是一个示例代码：
```html
<section id="calculator">
<h2>简易计算器</h2>
<div class="calculator-container">
<input type="text" id="calculator-input" placeholder="请输入计算式">
<div class="calculator-buttons">
<button class="calculator-button" onclick="addToCalculator('1')">1</button>
<button class="calculator-button" onclick="addToCalculator('2')">2</button>
<button class="calculator-button" onclick="addToCalculator('3')">3</button>
<button class="calculator-button" onclick="addToCalculator('+')">+</button>
<button class="calculator-button" onclick="addToCalculator('4')">4</button>
<button class="calculator-button" onclick="addToCalculator('5')">5</button>
<button class="calculator-button" onclick="addToCalculator('6')">6</button>
<button class="calculator-button" onclick="addToCalculator('-')">-</button>
<button class="calculator-button" onclick="addToCalculator('7')">7</button>
<button class="calculator-button" onclick="addToCalculator('8')">8</button>
<button class="calculator-button" onclick="addToCalculator('9')">9</button>
<button class="calculator-button" onclick="addToCalculator('*')">*</button>
<button class="calculator-button" onclick="addToCalculator('0')">0</button>
<button class="calculator-button" onclick="addToCalculator('.')">.</button>
<button class="calculator-button" onclick="addToCalculator('/')">/</button>
<button class="calculator-button" onclick="calculate()">=</button>
<button class="calculator-button" onclick="clearCalculator()">清空</button>
</div>
</div>
</section>
```
```css
.calculator-container {
display: flex;
flex-direction: column;
align-items: center;
}
.calculator-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
margin-top: 10px;
}
.calculator-button {
background-color: #eee;
border: none;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
.calculator-button:hover {
background-color: #ddd;
}
```
```javascript
const calculatorInput = document.querySelector('#calculator-input');
function addToCalculator(value) {
calculatorInput.value += value;
}
function calculate() {
const result = eval(calculatorInput.value);
calculatorInput.value = result;
}
function clearCalculator() {
calculatorInput.value = '';
}
```
这里我们使用了一个变量 calculatorInput 来表示输入框，使用 DOM 操作来获取输入框的值和修改输入框的值。在 JavaScript 中，我们使用 eval 函数来计算结果。
### 级联下拉列表
级联下拉列表可以使用 HTML 和 JavaScript 来实现。在 HTML 中，可以使用 select 标签来实现下拉列表，使用 option 标签来实现选项，使用 data-* 属性来实现级联关系。在 JavaScript 中，可以使用 DOM 操作来获取选中的值和修改下拉列表的内容。
以下是一个示例代码：
```html
<section id="dropdown">
<h2>级联下拉列表</h2>
<div class="dropdown-container">
<select id="country" onchange="changeCountry()">
<option value="">请选择国家</option>
<option value="china">中国</option>
<option value="japan">日本</option>
<option value="usa">美国</option>
</select>
<select id="city" onchange="changeCity()">
<option value="">请选择城市</option>
</select>
</div>
</section>
```
```css
.dropdown-container {
display: flex;
flex-direction: column;
align-items: center;
}
select {
padding: 10px;
margin: 10px;
font-size: 16px;
}
```
```javascript
const countrySelect = document.querySelector('#country');
const citySelect = document.querySelector('#city');
const cities = {
china: ['北京', '上海', '广州', '深圳'],
japan: ['东京', '大阪', '名古屋', '福冈'],
usa: ['纽约', '洛杉矶', '芝加哥', '旧金山']
};
function changeCountry() {
const country = countrySelect.value;
const cityOptions = cities[country].map(city => `<option value="${city}">${city}</option>`).join('');
citySelect.innerHTML = `<option value="">请选择城市</option>${cityOptions}`;
}
function changeCity() {
const country = countrySelect.value;
const city = citySelect.value;
alert(`您选择的城市是：${country}-${city}`);
}
```
这里我们使用了两个变量 countrySelect 和 citySelect 来表示两个下拉列表，使用 DOM 操作来获取选中的值和修改下拉列表的内容。在 JavaScript 中，我们使用一个对象 cities 来存储国家和城市的对应关系，通过 map 函数和 join 函数来生成城市选项的 HTML 代码。
### 留言板
留言板可以使用 HTML 和 JavaScript 来实现。在 HTML 中，可以使用 form 标签来实现表单，使用 input 标签来实现输入框，使用 textarea 标签来实现文本框，使用 button 标签来实现提交按钮。在 JavaScript 中，可以使用 DOM 操作来获取表单的值和添加留言。
以下是一个示例代码：
```html
<section id="message">
<h2>留言板</h2>
<div class="message-container">
<form onsubmit="addMessage(event)">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">留言：</label>
<textarea id="message-text" name="message" required></textarea>
<br>
<button type="submit">提交</button>
</form>
<ul id="message-list"></ul>
</div>
</section>
```
```css
.message-container {
display: flex;
flex-direction: column;
align-items: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
padding: 10px;
}
input, textarea {
padding: 10px;
margin: 10px;
font-size: 16px;
}
button {
padding: 10px;
margin: 10px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #ddd;
}
```
```javascript
const messageForm = document.querySelector('#message form');
const messageList = document.querySelector('#message-list');
function addMessage(event) {
event.preventDefault();
const nameInput = messageForm.querySelector('#name');
const emailInput = messageForm.querySelector('#email');
const messageInput = messageForm.querySelector('#message-text');
const li = document.createElement('li');
li.innerHTML = `
<h3>${nameInput.value} (${emailInput.value})</h3>
<p>${messageInput.value}</p>
`;
messageList.appendChild(li);
nameInput.value = '';
emailInput.value = '';
messageInput.value = '';
}
```
这里我们使用了两个变量 messageForm 和 messageList 来表示表单和留言列表，使用 DOM 操作来获取表单的值和添加留言。在 JavaScript 中，我们使用 createElement 函数和 innerHTML 属性来生成留言的 HTML 代码。
### 动态时钟
动态时钟可以使用 HTML 和 JavaScript 来实现。在 HTML 中，可以使用 div 标签来实现时钟，使用 CSS 来美化样式。在 JavaScript 中，可以使用 setInterval 函数来更新时钟的时间。
以下是一个示例代码：
```html
<section id="clock">
<h2>动态时钟</h2>
<div class="clock-container">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
<div class="clock-center"></div>
</div>
</section>
```
```css
.clock-container {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.hour-hand, .minute-hand, .second-hand {
position: absolute;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
width: 6px;
height: 60px;
top: 50%;
left: 50%;
margin-left: -3px;
}
.minute-hand {
width: 4px;
height: 80px;
top: 50%;
left: 50%;
margin-left: -2px;
}
.second-hand {
width: 2px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -1px;
}
.clock-center {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
top: 50%;
left: 50%;
margin-left: -5px;
margin-top: -5px;
}
```
```javascript
const hourHand = document.querySelector('#clock .hour-hand');
const minuteHand = document.querySelector('#clock .minute-hand');
const secondHand = document.querySelector('#clock .second-hand');
setInterval(() => {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const hourAngle = (hours + minutes / 60) * 30;
const minuteAngle = (minutes + seconds / 60) * 6;
const secondAngle = seconds * 6;
hourHand.style.transform = `rotate(${hourAngle}deg)`;
minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
secondHand.style.transform = `rotate(${secondAngle}deg)`;
}, 1000);
```
这里我们使用了三个变量 hourHand、minuteHand 和 secondHand 来表示时针、分针和秒针，使用 setInterval 函数每隔一秒钟更新一次时钟的时间。在 JavaScript 中，我们使用 transform 属性来旋转时针、分针和秒针。
现在，我们已经完成了五个部分的功能。
## 3. 实现网页特效
最后，我们需要实现网页特效来增加页面的交互性和美观性。可以使用 CSS 动画、JavaScript 动画或者第三方库来实现。
以下是一些示例特效：
### 按钮
做一个简易旅游首页，要有十种网页特效，包含轮播图，下拉列表的级联，简易留言板，简易计算器，动态时钟，其他你自行添加
好的，我可以给您提供一个简易旅游首页的代码，包含以下特效：
1. 轮播图
2. 下拉列表级联
3. 留言板
4. 计算器
5. 动态时钟
6. 图片放大缩小
7. 鼠标悬停动画
8. 按钮点击效果
9. 弹出框
10. 滚动动画
以下是代码示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游首页</title>
<style>
/* 定义轮播图样式 */
.slider {
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider img.active {
opacity: 1;
}
/* 定义下拉列表级联样式 */
select {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.sub-select {
display: none;
}
/* 定义留言板样式 */
.form {
width: 400px;
margin: 0 auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form label {
display: block;
margin-bottom: 5px;
}
.form input[type="text"], .form textarea {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form input[type="submit"] {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* 定义计算器样式 */
.calculator {
width: 300px;
margin: 0 auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.calculator label {
display: block;
margin-bottom: 5px;
}
.calculator input[type="text"] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.calculator input[type="submit"] {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* 定义动态时钟样式 */
.clock {
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border-radius: 50%;
}
.clock .hour-hand, .clock .minute-hand, .clock .second-hand {
position: absolute;
top: 0;
left: 50%;
width: 5px;
height: 80px;
margin-left: -2.5px;
background-color: #000;
transform-origin: bottom center;
border-radius: 5px 5px 0 0;
transition: all 0.1s linear;
}
.clock .hour-hand {
height: 60px;
background-color: #ccc;
}
.clock .minute-hand {
background-color: #666;
}
.clock .second-hand {
height: 70px;
background-color: #f00;
}
/* 定义图片放大缩小样式 */
.image {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.2s ease-in-out;
}
.image:hover img {
transform: scale(1.2);
}
/* 定义鼠标悬停动画样式 */
.hover-animation {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.hover-animation:before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.hover-animation:hover:before {
opacity: 1;
}
.hover-animation img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.2s ease-in-out;
}
.hover-animation:hover img {
transform: scale(1.2);
}
/* 定义按钮点击效果样式 */
.button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.button:hover {
background-color: #0069d9;
}
/* 定义弹出框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 9999;
justify-content: center;
align-items: center;
}
.modal .content {
width: 500px;
height: 300px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
text-align: center;
position: relative;
}
.modal .close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
/* 定义滚动动画样式 */
.scroll-animation {
opacity: 0;
transform: translateY(50px);
transition: all 0.2s ease-in-out;
}
.scroll-animation.show {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="slider">
<img src="https://picsum.photos/800/400?random=1" class="active">
<img src="https://picsum.photos/800/400?random=2">
<img src="https://picsum.photos/800/400?random=3">
<img src="https://picsum.photos/800/400?random=4">
<img src="https://picsum.photos/800/400?random=5">
</div>
<br>
<div>
<select id="province-select">
<option value="">请选择省份</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广东">广东</option>
</select>
<select id="city-select" class="sub-select">
<option value="">请选择城市</option>
</select>
<select id="district-select" class="sub-select">
<option value="">请选择区县</option>
</select>
</div>
<br>
<div class="form">
<h3>留言板</h3>
<form action="" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<label for="email">邮箱：</label>
<input type="text" id="email" name="email">
<label for="message">留言：</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="提交">
</form>
</div>
<br>
<div class="calculator">
<h3>计算器</h3>
<form action="">
<label for="num1">数字1：</label>
<input type="text" id="num1" name="num1">
<label for="num2">数字2：</label>
<input type="text" id="num2" name="num2">
<input type="submit" value="计算">
</form>
<p id="result"></p>
</div>
<br>
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<br>
<div class="image">
<img src="https://picsum.photos/200/200?random=1">
</div>
<br>
<div class="hover-animation">
<img src="https://picsum.photos/200/200?random=2">
</div>
<br>
<button class="button">点击试试</button>
<br>
<div class="modal">
<div class="content">
<h3>弹出框</h3>
<p>这是一个弹出框</p>
<div class="close">X</div>
</div>
</div>
<br>
<div class="scroll-animation">这是一个滚动动画</div>
<script>
//定义轮播图
let slider = document.querySelector('.slider');
let images = document.querySelectorAll('.slider img');
let index = 0;
function changeImage() {
images[index].classList.remove('active');
index = (index + 1) % images.length;
images[index].classList.add('active');
}
setInterval(changeImage, 3000);
//定义下拉列表级联
let provinceSelect = document.querySelector('#province-select');
let citySelect = document.querySelector('#city-select');
let districtSelect = document.querySelector('#district-select');
provinceSelect.addEventListener('change', function() {
//清空城市列表和区县列表
citySelect.innerHTML = '<option value="">请选择城市</option>';
districtSelect.innerHTML = '<option value="">请选择区县</option>';
//根据省份获取城市列表
if (this.value === '北京') {
citySelect.innerHTML += '<option value="北京市">北京市</option>';
} else if (this.value === '上海') {
citySelect.innerHTML += '<option value="上海市">上海市</option>';
} else if (this.value === '广东') {
citySelect.innerHTML += '<option value="广州市">广州市</option>';
citySelect.innerHTML += '<option value="深圳市">深圳市</option>';
}
//显示城市列表
citySelect.classList.remove('sub-select');
});
citySelect.addEventListener('change', function() {
//清空区县列表
districtSelect.innerHTML = '<option value="">请选择区县</option>';
//根据城市获取区县列表
if (this.value === '北京市') {
districtSelect.innerHTML += '<option value="东城区">东城区</option>';
districtSelect.innerHTML += '<option value="西城区">西城区</option>';
} else if (this.value === '上海市') {
districtSelect.innerHTML += '<option value="黄浦区">黄浦区</option>';
districtSelect.innerHTML += '<option value="徐汇区">徐汇区</option>';
} else if (this.value === '广州市') {
districtSelect.innerHTML += '<option value="天河区">天河区</option>';
districtSelect.innerHTML += '<option value="海珠区">海珠区</option>';
} else if (this.value === '深圳市') {
districtSelect.innerHTML += '<option value="福田区">福田区</option>';
districtSelect.innerHTML += '<option value="南山区">南山区</option>';
}
//显示区县列表
districtSelect.classList.remove('sub-select');
});
//定义留言板
let form = document.querySelector('.form');
let nameInput = document.querySelector('#name');
let emailInput = document.querySelector('#email');
let messageInput = document.querySelector('#message');
form.addEventListener('submit', function(e) {
e.preventDefault();
alert(`姓名：${nameInput.value}\n邮箱：${emailInput.value}\n留言：${messageInput.value}`);
this.reset();
});
//定义计算器
let num1Input = document.querySelector('#num1');
let num2Input = document.querySelector('#num2');
let resultP = document.querySelector('#result');
form = document.querySelector('.calculator');
form.addEventListener('submit', function(e) {
e.preventDefault();
let num1 = Number(num1Input.value);
let num2 = Number(num2Input.value);
resultP.innerText = `结果：${num1 + num2}`;
});
//定义动态时钟
let hourHand = document.querySelector('.hour-hand');
let minuteHand = document.querySelector('.minute-hand');
let secondHand = document.querySelector('.second-hand');
function updateClock() {
let date = new Date();
let hours = date.getHours() % 12;
let minutes = date.getMinutes();
let seconds = date.getSeconds();
hourHand.style.transform = `rotate(${hours / 12 * 360 + minutes / 60 * 30 - 90}deg)`;
minuteHand.style.transform = `rotate(${minutes / 60 * 360 + seconds / 60 * 6 - 90}deg)`;
secondHand.style.transform = `rotate(${seconds / 60 * 360 - 90}deg)`;
}
setInterval(updateClock, 1000);
//定义弹出框
let button = document.querySelector('.button');
let modal = document.querySelector('.modal');
let close = document.querySelector('.close');
button.addEventListener('click', function() {
modal.style.display = 'flex';
});
close.addEventListener('click', function() {
modal.style.display = 'none';
});
//定义滚动动画
let scrollAnimations = document.querySelectorAll('.scroll-animation');
window.addEventListener('scroll', function() {
scrollAnimations.forEach(function(animation) {
if (animation.offsetTop + animation.offsetHeight < window.pageYOffset + window.innerHeight) {
animation.classList.add('show');
}
});
});
</script>
</body>
</html>
```
相关推荐
最新推荐
js动态设置select下拉菜单的默认选中项实例
利用javascript设置select下拉菜单的选中项。 代码实例如下： <!--js动态设置select下拉菜单的默认选中项--> <html> <head> <title>下拉菜单</title> [removed] [removed]=function...
Bootstrap实现下拉菜单多级联动
主要为大家详细介绍了Bootstrap实现下拉菜单多级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap实现二级下拉菜单效果
主要为大家详细介绍了bootstrap实现二级下拉菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
pyqt5 实现 下拉菜单 + 打开文件的示例代码
今天小编就为大家分享一篇pyqt5 实现 下拉菜单 + 打开文件的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaScript 下拉菜单实现代码
利用css+js实现的下拉菜单。通过getElementsByTagName获取ul,隐藏显示。
RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
REALTEK 8188FTV 8188eus 8188etv linux驱动程序稳定版本， 支持AP,STA 以及AP+STA 共存模式。 稳定支持linux4.0以上内核。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
：YOLOv1目标检测算法：实时目标检测的先驱，开启计算机视觉新篇章
# 1. 目标检测算法概述
目标检测算法是一种计算机视觉技术，用于识别和定位图像或视频中的对象。它在各种应用中至关重要，例如自动驾驶、视频监控和医疗诊断。
目标检测算法通常分为两类：两阶段算法和单阶段算法。两阶段算法，如 R-CNN 和 Fast R-CNN，首先生成候选区域，然后对每个区域进行分类和边界框回归。单阶段算法，如 YOLO 和 SSD，一次性执行检
info-center source defatult
这是一个 Cisco IOS 命令，用于配置 Info Center 默认源。Info Center 是 Cisco 设备的日志记录和报告工具，可以用于收集和查看设备的事件、警报和错误信息。该命令用于配置 Info Center 默认源，即设备的默认日志记录和报告服务器。在命令行界面中输入该命令后，可以使用其他命令来配置默认源的 IP 地址、端口号和协议等参数。
c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
校园超市商品信息管理系统课程设计旨在帮助学生深入理解程序设计的基础知识，同时锻炼他们的实际操作能力。通过设计和实现一个校园超市商品信息管理系统，学生掌握了如何利用计算机科学与技术知识解决实际问题的能力。在课程设计过程中，学生需要对超市商品和销售员的关系进行有效管理，使系统功能更全面、实用，从而提高用户体验和便利性。
学生在课程设计过程中展现了积极的学习态度和纪律，没有缺勤情况，演示过程流畅且作品具有很强的使用价值。设计报告完整详细，展现了对问题的深入思考和解决能力。在答辩环节中，学生能够自信地回答问题，展示出扎实的专业知识和逻辑思维能力。教师对学生的表现予以肯定，认为学生在课程设计中表现出色，值得称赞。
整个课程设计过程包括平时成绩、报告成绩和演示与答辩成绩三个部分，其中平时表现占比20%，报告成绩占比40%，演示与答辩成绩占比40%。通过这三个部分的综合评定，最终为学生总成绩提供参考。总评分以百分制计算，全面评估学生在课程设计中的各项表现，最终为学生提供综合评价和反馈意见。
通过校园超市商品信息管理系统课程设计，学生不仅提升了对程序设计基础知识的理解与应用能力，同时也增强了团队协作和沟通能力。这一过程旨在培养学生综合运用技术解决问题的能力，为其未来的专业发展打下坚实基础。学生在进行校园超市商品信息管理系统课程设计过程中，不仅获得了理论知识的提升，同时也锻炼了实践能力和创新思维，为其未来的职业发展奠定了坚实基础。
校园超市商品信息管理系统课程设计的目的在于促进学生对程序设计基础知识的深入理解与掌握，同时培养学生解决实际问题的能力。通过对系统功能和用户需求的全面考量，学生设计了一个实用、高效的校园超市商品信息管理系统，为用户提供了更便捷、更高效的管理和使用体验。
综上所述，校园超市商品信息管理系统课程设计是一项旨在提升学生综合能力和实践技能的重要教学活动。通过此次设计，学生不仅深化了对程序设计基础知识的理解，还培养了解决实际问题的能力和团队合作精神。这一过程将为学生未来的专业发展提供坚实基础，使其在实际工作中能够胜任更多挑战。