HTML实现生日快乐动态效果
以下是一个简单的HTML和JavaScript代码示例，用于创建一个基本的网页，该网页在页面上显示“生日快乐”，并且文字随机变换颜色和大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生日快乐动态文字</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f7f7f7;
}
#message {
font-size: 3em;
color: #333;
text-align: center;
margin: 0;
}
</style>
</head>
<body>
<div id="message">生日快乐！</div>
<script>
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function updateMessageStyle() {
const messageElement = document.getElementById('message');
const colors = ['#e74c3c', '#f1c40f', '#1abc9c', '#3498db', '#9b59b6', '#e67e22', '#e74c3c', '#f1c40f', '#1abc9c', '#3498db', '#9b59b6', '#e67e22'];
const size = randomInteger(10, 30);
const color = colors[randomInteger(0, colors.length - 1)];
messageElement.style.color = color;
messageElement.style.fontSize = `${size}px`;
}
setInterval(updateMessageStyle, 1000); // 每隔1000毫秒更新一次样式
</script>
</body>
</html>这段代码会在网页上定期随机更新“生日快乐”的颜色和字体大小，从而创建一个动态的效果。你可以将这段代码保存为HTML文件，并在浏览器中打开以查看效果。
评论已关闭