我需要一个关于杭州土特产品丝绸的用html5加js代码
时间: 2024-03-13 20:44:01 浏览: 75
好的,以下是一个简单的 HTML5 + JS 代码示例,用于展示杭州土特产品丝绸的图片和描述信息:
```html
<!DOCTYPE html>
<html>
<head>
<title>杭州土特产品丝绸</title>
<meta charset="utf-8">
<style>
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.product-image {
width: 300px;
height: 300px;
margin-right: 50px;
}
.product-description {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<img class="product-image" id="product-image" src="silk.jpg" alt="杭州土特产品丝绸">
<div class="product-description" id="product-description">
Loading...
</div>
</div>
<script>
// 用于展示产品描述信息的数组
var descriptions = [
"杭州土特产品丝绸是一种高质量的丝绸制品,具有柔软、光滑、舒适的特性。它采用优质的材料和先进的生产工艺,经过精心设计和制作,成为了一件艺术品。",
"杭州土特产品丝绸是一种有着悠久历史的传统手工艺品,深受人们的喜爱。它的纹路独特、色泽鲜艳,体现了浓厚的文化底蕴和独特的地域特色。",
"杭州土特产品丝绸是一种非常适合家居装饰和礼品赠送的产品。它不仅可以为家居环境增添亮丽的色彩,还可以成为一份珍贵的礼品,传递着人们对美好生活的向往和祝福。"
];
// 随机选择一个产品描述信息,并将其显示在页面上
var randomIndex = Math.floor(Math.random() * descriptions.length);
var descriptionElement = document.getElementById("product-description");
descriptionElement.innerText = descriptions[randomIndex];
</script>
</body>
</html>
```
你可以将上面的代码保存为一个名为 `index.html` 的文件,并将一张名为 `silk.jpg` 的图片放在同一目录下。然后在浏览器中打开这个文件,就可以看到一个展示杭州土特产品丝绸的页面,其中包含一张图片和一个随机选择的产品描述信息。
阅读全文