表白墻可能是各大高校都有的，但也許大家平常只是看一看就結束了，今天，博主將會用HTML+CSS+JavaScript這樣很簡單的方式帶大家實作一個表白墻頁面，這個頁面設計非常簡單基礎，小白也能輕松掌握，快拿去給自己心儀的人告白吧！
表白墻
- 🌹整體展示
- 🌹步驟分解
- 🔥用HTML創建整體布局
- 🔥用CSS美化頁面
- 🔥用JavaScript實作提交
- 🌹完整代碼
🌹整體展示
🌹步驟分解
🔥用HTML創建整體布局
源代碼如上，預覽效果如下：
🔥用CSS美化頁面
源代碼如上，預覽效果如下：
🔥用JavaScript實作提交
源代碼如上，預覽效果如整體展示
🌹完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h1 class="title">表白墻</h1>
<p>輸入后點擊提交, 會將資訊顯示在表格中</p>
<div class="row">
<span>誰: </span>
<input class="edit" type="text">
</div>
<div class="row">
<span>對誰: </span>
<input class="edit" type="text">
</div>
<div class="row">
<span>說什么: </span>
<input class="edit" type="text">
</div>
<div class="row">
<input type="button" value="提 交" class="submit">
</div>
</div>
<style>
* {
margin: 0;/*設定外邊距為0*/
padding: 0;/*設定內邊距為0*/
box-sizing: border-box;/*設定邊框不會撐大盒子*/
}
.title{
color:red;
font-family:KaiTi;
}
.container {
width: 400px;
margin: 0 auto;/*設定居中對齊*/
padding-top: 50px;
}
h1 {
text-align: center;
padding-top: 50px;
}
p {
color:black;
text-align: center;
font-size: 14px;
padding: 10px 0;
}
.row {
height: 40px;
display: flex;/*彈性布局*/
justify-content: center;
align-items: center;
font-family: KaiTi;
font-weight: 700;
}
span {
width: 100px;
line-height: 40px;
}
.edit {
width: 200px;
height: 30px;
padding-left: 5px;
}
.submit {
width: 304px;
height: 40px;
color: white;
background-color: orange;
border: none;/*去除邊框*/
border-radius: 15px;
}
.submit:active{
background-color:rgb(181, 184, 38);
}/*設定點擊提交按鈕時的效果*/
html, body {
height: 100%;/* 設定整體頁面高度,讓頁面和瀏覽器視窗一樣高 */
background-image: url("image/表白墻壁紙.png");/*設定背景圖片*/
background-position: center center;
background-size:cover;
background-repeat: no-repeat; }
</style>
<script>
// 給點擊按鈕注冊點擊事件
let submit = document.querySelector('.submit');//獲取到提交按鈕
submit.onclick = function () {
// 1. 獲取到編輯框內容
let edits = document.querySelectorAll('.edit');
let from = edits[0].value;
let to = edits[1].value;
let message = edits[2].value;
console.log(from + "," + to + "," + message);
//對用戶輸入的內容做一個檢查，確保是合法的提交
if (from == '' || to == '' || message == '') {
return;
}
// 2. 構造 html 元素
let row = document.createElement('div');
row.className = 'row';
row.innerHTML = from + '對' + to + '說: ' + message;
// 3. 把構造好的元素添加到DOM樹中
let container = document.querySelector('.container');
container.appendChild(row);
// 4. 同時清理之前輸入框的內容
for (let i = 0; i < 3; i++) {
edits[i].value = '';
}
}
</script>
</body>
</html>
注意，以上所有樣式大家都可以自行調整哦，相信大家會設計出比博主更好的頁面效果！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/402765.html
標籤：其他