JS小案例分析

時間 2019-11-18

原文原文鏈接

a、微博輸入刪除小案例css

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }

        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul {
            width: 450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
        }

        input {
            float: right;
        }
    </style>
</head>
<body>
<div class="box" id="weibo">
    <span>微博發佈</span>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button id="btn">發佈</button>
    <ul id="ul">

    </ul>
</div>
<script src="common.js"></script>
<script>
    var ul = $$("ul");
    var btn = $$("btn");
    var txt = $$("txt");
    btn.onclick = function () {
        if (txt.value.length == 0) {
            alert("請輸入內容");
            return;
        }
        var li = document.createElement("li");
        li.innerHTML = txt.value;
        var lis = ul.children;
        if (lis.length == 0) {
            ul.appendChild(li);
        } else {
            ul.insertBefore(li, lis[0]);
        }
        var input = document.createElement("input");
        input.type = "button";
        input.value = "刪除";
        li.appendChild(input);
        input.onclick = function () {
            this.parentNode.parentNode.removeChild(this.parentNode);
        }
    }

</script>


解題思路：

1. 先得到要操做的對象，文本域，發佈按鈕,ul
2. 給發佈按鈕註冊單擊事件
3. 點擊發布按鈕的時候，判斷用戶輸入的內容是否爲空，也就是判斷文本域內容是否爲空，爲空則return，再也不往下執行。
4. 動態的建立元素li,而後追加到ul中
5. 將用戶輸入的內容作爲li的文本
6. 動態的建立刪除按鈕(input)，並添加對應的屬性(type=button,value='刪除')並追加到li中
7. 判斷ul中是否有子元素，若是有則將建立的新的li往前插入(insertBefore)，若是是第一個li則是給ul追加(appendChild)
8. 給建立的input(刪除按鈕)註冊單擊事件，當點擊刪除按鈕的時候，從ul中刪除對應的lihtml

b、模擬百度輸入框小案例：數組

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 400px;
            margin: 200px auto;
            /*border: 1px solid #000;*/
        }

        #txtSearch {
            width: 300px;
        }

        #pop {
            width: 300px;
            border: 1px solid red;
            padding: 0px;
        }

        #pop ul {
            list-style-type: none;
            margin: 5px;
            padding: 0px;
        }

        #pop ul li {

        }
    </style>
</head>
<body>
<div id="box">
    <input type="text" value="" id="txtSearch"/>
    <input type="button" value="搜索" id="btnSearch"/>

</div>
<script src="common.js"></script>
<script>
    var array = ["a", "abc", "aaa", "aabbcc", "aaaaaaa", "abedoefjldkf", "bbddcc", "aa", "aaeeccss"];
    var txt = document.getElementById("txtSearch");
    var btn = document.getElementById("btnSearch");
    var box = document.getElementById("box");
//    txt.onkeyup = function () {
//        var v = txt.value;
//        var filterArr = [];
//        for (var i = 0; i < array.length; i++) {
//            if (array[i].indexOf(v) == 0) {
//                filterArr.push(array[i]);
//            }
//        }
//        var divPop = document.getElementById("pop");
//        if (divPop) {
//            box.removeChild(divPop);
//        }
//        if (filterArr.length == 0) {
//            return;
//        }
//        if (v.length == 0) {//用戶輸入數據爲空的時候，再也不往下執行代碼。
//            return;
//        }
//        var divPop = document.createElement("div");
//        divPop.id = "pop";
//        box.appendChild(divPop);
//        var ul = document.createElement("ul");
//        divPop.appendChild(ul);
//        for (var j = 0; j < filterArr.length; j++) {
//            var li = document.createElement("li");
//            ul.appendChild(li);
//            li.innerHTML = filterArr[j];
//        }
//
//    }
txt.onkeyup= function () {
    var v=txt.value;
    var arr=[];
    for(var i=0;i<array.length;i++){
        if(array[i].indexOf(v)==0){
            arr.push(array[i]);
        }
    }
    var divPop=document.getElementById("pop");
    if(divPop){
        box.removeChild(divPop);//刪除建立div的樣式
    }
    if(arr.length==0){
        return;
    }
    if(v.length==0){//若是用戶不輸入內容，再也不執行下面代碼；
        return;
    }
    var divPop=document.createElement("div");
    divPop.id="pop";
    box.appendChild(divPop);
    var ul=document.createElement("ul");
    divPop.appendChild(ul);
    for(var j=0;j<arr.length;j++){
        var li=document.createElement("li");
        ul.appendChild(li);
        li.innerHTML=arr[j];
    }

}
</script>
解題思路：

1. 當鍵盤按下並擡起的時候觸發事件
2. 根據用戶輸入的內容去數組當中查找以用戶輸入的內容開頭的數據
3. 將遍歷到的以用戶輸入的內容爲開頭的數據放到一個新的數組當中
4. 動態建立元素div,ul等，而後追加，並設置樣式
5. 循環遍歷新數組，根據新數組中的元素個數，建立li,並追加到ul中
6. 根據新輸入的數據在生成Div以前，看是否可以經過ID得到div,若是有的話，則在建立新元素以前刪除以前的div
7. 若是數組元素爲空的話，加return關鍵字，再也不往下執行代碼
8. 若是文本框的輸入爲空的話，加return關鍵字,也再也不往下執行代碼app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。