html input元素

<input type="text"/><br>
<input type="password"/><br>
<input type="button"/><br>
<input type="checkbox"/><br>
<input type="color"/><br>
<input type="date"/><br>
<input type="time"/><br>
<input type="email" /><br>
<input type="file"/><br>
<input type="url"/><br>
<input type="week"/><br>
<input type="number"/><br>
<input type="month"/><br>
<input type="radio"/><br>
<input type="range"/><br>
<input type="reset"/><br>
<input type="search"/><br>
<input type="submit"/><br>

添加css樣式

使用：

1. box-sizing: border-box;: 確保元素的 width 和 height 包含 padding 和 border，防止布局混亂。
2. 輸入框 :focus 偽類: 當輸入框被點擊或獲得焦點時，邊框會變成藍色 (#007bff)，并添加一個柔和的陰影，這能給用戶清晰的視覺反饋。
3. 按鈕 :hover 偽類: 當鼠標懸停在按鈕上時，背景顏色會變深，告訴用戶這個元素是可點擊的。

* {box-sizing: border-box;
}body {font-family: Arial, sans-serif;padding: 20px;background-color: #f4f4f4;
}input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="week"],
input[type="month"],
input[type="date"],
input[type="time"] {width: 300px;padding: 10px;margin-bottom: 15px;border: 1px solid #ccc;border-radius: 4px;font-size: 16px;transition: border-color 0.3s, box-shadow 0.3s;
}input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {border-color: #007bff;box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);outline: none; /* 移除瀏覽器默認的焦點輪廓 */
}input[type="button"],
input[type="submit"],
input[type="reset"] {background-color: #007bff;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;margin-right: 10px;transition: background-color 0.3s;
}input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {background-color: #0056b3;
}input[type="checkbox"],
input[type="radio"] {margin-right: 5px;
}input[type="file"] {display: block;margin-bottom: 15px;
}input[type="color"] {height: 40px;width: 40px;border: none;padding: 0;vertical-align: middle;
}input[type="range"] {width: 300px;margin: 15px 0;
}

使用js添加交互

按鈕點擊提示

document.addEventListener('DOMContentLoaded', () => {const submitBtn = document.querySelector('input[type="submit"]');const resetBtn = document.querySelector('input[type="reset"]');const buttonBtn = document.querySelector('input[type="button"]');if (submitBtn) {submitBtn.addEventListener('click', (event) => {event.preventDefault(); // 阻止表單默認的提交行為alert('您點擊了提交按鈕！');});}if (resetBtn) {resetBtn.addEventListener('click', () => {alert('您點擊了重置按鈕！');});}if (buttonBtn) {buttonBtn.addEventListener('click', () => {alert('您點擊了一個普通按鈕！');});}
});

輸入框字符計數

document.addEventListener('DOMContentLoaded', () => {const myTextInput = document.getElementById('myText');const charCountSpan = document.getElementById('charCount');const maxLength = 50;if (myTextInput && charCountSpan) {myTextInput.addEventListener('input', () => {const currentLength = myTextInput.value.length;charCountSpan.textContent = `${currentLength}/${maxLength}`;if (currentLength > maxLength) {charCountSpan.style.color = 'red';} else {charCountSpan.style.color = '#333';}});}
});

使用 npm 來管理項目包

安裝 Node.js

https://www.runoob.com/nodejs/nodejs-install-setup.html

提示：安裝完之后重啟vscode。

初始化項目

npm init -y

安裝依賴包

npm install vue

這條命令會做以下幾件事：

1. 下載包：從 npm 倉庫下載 Vue.js 及其所有依賴。

2. 安裝包：將下載的包安裝到項目目錄下的 node_modules 文件夾中。

更新 package.json：在 package.json 文件的 dependencies 字段中，自動添加 “vue”: “版本號” 這一行，記錄下安裝的 Vue.js 版本。

創建一個基于 Vite 的 Vue 項目

雖然 npm install vue 可以直接在任何項目中安裝 Vue，但對于一個全新的 Vue 項目，官方更推薦使用 Vite 腳手架工具來創建。

創建項目

npm create vue@latest

進入項目目錄

cd vue-project

安裝依賴

npm install

調用代碼格式化工具

npm run format

啟動開發服務器

npm run dev

在瀏覽器中訪問

根據上圖中的Local地址，在瀏覽器中訪問

博客內容如有錯誤歡迎指出~