IFE第二十八天到第三十天：給愛的人發個郵件吧（郵箱輸入下拉框提示功能）

阿新 • • 發佈：2019-01-10

task1

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
    <style>
        .email-sug {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            width: 150px;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
        }

        li:hover {
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input id="email-input" type="text">
        <ul id="email-sug-wrapper" class="email-sug"></ul>
    </div>

    <script>
        var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
        var input = document.getElementById("email-input");
        var ul = document.getElementById("email-sug-wrapper");

        input.oninput = function () {
            getInput();
            addPrompt();
            displayOrHide();
        };

        ul.onclick = function (e) {
            var ev = e || window.event;　　　　
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toUpperCase() == 'LI') {
                input.value = target.innerText;
                hide();
            }
        }

        function getInput() {
            //拿到input輸入框的輸入內容trim後返回
            var input1 = input.value;
            return input1.trim();
        }

        //生成提示框中的提示內容
        function setPrompt() {
            var input1 = getInput();
            var input2, input3;
            var flag = 0; //“@”後的字串能否在postfixList中找到匹配
            if (input1.indexOf("@") == -1) {
                input2 = input1;
            } else {
                input2 = input1.slice(0, input1.indexOf("@"));
                input3 = input1.slice(input1.indexOf("@") + 1);
                console.log(input3)
            }
            var res = new Array();
            for (var i = 0; i < postfixList.length; i++) {
                if (postfixList[i].indexOf(input3) == 0) {
                    res[i] = input2 + '@' + postfixList[i];
                    flag = 1;
                    console.log(res)
                }
            }
            if (flag == 0) {
                for (var i = 0; i < postfixList.length; i++) {
                    res[i] = input2 + '@' + postfixList[i];
                }
            }
            //去除res陣列中的空值
            for (var i = 0; i < res.length; i++) {
                if (typeof res[i] == "undefined" || res[i] == "") {
                    res.splice(i, 1);
                    i--;
                }
            }
            return res;
        }

        function addPrompt() {
            var prompt = setPrompt();
            var len = ul.childNodes.length;
            //removechild()正常的刪除全部節點，應該從後面往前刪除。
            //原因是當你把索引為0的子節點刪除後，那麼原來索引為1節點此時它的索引變成0了，而這時變數i已經變成1了，程式繼續走時就會刪除原先索引為２的現在為1的節點，這樣程式執行的結果就是隻刪除了一半的子節點。
            for (var i = len - 1; i >= 0; i--) {
                ul.removeChild(ul.childNodes[i]);
            }
            for (var i = 0; i < prompt.length; i++) {
                var li = document.createElement('li');
                li.innerHTML = prompt[i];
                ul.appendChild(li);
            }
        }

        function displayOrHide() {
            var input1 = getInput();
            if (input1 == "") {
                hide();
            } else {
                display();
            }
        }

        function hide() {
            ul.style.display = "none";
        }

        function display() {
            ul.style.display = "block";
        }
    </script>
</body>

</html>

task2（加上鍵盤——基於DOM的思路）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
    <style>
        .email-sug {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            width: 150px;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
        }

        li:hover {
            background-color: antiquewhite;
        }

        .selected {
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input id="email-input" type="text">
        <ul id="email-sug-wrapper" class="email-sug"></ul>
    </div>

    <script>
        var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
        var input = document.getElementById("email-input");
        var ul = document.getElementById("email-sug-wrapper");

        var selected = 0;
        var selectedLi = null;

        input.onkeyup = function (event) {
            var event = event || window.event;
            addPrompt();
            displayOrHide();
            if (event.keyCode != 13 && event.keyCode != 108 && event.keyCode != 38 && event.keyCode != 40) {
                resetState();
            }
            var list = ul.querySelectorAll('li');
            if (selectedLi == null) {
                selectedLi = ul.querySelector('li:first-child');
                selectedLi.classList.add('selected');
            }
            for (var i = 0; i < list.length; i++) {
                if (list[i].getAttribute("class") == 'selected') {　
                    selected = i;　
                    selectedLi = list[i];
                }
            }
            // 按的是上鍵
            if (event.keyCode == 38) {
                // 找到的Li不是第一個
                selectedLi.classList.remove('selected');
                if (selected != 0) {
                    // 將它的前一個Li設為選中
                    selectedLi = list[--selected];
                    selectedLi.classList.add('selected');
                } else {
                    // 將最後一個Li設為選中
                    selectedLi = list[list.length - 1];
                    selectedLi.classList.add('selected');
                    selected = list.length - 1;
                }
            }
            // 按的是下鍵
            if (event.keyCode == 40) {
                selectedLi.classList.remove('selected');
                // 找到的Li不是最後一個
                if (selected != list.length - 1) {
                    // 將它的下一個Li設為選中
                    selectedLi = list[++selected];
                    selectedLi.classList.add('selected');
                } else {
                    // 將第一個Li設為選中
                    selectedLi = list[0];
                    selectedLi.classList.add('selected');
                    selected = 0;
                }
            }
            // 按的是回車
            if (event.keyCode === 13) {
                // 將找到的Li的HTML內容解碼後填到input中
                // 隱藏提示框
                input.value = selectedLi.textContent;
                hide();
            }
        };

        ul.onclick = function (e) {
            var ev = e || window.event;　　　　
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toUpperCase() == 'LI') {
                input.value = target.innerText;
                hide();
            }
        }

        function resetState() {
            var firstLi = ul.querySelector('li:first-child');
            var selectedLi = ul.querySelector('li.selected');
            if (selectedLi != null) {
                if (firstLi != selectedLi) {
                    selectedLi.classList.remove('selected');
                    firstLi.classList.add('selected');
                }
            } else {
                firstLi.classList.add('selected');
            }
        }

        function getInput() {
            //拿到input輸入框的輸入內容trim後返回
            var input1 = input.value;
            return input1.trim();
        }

        //生成提示框中的提示內容
        function setPrompt() {
            var input1 = getInput();
            var input2, input3;
            var flag = 0; //“@”後的字串能否在postfixList中找到匹配
            if (input1.indexOf("@") == -1) {
                input2 = input1;
            } else {
                input2 = input1.slice(0, input1.indexOf("@"));
                input3 = input1.slice(input1.indexOf("@") + 1);
            }
            var res = new Array();
            for (var i = 0; i < postfixList.length; i++) {
                if (postfixList[i].indexOf(input3) == 0) {
                    res[i] = document.createElement('li');
                    res[i].innerText = input2 + '@' + postfixList[i];
                    flag = 1;
                }
            }
            if (flag == 0) {
                for (var i = 0; i < postfixList.length; i++) {
                    res[i] = document.createElement('li');
                    res[i].innerText = input2 + '@' + postfixList[i];
                }
            }
            //去除res陣列中的空值
            for (var i = 0; i < res.length; i++) {
                if (typeof res[i] == "undefined" || res[i].innerText == "") {
                    res.splice(i, 1);
                    i--;
                }
            }
            return res;
        }

        function addPrompt() {
            var prompt = setPrompt();
            var len = ul.childNodes.length;
            //removechild()正常的刪除全部節點，應該從後面往前刪除。
            //原因是當你把索引為0的子節點刪除後，那麼原來索引為1節點此時它的索引變成0了，而這時變數i已經變成1了，程式繼續走時就會刪除原先索引為２的現在為1的節點，這樣程式執行的結果就是隻刪除了一半的子節點。
            for (var i = len - 1; i >= 0; i--) {
                ul.removeChild(ul.childNodes[i]);
            }
            for (var i = 0; i < prompt.length; i++) {
                ul.appendChild(prompt[i]);
            }
        }

        function displayOrHide() {
            var input1 = getInput();
            if (input1 == "") {
                hide();
            } else {
                display();
            }
        }

        function hide() {
            ul.style.display = "none";
        }

        function display() {
            ul.style.display = "block";
        }
    </script>
</body>

</html>

task3（加上鍵盤——基於資料的思路）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
    <style>
        .email-sug {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            width: 150px;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
        }

        li:hover {
            background-color: antiquewhite;
        }

        .selected {
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input id="email-input" type="text">
        <ul id="email-sug-wrapper" class="email-sug"></ul>
    </div>

    <script>
        // 增加一個變數，用於儲存當前選中的提示Li的序號
        var nowSelectTipIndex = 0;
        var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
        var input = document.getElementById("email-input");
        var ul = document.getElementById("email-sug-wrapper");

        input.addEventListener("keyup", function (event) {
            var event = event || window.event;　
            //如果按鍵不是上下及回車重置選中狀態
            if (event.keyCode != 13 && event.keyCode != 108 && event.keyCode != 38 && event.keyCode != 40) {
                resetIndex();
            }
            if (event.keyCode == 38) {
                if (nowSelectTipIndex == 0) {
                    nowSelectTipIndex = ul.childNodes.length - 1;
                } else {
                    nowSelectTipIndex--;
                }
            }
            if (event.keyCode == 40) {
                if (nowSelectTipIndex >= ul.childNodes.length - 1) {
                    nowSelectTipIndex = 0;
                } else {
                    nowSelectTipIndex++;
                }
            }
            addPrompt();
            displayOrHide();
            if (event.keyCode == 13 || event.keyCode == 108) {
                // 從當前提示框中選第 nowSelectTipIndex 個Li，將其HTML內容解碼後填到input中
                input.value = ul.childNodes[nowSelectTipIndex].innerText;
                hide();
            }
        });

        ul.onclick = function (e) {
            var ev = e || window.event;　　　　
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toUpperCase() == 'LI') {
                input.value = target.innerText;
                hide();
            }
        }

        function resetIndex() {
            nowSelectTipIndex = 0;
        }

        function getInput() {
            //拿到input輸入框的輸入內容trim後返回
            var input1 = input.value;
            return input1.trim();
        }

        //生成提示框中的提示內容
        function setPrompt() {
            var input1 = getInput();
            var input2, input3;
            var flag = 0; //“@”後的字串能否在postfixList中找到匹配
            if (input1.indexOf("@") == -1) {
                input2 = input1;
            } else {
                input2 = input1.slice(0, input1.indexOf("@"));
                input3 = input1.slice(input1.indexOf("@") + 1);
            }
            var res = new Array();
            for (var i = 0; i < postfixList.length; i++) {
                if (postfixList[i].indexOf(input3) == 0) {
                    res[i] = document.createElement('li');
                    res[i].innerText = input2 + '@' + postfixList[i];
                    flag = 1;
                }
            }
            if (flag == 0) {
                for (var i = 0; i < postfixList.length; i++) {
                    res[i] = document.createElement('li');
                    res[i].innerText = input2 + '@' + postfixList[i];
                }
            }
            //去除res陣列中的空值
            for (var i = 0; i < res.length; i++) {
                if (typeof res[i] == "undefined" || res[i].innerText == "") {
                    res.splice(i, 1);
                    i--;
                }
            }
            //將第nowSelectTipIndex個Li的樣式設定為被選樣式
            res[nowSelectTipIndex].className = 'selected';
            console.log(res);
            console.log(nowSelectTipIndex);
            return res;
        }

        function addPrompt() {
            var prompt = setPrompt();
            var len = ul.childNodes.length;
            //removechild()正常的刪除全部節點，應該從後面往前刪除。
            //原因是當你把索引為0的子節點刪除後，那麼原來索引為1節點此時它的索引變成0了，而這時變數i已經變成1了，程式繼續走時就會刪除原先索引為２的現在為1的節點，這樣程式執行的結果就是隻刪除了一半的子節點。
            for (var i = len - 1; i >= 0; i--) {
                ul.removeChild(ul.childNodes[i]);
            }
            for (var i = 0; i < prompt.length; i++) {
                ul.appendChild(prompt[i]);
            }
        }

        function displayOrHide() {
            var input1 = getInput();
            if (input1 == "") {
                hide();
            } else {
                display();
            }
        }

        function hide() {
            ul.style.display = "none";
        }

        function display() {
            ul.style.display = "block";
        }
    </script>
</body>

</html>

IFE第二十八天到第三十天：給愛的人發個郵件吧（郵箱輸入下拉框提示功能）

task1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE ECMAScript</title>

百度前端技術學院：第三十一到第三十三天：我是精明的小賣家（一）

var regionGroup = document.getElementById("region-radio-wrapper"); var productGroup = document.getElementById("product-radio-wrapper");

走入計算機的第三十八天（python的進程和協成））

三十八控制流需要數據 spa 下一步微線程用法適合一、進程　　1、multiprocessing模塊實現多進程並發。　　　　1.1multiprocessing包是Python中的多進程管理包，與threading.Thread類似，它可以利用multip

第三十八天

目標自身 :after 三十八 oat 問題打開順序固定高度文檔流 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文檔流&

第三十八天 GIL 程序池與執行緒池

今日內容: 1.GIL 全域性直譯器鎖 2.Cpython直譯器併發效率驗證 3.執行緒互斥鎖和GIL對比 4.程序池與執行緒池一.全域性直譯器鎖　　1.GIL:全域性直譯器鎖　　　　GIL本質就是一把互斥鎖,是夾在直譯器身上的　　　　統一程序內的所有執行緒都需要先搶到GIL鎖,才能執

孤荷凌寒自學python第三十八天初識python的執行緒控制

孤荷凌寒自學python第三十八天初識python的執行緒控制（完整學習過程螢幕記錄視訊地址在文末，手寫筆記在文末）一、執行緒在作業系統中存在著很多的可執行的應用程式，每個應用程式啟動後，就可以看著是一個程序，當開啟WINDOWS工作管理員時，在工作管理員的程序選

跟燕十八學習PHP-第三十天-MySQL字元亂碼解決

/** 燕十八公益PHP培訓課堂地址:YY頻道88354001 學習社群:www.zixue.it **/ 編碼問題: 計算機裡,只有010101 而人的世界裡,有文字,有圖片,有聲音.... 01 ---> 文字對應起來人為的約定 65->A

java學習之路——第三十八天

1.jQuery完成下拉列表：以每一個匹配的元素作為上下文來執行一個函式。

走入計算機的第三十一天（多態和綁定方法）

等等 exec 可擴展性一個 view 消息 bstr func click 一多態和多態性 1 什麽是多態：多態就是一種失誤的多種形態。（例如：水有冰的形態，還有水蒸氣的形態等等）一個抽象類有多個子類，因而多態的概念依賴於繼承。序列類型有多種形態：字符串，列表，元組

走入計算機的第三十四天（基於tcp和udp的套接字）

recv 設置內存 tcp list dup lis 不知道狀態一 TCP套接字 1 low版TCP套接字服務器端　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　客戶端　　　　　　2、改進版tcp套接字　　　　　　　　　　服務端　　　

愛創課堂每日一題第三十二天-談談浮動和清除浮動？

前端前端學習前端入門浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上。愛創課堂每日一題第三十二天-談談浮動和清除浮動？

愛創課堂每日一題第三十五天- 說說你對閉包的理解？

前端前端學習前端入門使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的汙染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。在js中，函數即閉包，只有函數才會產生作用域的概念閉包有三個特性：1.函數嵌套函數2.函數內部可以引用外部的參數和變量3.參數和變量不會

【社區問答第三十八期】編寫高質量C程序代碼

lds smi c89 use amp href dff c程序 dbf NOJ的一道題求助大神 Java爬蟲，信息抓取的實現 C++實現給多個變量傳值指針定義成全局和定義在main中為什麽不一樣？定義在main中執行中止 cqj慰膛哦http://p.baidu.co

馬哥教育第三十一天至三十四天學習總結

內核編譯、系統開機、系統進程管理、AWK馬哥M28三十一天、進程管理和啟動流程、 CentOS6及其之前的操作系統根進程是/sbin/init , centos5及其之前使用的安裝管理工具是SysV ,CentOS6是upstart , CentOS7是systemd 單用戶方式啟動：修改root密碼或者

【leetcode 簡單】第三十八題 Excel表列名稱

itl span title 給定取余正整數簡單 exc pre 給定一個正整數，返回它在 Excel 表中相對應的列名稱。例如， 1 -> A 2 -> B 3 -> C ... 26 -> Z

第三十天筆記

是否工作流 tcp協議 NPU 判斷 net 完成源地址組織 osi五層協議： 1.應用層包含（應用層、表示層、會話層）:http,ftp 應用層由來：用戶使用的都是應用程序，均工作於應用層，互聯網是開發的，大家都可以開發自己的應用程序，數據多種多樣，必須規定好數據的

python學習第三十一天函數的嵌套及函數的作用域

pri python zha 一個變量的作用域 ng2 oba nbsp 作用 python函數的嵌套是指在函數裏面嵌套另外一個函數，可以嵌套更多，函數一旦套用了另外一個函數，他的作用域就已經形成，可以通過global關鍵詞改變變量的作用域，下面詳細說明函數的嵌套及函數的

第三十七天

center ext hidden padding eight eat 文檔 ctype sub 　　<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit

第三十六天守護程序互斥鎖程序間通訊

一.昨日回顧 1. 程序相關概念　　併發看起來像是同時執行的中本質是不停切換執行多個程序隨機執行　　並行同一時刻多個程序同時進行只有多喝處理器才有真正的並行　　序列一個一個依次排隊執行　　阻塞遇到了I/O操作看起來就是程式碼卡住了　　非阻塞不會卡住程式碼的執行

2018.11.08python學習第三十六天

一：守護程序 # 守護程序：顧名思義，就是一個程序守護著另一個程序，指的是兩個程序之間的關係。 # 特點：就是守護程序在被守護程序死亡時，也會跟著被守護程序的死亡而死亡。使用方法： from multiprocessing import Process import time def task():

IFE第二十八天到第三十天：給愛的人發個郵件吧（郵箱輸入下拉框提示功能）

task1

task2（加上鍵盤——基於DOM的思路）

task3（加上鍵盤——基於資料的思路）

相關推薦