HTML5 微博 App 源代碼
<!DOCTYPE html>
<html>
<head>
<title>HTML5 微博 App</title>
</head>
<body>
<div id="app">
<h1>微博 App</h1>
<form>
<input type="text" id="message">
<button type="submit" id="post">發表</button>
</form>
<ul id="messages"></ul>
</div>
<script>
var messages = document.getElementById('messages');
var postButton = document.getElementById('post');
postButton.addEventListener('click', function(event) {
event.preventDefault(); // 阻止表單默認行為
var messageInput = document.getElementById('message');
var message = messageInput.value.trim(); // 獲取并處理消息文本
if (message) {
var li = document.createElement('li'); // 創建一個 li 元素
li.textContent = message; // 設置 li 元素的文本內容
messages.insertBefore(li, messages.firstChild); // 添加至消息列表
messageInput.value = ''; // 清空表單
}
});
</script>
</body>
</html>以上是一個簡單的 HTML5 微博 App。它包含一個表單，用戶可以輸入文本消息并通過點擊“發表”按鈕來發布。發布的消息將顯示在下面的消息列表中。
這個 App 的核心代碼位于 <script>...</script> 標簽中。它首先獲取了表示消息列表的 <ul> 元素和表示“發表”按鈕的 <button> 元素。然后，當“發表”按鈕被點擊時，它通過阻止表單默認行為來避免頁面刷新。
代碼繼續獲取表示文本框的 <input> 元素，并獲取輸入的消息文本。然后，它檢查消息文本是否為空，并在不為空的情況下創建一個新的 <li> 元素，將文本內容添加到其中，并將其添加到消息列表的頂部。最后，它清空文本框以供下一個消息使用。
這個 App 使用了 HTML5 的一些新特性，如 input 類型為“text” 和阻止默認行為的事件監聽器。這使得它更加現代化和易于使用。
上一篇vue修改css文件
下一篇vue中引入css樣式