在學習JavaScript中用到的示例

時間 2019-11-08

標籤學習 javascript 用到示例欄目 JavaScript 简体版

原文原文鏈接

jQuery老師博客css

1、定時器示例html

功能：讓input的文本框，顯示時間，並實時更新jquery

邏輯思路：瀏覽器

1.先定義一個函數，用來把當前時間賦值給input.valueapp

2.開始button設置點擊事件，並用setInterval設置間隔時間運行（判斷setInterval的返回值是否undefined，保證只有一個計時器存在）ide

3.結束button用clearInterval來中止事件函數

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04定時器練習</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" >
    <input id="i1" class="c1" type="text" >
    <input id="start" class="c1" type="button" value="開始" >
    <input id="stop" class="c1" type="button" value="中止">
    <script>
        var t; //聲明一個全局變量保存定時器
        function foo(){
            var now = new Date();
            var nowStr = now.toLocaleString();
            var i1Ele = document.getElementById("i1");
            i1Ele.value=nowStr; //在input框獲取當前時間
        }

        var startButton = document.getElementById("start");
        startButton.onclick = function () {
            foo();
            console.log(t);
            // t = setInterval(foo,1000);
            if (!t){
                t = setInterval(foo,1000);
            }
            //若是不判斷t，那麼t每次按一下開始就會生成一個id，而clear只會默認清除最後一個ID
                //會形成沒法中止，且頁面裏同時出現多個定時器的現象
        }

        var stopButton = document.getElementById("stop");
        stopButton.onclick = function () {
            clearInterval(t); // 清除t對應的那個定時器,t的值還在，因此須要給t從新賦值
            console.log(t);
            t = undefined;
        }
    </script>
</form>
</body>
</html>

定時器

2、搜索框示例：post

功能：讓input的文本框，當onfocus的時候自動清空，當onblur的時候變爲初始值ui

邏輯思路：this

用onfocus和onblur這兩個事件，來操做input的value值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05搜索框示例</title>
</head>
<body>

<form action="">
    <input type="text" id="i1" placeholder="gkxxxx">
    <input type="button" id="i2" value="搜索">
</form>
<script>
    var i1Ele = document.getElementById("i1");
    i1Ele.onfocus = function () {
        this.placeholder="";
    }

    i1Ele.onblur = function () {
        if (!this.placeholder.trim() || !this.value.trim()){
            i1Ele.placeholder="gkxxxx";
            i1Ele.value="gkxxxx";
        }

    }
</script>
</body>
</html>

搜索框示例

3、select聯動示例

功能：在select 1 中選擇完所屬市後，select 2 自動跳出該市對應的區縣

邏輯思路：

1.獲取select 1 選擇時切換對應的value，用onchange事件

2.經過value，去字典中取到對應的區縣

3.在select中新增option 把每一個區縣的值，賦值給 option.innertext

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>06 select聯動示例</title>
</head>
<body>
<form action="">
    <select name="select1" id="s1">
        <option value="0">--請選擇--</option>
        <option value="1">廈門</option>
        <option value="2">北京</option>
    </select>
    <select name="select2" id="s2"></select>
</form>
<script>
    data = {1:["思明區","集美區","湖裏區"],2:["朝陽區","海淀區","昌平區"]};
    var s1Ele = document.getElementById("s1");
    s1Ele.onchange=function () {
        console.log(this.value);//每次一切換選擇onchange就會捕捉到當前選擇的value
        var areas = data[this.value]; //經過value獲取當前市全部的區
        var s2Ele = document.getElementById("s2");
        s2Ele.innerHTML=""; //每次選擇完要清空s2，否則s2的值會一直累加
        // s2Ele.removeChild();
        for (var i=0;i<areas.length;i++){
            var opEle = document.createElement("option");
            opEle.innerText=areas[i];
            s2Ele.appendChild(opEle);
        }

    }

</script>
</body>
</html>

select聯動示例

4、菜單欄隱藏

功能：左側的菜單欄，鼠標點擊對應的菜單欄，則該菜單顯示，其餘菜單隱藏

邏輯思路：

1.新增類 hide {display:none;}

2.用jQuery的click事件，經過選擇器選到想隱藏的菜單，addClass("hide") 再經過選擇器把當前 $(this)的元素顯示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>左菜單欄隱藏</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        ul {
            list-style-type: none;
        }
        a {
            text-decoration: none;
        }

        .left-menu {
            width: 15%;
            height: 500px;
            background: #DDDDDD;
            /*display: inline;*/
        }
        .hide {
            display: none;
        }
        .menu-title {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="left-menu">
    <div class="menu-title">菜單欄一</div>
    <div class="menu-items">
        <ul>
            <li><a href="">菜單1</a></li>
            <li><a href="">菜單2</a></li>
            <li><a href="">菜單3</a></li>
        </ul>
    </div>


    <div class="menu-title">菜單欄二</div>
    <div class="menu-items">
        <ul>
            <li><a href="">菜單1</a></li>
            <li><a href="">菜單2</a></li>
            <li><a href="">菜單3</a></li>
        </ul>
    </div>


    <div class="menu-title">菜單欄三</div>
    <div class="menu-items">
        <ul>
            <li><a href="">菜單1</a></li>
            <li><a href="">菜單2</a></li>
            <li><a href="">菜單3</a></li>
        </ul>
    </div>

</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 需求分析
    // 找到全部的.menu-title標籤,綁定點擊事件
        $(".menu-title").click(function () {
               // 點擊事件具體要作的事兒
        // 1. 找到當前點擊菜單下面的.menu-items,把它顯示出來(移除hide類)
//            $(this).next().removeClass("hide");
            $(this).next().toggleClass("hide");
            // 2. 把其餘的.menu-items隱藏,添加hide類
            $(this).next().siblings(".menu-items").addClass("hide");
        })


//    $(".menu-title").click(function () {
//        // 1. 找到全部的.menu-items, 隱藏
//        var $currMenuitem = $(this).next();
//        $(".menu-items").not($currMenuitem).addClass("hide");  // 全部的二級菜單都是隱藏的
//        // 2. 找到當前點擊菜單下面的.menu-items,把它顯示出來(移除hide類)
//        $(this).next().toggleClass("hide");
//    })
</script>
</body>
</html>

菜單欄隱藏

（相似的還有click時間的，關燈示例。點一下添加hide類，再點一下取消hide類，用toggleClass）

5、返回頂部示例

功能：右下角設置按鈕，返回頂部。當瀏覽器向下滾動必定距離的時候，出現返回頂部按鈕

邏輯思路：看代碼啦

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04返回頂部示例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .c2 {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        .c3 {
            height: 80px;
        }
        .hide {
            display: none;
        }
        #b2 {
            width: 84px;
            /*height: 60px;*/
            border: solid 2px blue;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
<button id="b1">點我</button>
<div class="c2">我是有背景的div</div>
<div class="c3">我是div1</div>
<div class="c3">我是div2</div>
<div class="c3">我是div3</div>
<div class="c3">我是div4</div>
<div class="c3">我是div5</div>
<div class="c3">我是div6</div>
<div class="c3">我是div7</div>
<div class="c3">我是div8</div>
<div class="c3">我是div9</div>
<div class="c3">我是div10</div>
<div class="c3">我是div11</div>
<div class="c3">我是div12</div>
<div class="c3">我是div13</div>
<div class="c3">我是div14</div>
<div class="c3">我是div15</div>
<div class="c3">我是div16</div>
<div class="c3">我是div17</div>
<div class="c3">我是div18</div>
<div class="c3">我是div19</div>
<div class="c3">我是div20</div>
<div class="c3">我是div21</div>
<div class="c3">我是div22</div>
<div class="c3">我是div23</div>
<div class="c3">我是div24</div>
<div class="c3">我是div25</div>
<div class="c3">我是div26</div>
<div class="c3">我是div27</div>
<div class="c3">我是div28</div>
<div class="c3">我是div29</div>
<div class="c3">我是div30</div>
<button id="b2" class="hide">返回頂部</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
    $("#b1").click(function () {
        $(".c2").offset({top:200,left:200});
    })

    $(window).scroll(function () {
        if ($(window).scrollTop()>100){
            $("#b2").removeClass("hide")
        }else {
            $("#b2").addClass("hide")
        }
    })
    $("#b2").click(function () {
        $(window).scrollTop(0);
    })
</script>
</body>
</html>

返回頂部

6、判斷input中的text框是否爲空，爲空給提示，並不作操做

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02登陸校驗完整版</title>
</head>
<body>
<form action="">
    <p>
        <label>用戶名：
            <input type="text" name="username" class="notnull">
        </label>
    </p>
    <p>
        <label>密碼：
            <input id="i1" type="password" name="password" class="notnull">
        </label>
    </p>
    <input type="submit" id="sub" value="提交">
    <input type="reset" id="b1" value="重置">
</form>
<script src="../jquery-3.2.1.min.js"></script>
<script>
    /*總體思路
    給提交按鈕綁定單擊事件，判斷用戶和密碼框是否爲空，爲空則提醒，並不提交，
        1.找到須要判斷的文本框  class="notnull"
        2.對找到全部的元素進行遍歷，判斷 .val().trim() 是否爲空
        3.若是爲空，新增一個span標籤，提醒 label名對應的文本框名字不能爲空，並一旦發現一個爲空就返回false
        4.不爲空則返回true
    */
    $("#sub").on("click", function () {
        var flag = true;            //要把flag設置在這裏，這樣click的時候才能重置flag
        $("label span").text("");  //保證span的text不會重複添加
        var $notnull = $(".notnull");
        for (var i = 0; i < $notnull.length; i++) {
            var $item = $($notnull[i]);
            if ($item.val().trim().length === 0) {
                var spanEle = document.createElement("span");
                var labelName = $item.parent().text().trim().slice(0, 2);
                $(spanEle).css({"color":"red","font-size":"12px"});
                $(spanEle).text("*"+labelName + "不能爲空");
                $(spanEle).insertAfter($item);
                flag = false;
                // return flag;  //找到一處就返回
            }
        }return flag;  //所有找到再返回
        return flag
    })
</script>
</body>
</html>

判斷是否爲空

7、表格反選

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>做業需求分析</title>
</head>
<body>

<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>職位</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>小東北</td>
        <td>二人轉演員</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>喬小強</td>
        <td>xx演員</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>韓涉</td>
        <td>導演</td>
    </tr>
    </tbody>
</table>

<input type="button" id="b1" value="全選">
<input type="button" id="b2" value="反選">
<input type="button" id="b3" value="取消">

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 點擊全選,表格中全部的checkbox都選中
    // 1. 找checkbox
    // 2. 所有選中  --> prop("checked", true);
    $("#b1").click(function () {
        $(":checkbox").prop("checked", true);
    });

    // 點擊取消
    // 1. 找checkbox
    // 2. 所有取消選中  --> prop("checked", false);
   $("#b3").click(function () {
        $(":checkbox").prop("checked", false);
    });

    // 反選
    // 1. 找到全部的checkbox
    // 2. 判斷
    // 2.1 原來沒選中的,要選中
    // 2.2 原來選中的,要取消選中
       $("#b2").click(function () {
           // 找到全部的checkbox,把它們保存在一個名叫 $checkboxEles 的變量中,方便後面使用
           var $checkboxEles = $(":checkbox");
           // 遍歷全部的checkbox,根據每個checkbox的狀態作不一樣的操做
           for (var i=0;i<$checkboxEles.length;i++){
               // 把每個checkbox包成jQuery對象
               var $tmp = $($checkboxEles[i]);
               // 若是 checkbox是選中的
               if ($tmp.prop("checked")){
                   // 取消選中
                   $tmp.prop("checked", false);
               }else {
                   // 不然就選中
                   $tmp.prop("checked", true);
               }
           }
    });

</script>
</body>
</html>