编写两个页面,一个显示一些历史书的名称和价格,一个显示一些计算机书的名称和价格。每本书后面都有一个链接——购买,单击该链接,能够将该书本添加到购物车;每个页面上都有链接——显示购物车,单机该链接,能够显示购物车的内容;每个内容后面都有“删除”链接,单击该链接,将该图书从购物车中删除。
时间: 2023-12-10 20:40:05 浏览: 241
这个任务需要使用前端开发技术,包括HTML、CSS和JavaScript。以下是示例代码:
页面1 - 历史书:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>历史书</title>
</head>
<body>
<h1>历史书</h1>
<ul>
<li>《史记》 - $20 - <a href="#" onclick="addToCart('史记', 20)">购买</a></li>
<li>《资治通鉴》 - $25 - <a href="#" onclick="addToCart('资治通鉴', 25)">购买</a></li>
<li>《红楼梦》 - $15 - <a href="#" onclick="addToCart('红楼梦', 15)">购买</a></li>
</ul>
<a href="#" onclick="showCart()">显示购物车</a>
<script>
function addToCart(name, price) {
var cart = JSON.parse(localStorage.getItem('cart')) || [];
cart.push({ name: name, price: price });
localStorage.setItem('cart', JSON.stringify(cart));
alert('已将"' + name + '"加入购物车');
}
function showCart() {
var cart = JSON.parse(localStorage.getItem('cart')) || [];
if (cart.length === 0) {
alert('购物车为空');
} else {
var message = '购物车中的图书有:\n';
for (var i = 0; i < cart.length; i++) {
message += cart[i].name + ' - $' + cart[i].price + '\n';
}
alert(message);
}
}
</script>
</body>
</html>
```
页面2 - 计算机书:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算机书</title>
</head>
<body>
<h1>计算机书</h1>
<ul>
<li>《JavaScript权威指南》 - $30 - <a href="#" onclick="addToCart('JavaScript权威指南', 30)">购买</a></li>
<li>《数据结构与算法分析》 - $35 - <a href="#" onclick="addToCart('数据结构与算法分析', 35)">购买</a></li>
<li>《计算机网络》 - $25 - <a href="#" onclick="addToCart('计算机网络', 25)">购买</a></li>
</ul>
<a href="#" onclick="showCart()">显示购物车</a>
<script>
function addToCart(name, price) {
var cart = JSON.parse(localStorage.getItem('cart')) || [];
cart.push({ name: name, price: price });
localStorage.setItem('cart', JSON.stringify(cart));
alert('已将"' + name + '"加入购物车');
}
function showCart() {
var cart = JSON.parse(localStorage.getItem('cart')) || [];
if (cart.length === 0) {
alert('购物车为空');
} else {
var message = '购物车中的图书有:\n';
for (var i = 0; i < cart.length; i++) {
message += cart[i].name + ' - $' + cart[i].price + '\n';
}
alert(message);
}
}
</script>
</body>
</html>
```
购物车页面:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
</head>
<body>
<h1>购物车</h1>
<ul>
<li><strong>名称</strong> - <strong>价格</strong></li>
<hr>
<li v-for="(item, index) in cart">
{{ item.name }} - ${{ item.price }} - <a href="#" @click="removeFromCart(index)">删除</a>
</li>
</ul>
<a href="#" onclick="clearCart()">清空购物车</a>
<script>
var app = new Vue({
el: 'body',
data: {
cart: JSON.parse(localStorage.getItem('cart')) || []
},
methods: {
removeFromCart: function(index) {
this.cart.splice(index, 1);
localStorage.setItem('cart', JSON.stringify(this.cart));
}
}
});
function clearCart() {
localStorage.removeItem('cart');
location.reload();
}
</script>
</body>
</html>
```
这些代码使用了localStorage来存储购物车内容,使用Vue.js来绑定购物车页面的数据。如果您不熟悉这些技术,可以在网上学习相关知识。
阅读全文