JavaScript——Demo

<body>

<img src="../img/off.gif" id="light_off">

<script type="text/javascript">
    /*
    *   分析：
    *       1. 獲取圖片對象
    *       2. 給圖片對象綁定單擊事件
    *       3. 每次點擊切換圖片
    *           * 若燈是開的 on， 切換圖片爲off
    *           * 若燈是關的 off, 切換圖片爲on
    *           可以使用flag標記來完成
    */

    // 獲取圖片對象
    var light_off = document.getElementById("light_off");
    // alert(light_off.src);
    // 給Light_off設置單擊事件
    var flag = false; // 燈泡是關閉的狀態
    light_off.onclick = function () {
        if (flag) {
            light_off.src = "../img/off.gif";
            flag = false;
        } else {
            light_off.src = "../img/on.gif";
            flag = true;
        }
    }
    
</script>
</body>

輪播圖

<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <style>
        img {
            width: 100%;
        }
    </style>
</head>
<body>

<img src="../img/banner_1.jpg" id="img1">

<script type="text/javascript">

    //分析
    //1. 在頁面上使用img標籤展示圖片
    //2. 定義一個方法, 修改圖片對象的src屬性
    //3. 定義一個定時器,每隔3秒調用方法一次

    var img1 = document.getElementById("img1");
    var number = 1;

    function modifyImage() {
        number++;
        if (number > 3) {
            number = 1;
        }
        img1.src = "../img/banner_" + number + ".jpg";
    }

    setInterval(modifyImage, 2000);

</script>
</body>

自動跳轉

<head>
    <meta charset="UTF-8">
    <title>自動跳轉</title>
    <style type="text/css">
        .time {
            color: red;
            font-weight: bold;
        }

        p {
            text-align: center;
        }
    </style>
</head>
<body>

<p>
    <span class="time">5</span>秒之後,自動跳轉到百度...
</p>

<script type="text/javascript">
    // 分析
    //1. 顯示頁面效果
    //2. 倒計時讀秒效果實現
        //2.1 定義一個方法,獲取span標籤,修改span標籤體的內容,時間--
        //2. 定義一個定時器, 1s執行一次該方法
    //3. 在方法中判斷時間若<=0, 則跳轉到百度界面

    var second = 5;
    var span_time = document.getElementsByClassName("time")[0];
    function modifyTime() {
        second--;
        if (second <= 0){
            location.href = "https://www.baidu.com";
        }
        span_time.innerHTML = second +" ";
    }

    setInterval(modifyTime, 1000);
</script>
</body>

window彈框

index.html

<body>

用戶編號:<input id="uid" type="text"><br>
用戶姓名:<input id="uname" type="text"><br>
<input id="btn" type="button" value="選擇" onclick="open1()">

<script type="text/javascript">
    //1. 創建一個頁面
        //1.1 有兩個輸入項和一個按鈕
        //1.2 按鈕上有一個時間: 彈出一個新窗口open
    //2. 創建彈出頁面
        //2.1 在頁面上創建一個表格
        //2.2 每一行有一個按鈕和編號和姓名
        //2.3 按鈕上有一個事件: 把當前的編號和姓名,賦值到頁面1的兩個輸入框內

    function open1() {
        window.open("user.html","","width=250,height==150");
    }
</script>
</body>

user.html

<body>

<table border="1">
    <tr>
        <td>操作</td>
        <td>編號</td>
        <td>姓名</td>
    </tr>
    <tr>
        <td><input type="button" value="選擇" onclick="s('100','張三');"></td>
        <td>100</td>
        <td>張三</td>
    </tr>
    <tr>
        <td><input type="button" value="選擇" onclick="s('101','李四');"></td>
        <td>101</td>
        <td>李四</td>
    </tr>
    <tr>
        <td><input type="button" value="選擇" onclick="s('102','王五');"></td>
        <td>102</td>
        <td>王五</td>
    </tr>
</table>

<script>
    function s(uid, uname) {
        // 跨頁面傳值,需要用到window的opener屬性,創建當前頁面父頁面的引用
        var fwindow = window.opener;
        fwindow.document.getElementById("uid").value = uid;
        fwindow.document.getElementById("uname").value = uname;
        // 關閉窗口
        window.close();
    }
</script>

</body>

省市聯動

<body>
<select id="countryID" onchange="add1(this.value)"> <!--this.value,當前點擊的是哪個option就是誰的值-->
    <option value="0">--請選擇--</option>
    <option value="中國">中國</option>
    <option value="美國">美國</option>
    <option value="德國">德國</option>
    <option value="日本">日本</option>
</select>

<select id="cityID"></select>

<script>

    // 創建一個二維數組存儲數據
    var arr = new Array(4);
    arr[0] = ["中國", "河南", "臺灣", "香港", "澳門"];
    arr[1] = ["美國", "紐約", "華盛頓", "舊金山", "夏威夷"];
    arr[2] = ["德國", "柏林", "慕尼黑", "狼堡", "法蘭克林"];
    arr[3] = ["日本", "北海道", "廣島", "長崎", "大阪", "東京"];

    function add1(val) {
        /*
        *   1. 遍歷二維數組
        *   2. 得到也是一個數組(國家對應關係)
        *   3. 拿到數組的第一個值和傳遞過來的值作比較
        *   4. 如果相同, 獲取到的第一個值後面的元素
        *   5. 得到city的select
        *   6. 添加過去, 使用appendChild的方法
        *       - 創建option(三步)
        */

        /*
        *   由於每次都要想city裏面添加option
        *   第二次添加, 追加
        *   - 每次添加之前, 判斷一下city裏面是否有option,如果有就刪除
        */

        // 獲取city的select
        var city1 = document.getElementById("cityID");
        var options1 = city1.getElementsByTagName("option");
        // 遍歷數組
        for (var m = 0; m < options1.length; m++) {
            // 得到每一個option
            var op = options1[m];
            // 刪除這個option,通過父節點刪除
            city1.removeChild(op);
            m--;
        }

        // 遍歷二維數組
        for (var i = 0; i < arr.length; i++) {
            // 得到二維數組裏面的每一個數組
            var arr1 = arr[i];
            // 得到遍歷之後的數組的第一個值
            var firstValue = arr1[0];
            // 判斷傳遞過來的值和第一個值是否相同
            if (firstValue == val) {
                // 獲取第一個值後面的元素
                for (var j = 1; j < arr1.length; j++) {
                    var value1 = arr1[j]; // 得到城市的名稱
                    // 創建option
                    var option1 = document.createElement("option");
                    // 創建文本
                    var text1 = document.createTextNode(value1);
                    // 把文本添加到option1裏面
                    option1.appendChild(text1);
                    // 添加值到city1裏面
                    city1.appendChild(option1);
                }
            }
        }
    }
</script>

</body>

表格全選

<head>
    <meta charset="UTF-8">
    <title>表格全選</title>
    <style>
        table {
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td, th {
            text-align: center;
            border: 1px solid;
        }

        div {
            margin-top: 10px;
            margin-left: 30%;
        }

        .out {
            background-color: white;
        }

        .over {
            background-color: pink;
        }
    </style>
</head>
<body>

<script>
    //1. 在頁面加載完後綁定事件
    window.onload = function () {
        //2. 給全選按鈕綁定單擊事件
        document.getElementById("selectAll").onclick = function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = true;
            }
        }

        document.getElementById("unSelectAll").onclick = function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = false;
            }
        }

        document.getElementById("selectRev").onclick = function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                // 設置每一個cb狀態爲相反
                cbs[i].checked = !cbs[i].checked;
            }
        }

        document.getElementById("firstCb").onclick = function () {
            var cbs = document.getElementsByName("cb");
            // 獲取第一個Cb
            // 因爲給第一個添加了事件, 當前的this就是第一個checkbox
            for (var i = 0; i < cbs.length; i++) {
                // 設置每一個cb狀態和第一個cb狀態相同
                cbs[i].checked = this.checked;
            }
        }

        // 給所有tr綁定鼠標移到元素之上和移出元素事件
        var trs = document.getElementsByTagName("tr");
        // 遍歷
        for (var i = 0; i < trs.length; i++) {
            // 移到元素之上
            trs[i].onmouseover = function () {
                this.className = "over";
            }
            // 移除元素
            trs[i].onmouseout = function () {
                this.className = "out";
            }
        }


    }
</script>

<table>
    <caption>學生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>編號</th>
        <th>姓名</th>
        <th>性別</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐沖</td>
        <td>男</td>
        <td><a href="javascript:void(0);">刪除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">刪除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>嶽不羣</td>
        <td>?</td>
        <td><a href="javascript:void(0);">刪除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全選" onclick="">
    <input type="button" id="unSelectAll" value="全不選">
    <input type="button" id="selectRev" value="反選">
</div>
</body>

White Camel

發佈了166 篇原創文章 · 獲贊 84 · 訪問量 13萬+

私信關注

JavaScript——Demo

目錄

電燈開關

輪播圖

window彈框

省市聯動

表格全選

SpringBoot——SpringBoot配置文件、yaml語法、JSR303校驗、多環境切換Profile

枚舉類的理解

Spring Java Config——@PropertySource和@Valuen、自動裝配等

Session、Cookie和Token的主要區別

學習《戀上數據結構與算法》目錄索引(持續更新中)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結