视图代码
时间: 2023-07-02 16:13:06 浏览: 46
以下是一个简单的电影售票系统的前端视图代码片段,使用 HTML、CSS、JavaScript 实现了电影列表、电影详情和购票页面的前端布局和交互逻辑:
```
<!DOCTYPE html>
<html>
<head>
<title>电影售票系统</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1>电影售票系统</h1>
</header>
<nav>
<ul>
<li><a href="#" onclick="showPage('movie-list')">电影列表</a></li>
<li><a href="#" onclick="showPage('movie-detail')">电影详情</a></li>
<li><a href="#" onclick="showPage('buy-ticket')">购票</a></li>
</ul>
</nav>
<main>
<section id="movie-list">
<h2>电影列表</h2>
<ul>
<li><a href="#" onclick="showPage('movie-detail')">电影1</a></li>
<li><a href="#" onclick="showPage('movie-detail')">电影2</a></li>
<li><a href="#" onclick="showPage('movie-detail')">电影3</a></li>
<li><a href="#" onclick="showPage('movie-detail')">电影4</a></li>
</ul>
</section>
<section id="movie-detail" style="display: none;">
<h2>电影详情</h2>
<div>
<img src="movie1.jpg">
<h3>电影1</h3>
<p>剧情介绍:xxxxx</p>
<p>演员阵容:xxxxx</p>
<button onclick="showPage('buy-ticket')">购票</button>
</div>
</section>
<section id="buy-ticket" style="display: none;">
<h2>购票</h2>
<form>
<label>选择座位:</label>
<select name="seat">
<option value="1">1号座位</option>
<option value="2">2号座位</option>
<option value="3">3号座位</option>
</select>
<label>选择支付方式:</label>
<input type="radio" name="pay" value="alipay">支付宝
<input type="radio" name="pay" value="wechat">微信
<button type="submit">确认购买</button>
</form>
</section>
</main>
<footer>
<p>版权所有 © 2021 电影售票系统</p>
</footer>
</body>
</html>
```
以上代码实现了电影列表、电影详情和购票三个页面的前端布局和交互逻辑。通过 JavaScript 的 showPage 函数实现页面间的切换。具体实现方式和样式可以根据需求进行修改和扩展。