HTML+CSS+JS實現的簡單應用小案例分享
1.猜數字
<!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>猜數字遊戲</title>
</head>
<body>
<input type="button" id="reset" value="重新開始一局遊戲">
<div>
<span>請輸入要猜的數字:</span>
<input type="text" id="num">
<input type="button" value="猜" id="guess">
</div>
<div>
<span>已經猜的次數: </span>
<span id="count"> 0 </span>
</div>
<div>
<span>猜的結果: </span>
<span id="result"></span>
</div>
<script>
// 先獲取要用到的 JS 的 DOM 對象
let resetButton = document.querySelector("#reset") /* 參數時選擇器，所以要通過特殊符號指定是哪種選擇器*/
let numInput = document.querySelector('#num');
let guessButton = document.querySelector('#guess');
let countSpan = document.querySelector('#count');
let resultSpan = document.querySelector('#result');
//生成一個1~100之間的隨機整數
let toGuess = Math.floor(Math.random()*100) + 1;
let count = 0;
console.log("toGuess: " + toGuess);
guessButton.onclick = function(){
// 用戶點擊 [猜] 這個按鈕, 首先先更新點擊次數的顯示.
count++;
countSpan.innerHTML = count;
// 讀取到輸入框的內容, 進行判定
/* parseInt() 函數解析字符串並返回整數 */
let num = parseInt(numInput.value);
console.log("num: " + num);
if(num < toGuess){
resultSpan.innerHTML = '猜低瞭';
resultSpan.style.color = 'red';
}else if(num > toGuess){
resultSpan.innerHTML = '猜高瞭';
resultSpan.style.color = 'green';
}else{
resultSpan.innerHTML = '猜對瞭';
resultSpan.style.color = 'orange';
}
}
resetButton.onclick = function(){
// 把 toGuess 和 count 清空, 同時重新生成一個隨機的整數
toGuess = Math.floor(Math.random() * 100) + 1;
count = 0;
resultSpan.innerHTML = '';
countSpan.innerHTML = '';
numInput.value = '';
}
</script>
</body>
</html>
2.表白墻
<!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>messageWall</title>
</head>
<body>
<style>
*{
margin:0;
padding:0;
}
.container {
width: 100%;
height:100%;
}
h1{
text-align:center;
padding:20px 0;
}
p{
font-size: 15px;
color:grey;
padding:10px 0;
text-align: center;
}
.row{
display:flex;
height:50px;
justify-content: center;
align-items: center;
}
.row span{
width:100px;
}
.row .edit{
width: 200px;
height: 36px;
}
.row .submit{
width:300px;
height:30px;
background-color: orange;
color:#fff;
border: none; /* 去掉按鈕邊框*/
}
.row .submit:active{
background-color: grey;
}
</style>
<div class="container">
<h1>表白墻</h1>
<p>輸入後點擊提交, 將會把消息顯示在墻上</p>
<div class="row">
<span>誰:</span>
<input type="text" class="edit">
</div>
<div class="row">
<span>對誰:</span>
<input type="text" class="edit">
</div>
<div class="row">
<span>說什麼:</span>
<input type="text" class="edit">
</div>
<div class="row">
<input type="button" value="提交" class="submit">
</div>
</div>
<script>
let submitButton = document.querySelector('.submit');
submitButton.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. 創建一個新的元素節點，即獲取到的輸入框信息
//將其添加到DOM樹中
let row = document.createElement('div');/* 創建出新的idv節點*/
row.className = 'row';/* 設置屬性名 */
row.innerHTML = from + '對' + to + '說: ' + message;
let container = document.querySelector('.container');
container.appendChild(row);
//3. 把上次輸入的內容清空
for(let i = 0; i < edits.length; i++){
edits[i].value = '';
}
}
</script>
</body>
</html>
3.切換日夜間模式
<!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>切換日夜間模式</title>
</head>
<body>
<style>
/* 清除瀏覽器默認格式 */
*{
margin:0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.light{
background-color: #fff;
color: #000;
font-size: 40px;;
}
.dark{
background-color: #666;
color: #eee;
font-size: 40px;;
}
</style>
<div class="light">
代碼案例:切換日夜間模式;
</div>
<script>
/*獲取元素*/
let div = document.querySelector('div');
div.onclick = function(){
console.log(div.className); /* 獲取屬性值:content*/
if (div.className.indexOf('light') != -1) {
div.className = 'dark';
}else{
div.className = 'light';
}
}
</script>
</body>
</html>
4.待辦事項
<!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>todoList</title>
</head>
<body>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.nav {
width: 600px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.nav input {
width: 450px;
height: 50px;
font-size: 25px;
padding-left: 10px;
}
.nav button {
width: 150px;
height: 50px;
border: none;
color: white;
background-color: orange;
font-size: 18px;
}
.nav button:active {
background-color: grey;
}
.container {
width: 600px;
margin: 0 auto;
display: flex;
justify-content: center;
/* padding-top: 10px; */
margin-top: 10px;
/* background-color: green; */
}
.container .left,
.container .right {
width: 50%;
}
.container .left h3,
.container .right h3 {
text-align: center;
height: 50px;
line-height: 50px;
background-color: black;
color: white;
}
.container .row {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.container .row span {
width: 240px;
}
.container .row button {
width: 40px;
height: 30px;
}
.container .row input {
margin-right: 5px;
}
</style>
<!-- 表示上方的 div, 裡面放輸入框和按鈕 -->
<div class="nav">
<input type="text">
<button>新建任務</button>
</div>
<!-- 這個是下方的 div, 裡面分成左右兩欄 -->
<div class="container">
<div class="left">
<h3>未完成</h3>
<!-- <div class="row">
<input type="checkbox">
<span>吃飯</span>
<button>刪除</button>
</div> -->
</div>
<div class="right">
<h3>已完成</h3>
</div>
</div>
<script>
let addTaskBtn = document.querySelector(".nav button");
addTaskBtn.onclick = function() {
// 1. 獲取到輸入框的內容
let input = document.querySelector(".nav input");
let taskContent = input.value;
// 2. 創建一個 div.row, 裡面設置上需要的 復選框, 文本, 刪除按鈕
let row = document.createElement('div');
row.className = 'row';
let checkBox = document.createElement('input');
checkBox.type = 'checkbox';
let span = document.createElement('span');
span.innerHTML = taskContent;
let deleteBtn = document.createElement('button');
deleteBtn.innerHTML = '刪除';
row.appendChild(checkBox);
row.appendChild(span);
row.appendChild(deleteBtn);
// 3. 把 div.row 添加到 .left 中~
let left = document.querySelector('.left');
left.appendChild(row);
// 4. 給 checkBox 增加一個點擊處理函數. 點擊之後就能夠移動任務
checkBox.onclick = function() {
// 當用戶點擊的時候, 就獲取到當前的這個 row 這個元素
// 把這 row 給添加到另外一側.
// 也可以根據 checkBox 的選中狀態決定是在 left 還是 right
let target = null;
if (checkBox.checked) {
// 已經是選中的狀態
// 就把這個元素放到右邊
target = document.querySelector('.right');
} else {
// 是未選中的狀態
// 就把這個元素放到左邊
target = document.querySelector('.left');
}
target.appendChild(row);
}
// 5. 實現刪除效果, 給刪除按鈕新增一個刪除操作
deleteBtn.onclick = function() {
// 要想刪除 row, 就需要知道 row 的父元素
let parent = row.parentNode;
parent.removeChild(row);
}
}
</script>
</body>
</html>
到此這篇關於HTML+CSS+JS實現的簡單應用小案例分享的文章就介紹到這瞭,更多相關HTML CSS JS應用案例內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！