首页水果店销售有苹果3.5元/斤、香梨3元/斤、榴莲5.5元/斤、山竹12元/斤、猕猴桃8.5元/斤，请帮店家设计一个网页，当用户输入相应水果时，显示相应的报价，若不在列，显示暂无该商品。JS代码

水果店销售有苹果3.5元/斤、香梨3元/斤、榴莲5.5元/斤、山竹12元/斤、猕猴桃8.5元/斤，请帮店家设计一个网页，当用户输入相应水果时，显示相应的报价，若不在列，显示暂无该商品。JS代码

时间: 2024-12-11 21:22:31 浏览: 8

你可以使用HTML和JavaScript来创建一个简单的网页功能。下面是一个基本的示例，展示如何实现这个功能： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>水果价格查询</title> <style> .error { color: red; } </style> </head> <body> <h1>水果价格查询</h1> <input type="text" id="fruitInput" placeholder="请输入水果名称"> <button onclick="checkPrice()">查询价格</button> <p id="priceResult"></p> <script> const prices = { 苹果: 3.5, 香梨: 3, 榴莲: 5.5, 山竹: 12, 猕猴桃: 8.5 }; function checkPrice() { const fruitInput = document.getElementById('fruitInput').value.trim().toLowerCase(); let priceResult = ''; if (prices.hasOwnProperty(fruitInput)) { priceResult = `当前价格：$${prices[fruitInput]} 元/斤`; } else { priceResult = '暂无此商品'; } document.getElementById('priceResult').innerText = priceResult; } </script> </body> </html> ``` 在这个例子中，我们创建了一个简单的HTML页面，包含一个输入框让用户输入水果名称，以及一个按钮用于触发查询价格的函数。`checkPrice`函数检查用户输入的水果是否在预设的价格字典`prices`中，如果存在则显示价格，不存在则显示暂无此商品。

阅读全文