帮我写个能用于html的生日祝福脚本
时间: 2024-11-13 12:28:51 浏览: 13
html生日祝福特效代码
当然可以。这是一个简单的HTML模板,包含JavaScript动态生成的生日祝福信息:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>生日祝福</title>
<style>
.birthday-message {
display: none; /* 初始隐藏 */
}
</style>
</head>
<body>
<h1 id="name">请输入朋友的名字:</h1>
<input type="text" id="friendName" placeholder="例如:张三">
<button onclick="showBirthdayMessage()">发送祝福</button>
<div class="birthday-message" id="birthdayMessage"></div>
<script>
function showBirthdayMessage() {
const friendName = document.getElementById("friendName").value;
const birthdayMessage = `亲爱的 ${friendName},祝你生日快乐!愿你的每一天都充满阳光和幸福!`;
// 显示生日祝福
document.getElementById("birthdayMessage").innerHTML = birthdayMessage;
document.getElementById("birthdayMessage").style.display = "block";
}
</script>
</body>
</html>
```
这个HTML页面包含了输入框让用户输入名字,点击按钮后会调用`showBirthdayMessage`函数,显示预设的祝福语句。你可以将此代码复制到一个新的HTML文件中运行。
阅读全文