用javascript写一个商品动态网站
时间: 2024-03-27 12:37:23 浏览: 16
好的,下面是一个简单的商品动态网站的JavaScript代码实现,包含商品列表展示、商品搜索、商品详情展示等功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>商品动态网站</title>
<meta charset="utf-8">
</head>
<body>
<h1>商品列表</h1>
<input type="text" id="searchInput" placeholder="输入商品名称进行搜索">
<button onclick="search()">搜索</button>
<ul id="goodsList"></ul>
<div id="detail" style="display:none;">
<h2 id="name"></h2>
<p id="description"></p>
<p id="price"></p>
</div>
<script>
// 商品列表数据,实际应该从服务器获取
var goodsData = [
{
name: "商品1",
description: "这是商品1的描述",
price: 100
},
{
name: "商品2",
description: "这是商品2的描述",
price: 200
},
{
name: "商品3",
description: "这是商品3的描述",
price: 300
}
];
// 初始化商品列表
var goodsList = document.getElementById("goodsList");
for (var i = 0; i < goodsData.length; i++) {
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:showDetail(" + i + ")'>" + goodsData[i].name + "</a>";
goodsList.appendChild(li);
}
// 搜索商品
function search() {
var keyword = document.getElementById("searchInput").value;
var result = [];
for (var i = 0; i < goodsData.length; i++) {
if (goodsData[i].name.indexOf(keyword) != -1) {
result.push(goodsData[i]);
}
}
showGoodsList(result);
}
// 展示商品列表
function showGoodsList(data) {
goodsList.innerHTML = "";
for (var i = 0; i < data.length; i++) {
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:showDetail(" + i + ")'>" + data[i].name + "</a>";
goodsList.appendChild(li);
}
}
// 展示商品详情
function showDetail(index) {
var detail = document.getElementById("detail");
detail.style.display = "block";
document.getElementById("name").innerHTML = goodsData[index].name;
document.getElementById("description").innerHTML = goodsData[index].description;
document.getElementById("price").innerHTML = "价格:" + goodsData[index].price + "元";
}
</script>
</body>
</html>
```
在这个代码中,我们首先定义了一个商品列表的数据`goodsData`,其中包含了三个商品的名称、描述和价格。然后,我们使用JavaScript动态生成了一个商品列表展示的`<ul>`元素,并将商品数据填充到列表中。同时,我们还添加了一个输入框和一个搜索按钮,用于搜索商品,当用户输入关键字并点击搜索按钮时,我们会根据关键字过滤出符合条件的商品,并重新渲染商品列表。
另外,我们还定义了一个`showDetail`函数,用于展示商品详情。当用户点击商品列表中的某一项时,我们会调用该函数,将商品详情展示在页面上。
当然,这只是一个简单的示例,实际的商品动态网站需要更加完善的功能和更复杂的交互逻辑。