JavaScript 页面背景效果可以通过多种方式实现,以下是一个简单的示例,展示如何使用 JavaScript 和 CSS 来创建一个动态背景效果。
以下是一个简单的示例,展示如何使用 JavaScript 动态改变页面背景颜色:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Background</title>
<style>
body {
transition: background-color 1s ease;
}
</style>
</head>
<body>
<button onclick="changeBackgroundColor()">Change Background Color</button>
<script>
function changeBackgroundColor() {
const colors = ['#FF5733', '#33FF57', '#3357FF', '#F333FF', '#33FFF3'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = randomColor;
}
</script>
</body>
</html>
通过以上方法,可以有效地创建和管理JavaScript页面背景效果,同时确保良好的性能和用户体验。
领取专属 10元无门槛券
手把手带您无忧上云