首页用html+css+JavaScript写一个动态网站，给出源码

用html+css+JavaScript写一个动态网站，给出源码

时间: 2024-10-28 21:09:28 浏览: 7

创建一个简单的动态网页涉及到HTML、CSS和JavaScript的基本知识。下面是一个基本的例子，展示了一个点击按钮改变背景颜色的页面： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>动态背景颜色示例</title> <style> body { transition: background-color 0.5s ease; } </style> </head> <body id="content"> <h1>点击切换背景颜色</h1> <button onclick="changeBackgroundColor()">切换</button> <script> function changeBackgroundColor() { var colors = ["red", "blue", "green", "yellow"]; var currentIndex = Math.floor(Math.random() * colors.length); document.getElementById("content").style.backgroundColor = colors[currentIndex]; } </script> </body> </html> ``` 在这个例子中： - HTML部分定义了页面结构，包含一个标题和一个按钮，`onclick`属性设置为调用JavaScript函数。 - CSS部分设置了body元素的过渡效果，使其背景颜色变化时更平滑。 - JavaScript部分定义了一个函数`changeBackgroundColor()`，当用户点击按钮时，会随机选择一个颜色并改变`<body>`的背景。

阅读全文