HTML+CSS+JS實現的簡單應用小案例分享

2022-02-23 19:00:21

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應用案例內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

HTML+CSS+JS實現的簡單應用小案例分享

目錄

1.猜數位

2.表白牆

3.切換日夜間模式

4.待辦事項

熱門文章