HTML 爱心代码动态中间加名字
时间: 2024-10-14 11:09:08 浏览: 6
在HTML中,如果你想要动态地在爱心图标中间插入用户输入的名字,你需要结合JavaScript或者服务器端语言(如PHP、Python等)来处理用户的输入。这里提供一个基本的JavaScript示例,假设你有一个输入框让用户输入名字:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.heart-container {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100px;
}
.heart {
font-size: 30px;
color: red;
}
.user-input {
margin-left: 10px;
}
</style>
<script>
function addNameToHeart() {
var nameInput = document.getElementById('nameInput');
var heartText = document.querySelector('.heart');
if (nameInput.value) {
heartText.textContent = '❤' + ' ' + nameInput.value;
}
}
</script>
</head>
<body>
<input type="text" id="nameInput" placeholder="请输入名字">
<button onclick="addNameToHeart()">插入名字</button>
<div class="heart-container">
<span class="heart">&#10084;</span>
</div>
</body>
</html>
```
这个示例中,当用户点击“插入名字”按钮时,会获取输入框中的值并将其追加到爱心图标后面。注意实际应用中可能还需要对空值或非法输入进行检查。