引自免费微信小程序：皆我百晓生
为了实现这个影院电影放映列表，我们可以使用HTML、CSS和JavaScript。首先，我们将创建一个HTML文件（例如：movie_list.html）并添加基本结构。然后，我们编写CSS样式来美化页面，最后添加一些简单的JavaScript功能来处理点击事件。以下是详细的步骤：
- 创建HTML文件 (
movie_list.html) 并添加基础结构：
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>影院电影放映列表title>
head>
<body>
<div id="movie-list">div>
<script src="scripts.js">script>
body>
html>
- 编写CSS样式 (
styles.css)：
body {
font-family: Arial, sans-serif;
}
#movie-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
padding: 1rem;
}
.movie-item {
background-color: #f7f7f7;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 1rem;
text-align: center;
}
.title {
font-size: 1.2em;
margin-bottom: 0.5rem;
}
.time {
font-weight: bold;
margin-bottom: 0.5rem;
}
.price {
font-weight: bold;
color: green;
margin-bottom: 1rem;
}
.button {
display: inline-block;
padding: 0.5rem 1rem;
background-color: dodgerblue;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
text-decoration: none;
}
.button:hover {
background-color: darkblue;
}
- 添加JavaScript代码 (
scripts.js) 来处理点击事件（这里仅提供简单的模拟效果，实际应用可能需要连接到服务器进行数据获取和交互）：
document.addEventListener('DOMContentLoaded', function () {
const movieList = document.getElementById('movie-list');
// 模拟数据
const movies = [
{ title: '电影A', time: '13:15 - 15:00', language: '国语3D', hall: '2号厅', price: 48.5 },
{ title: '电影B', time: '16:00 - 18:00', language: '英语2D', hall: '3号厅', price: 55.0 }
// 更多电影...
];
movies.forEach(function (movie) {
const movieItem = document.createElement('div');
movieItem.classList.add('movie-item');
const titleElement = document.createElement('h3');
titleElement.textContent = movie.title;
movieItem.appendChild(titleElement);
const timeElement = document.createElement('p');
timeElement.textContent = `放映时间：${movie.time}`;
movieItem.appendChild(timeElement);
const languageElement = document.createElement('p');
languageElement.textContent = `语言版本：${movie.language}`;
movieItem.appendChild(languageElement);
const hallElement = document.createElement('p');
hallElement.textContent = `放映厅：${movie.hall}`;
movieItem.appendChild(hallElement);
const priceElement = document.createElement('p');
priceElement.textContent = `售价：${movie.price} 元`;
movieItem.appendChild(priceElement);
const buttonElement = document.createElement('a');
buttonElement.href = '#';
buttonElement.textContent = '选座购票';
buttonElement.classList.add('button');
buttonElement.addEventListener('click', function () {
alert(`已选择电影 ${movie.title} 的票`);
});
movieItem.appendChild(buttonElement);
movieList.appendChild(movieItem);
});
});
实验结果分析：
当你在VSCode中打开这个项目，运行movie_list.html，你会看到一个响应式的电影放映列表，每个电影条目包含标题、放映时间、语言版本、放映厅、价格和一个选座购票按钮。当点击选座购票按钮时，会弹出一个警告框显示已选择相应的电影票信息。这只是一个基本的示例，实际应用可能需要与后端服务器交互以获取实时电影信息和完成购票流程。
