如何用javascript实现商品展示功能？

要实现商品展示功能，可以使用JavaScript来动态加载和展示商品信息。以下是一个简单的实现示例：

首先，创建一个HTML页面，其中包含一个用于展示商品的容器，例如一个div元素：

<div id="productContainer"></div>

在JavaScript中，创建一个包含商品信息的数组。每个商品对象应包含名称、价格和图片等属性。例如：

var products = [
    {
        name: "商品1",
        price: 10,
        image: "image1.jpg"
    },
    {
        name: "商品2",
        price: 20,
        image: "image2.jpg"
    },
    // 添加更多商品对象...
];

使用JavaScript遍历商品数组，并将每个商品的信息动态添加到商品容器中。可以使用innerHTML属性来添加HTML标记。例如：

var productContainer = document.getElementById("productContainer");

for (var i = 0; i < products.length; i++) {
    var product = products[i];
    
    var productHTML = '<div class="product">';
    productHTML += '<img src="' + product.image + '" alt="' + product.name + '">';
    productHTML += '<h3>' + product.name + '</h3>';
    productHTML += '<p>价格：$' + product.price + '</p>';
    productHTML += '</div>';

    productContainer.innerHTML += productHTML;
}

在CSS中，可以添加一些样式来美化商品展示的外观。例如：

.product {
    display: inline-block;
    width: 200px;
    text-align: center;
    margin: 10px;
}

.product img {
    width: 150px;
    height: 150px;
}

.product h3, .product p {
    margin: 5px;
}

这样，当页面加载时，JavaScript会动态生成商品展示，并将其添加到商品容器中。你可以根据需要修改HTML、JavaScript和CSS来实现自己的商品展示功能