用HTML写关于卖蛋糕的网页有动态显示的代码
时间: 2024-06-10 16:06:36 浏览: 13
很高兴回答您的问题。以下是一个简单的用 HTML 写的关于卖蛋糕的网页的动态显示代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>卖蛋糕</title>
</head>
<body>
<!-- 以上是网页头部,以下是网页主体 -->
<h1>欢迎来到卖蛋糕的网站</h1>
<p>我们有各种各样的蛋糕可供选择。</p>
<!-- 这里插入一张蛋糕的图片 -->
<img src="cake.jpg" alt="蛋糕">
<!-- 这里使用 JavaScript 来实现动态显示 -->
<script>
var cakes = [
"巧克力蛋糕",
"奶油水果蛋糕",
"草莓慕斯蛋糕",
"蓝莓奶油蛋糕",
"榴莲蛋糕"
];
var i = 0;
function updateCakes() {
document.getElementById("cake").innerHTML = cakes[i];
i++;
if (i == cakes.length) {
i = 0;
}
}
// 每秒钟更新一次蛋糕
setInterval(updateCakes, 1000);
</script>
<p>我们推荐的特色蛋糕是:</p>
<!-- 这里用span标签来实现动态显示 -->
<span id="cake"></span>
<p>快来选购吧!</p>
</body>
</html>
```
以上的代码实现了每秒钟更新蛋糕种类的动态效果,让网页看起来更加生动活泼。