如果你正在尋找一種簡單易懂的 HTML 愛心簽到墻代碼，那么你來對地方了！只需要幾行代碼，就可以創建一個有趣又有用的簽到墻。讓我們來看看這個代碼是如何工作的。
<!DOCTYPE html>
<html>
<head>
<title>愛心簽到墻</title>
</head>
<body>
<h1>愛心簽到墻</h1>
<p>輸入您的名字并點擊“簽到”按鈕，展示您的愛心！</p>
<form>
<label>名字:</label><input type="text" id="name">
<button onclick="addHeart()">簽到</button>
</form>
<div id="hearts"></div>
<script>
function addHeart() {
var name = document.getElementById('name').value;
var heart = '<div class="heart">' + name + '</div>';
document.getElementById('hearts').innerHTML += heart;
}
</script>
<style>
.heart {
display: inline-block;
margin: 10px;
font-size: 20px;
color: red;
transform: rotate(-45deg);
}
</style>
</body>
</html>這段代碼包含了一個 HTML 表單用于輸入姓名和一個“簽到”按鈕，這個按鈕會調用addHeart()函數。這個函數會獲取用戶輸入的名字，然后將帶有姓名的紅色愛心添加到一個名叫“hearts”的<div>元素中。這是由innerHTML屬性實現的。最后，一些 CSS 樣式被應用到.heart類，以使它們看起來像是真正的愛心。
現在你已經知道了如何使用 HTML 愛心簽到墻的代碼，趕緊試試看吧！