相信很多人都曾經想過給喜歡的人寫一個告白墻，用心的話語表達自己的感情。在今天，我們將會用HTML來完成這個愿望！以下是HTML告白墻的代碼：
<!DOCTYPE html>
<html>
<head>
<title>告白墻</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>我愛你，{{name}}</h1>
<form>
<input type="text" placeholder="輸入留言">
<button type="submit">提交留言</button>
</form>
<ul id="messages">
<li>{{message}}</li>
</ul>
<script>
const form = document.querySelector('form');
const input = form.querySelector('input');
const ul = document.querySelector('#messages');
form.addEventListener('submit', (e) =>{
e.preventDefault();
const li = document.createElement('li');
li.textContent = input.value;
ul.appendChild(li);
input.value = '';
});
</script>
</body>
</html>這個HTML告白墻代碼實現了以下功能：
- 一個h1標題，告訴對方“我愛你”
- 一個表單，讓用戶輸入留言
- 一個ul列表，用于存儲留言信息
- 一個script腳本，監聽表單提交事件，并將留言信息添加到ul列表中
現在，你只需要將代碼復制并粘貼到你的網頁中，就可以創建一個屬于你們的告白墻了！無私奉獻的愛貴如此！
上一篇vue style 判斷
下一篇c 1.1 json解析