js郵箱（給愛的人發個郵件吧）

需求：
1、當用戶沒有任何輸入時，提示框消失
2、當用戶輸入字符後，顯示提示框，並且把用戶輸入的內容自動拼上郵箱後綴進行顯示
3、暫時不用考慮示意圖中的紅色和藍色背景色的邏輯
4、注意用戶輸入中前後空格需要去除

一、HTML部分

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

二、獲取元素

var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
        var ul = document.getElementById('email-sug-wrapper');
        var inp = document.querySelector('#email-input');

三、（嘗試用keyup, keypress, keydown以及oninput等觸發事件），oninput的觸發最爲有效

   inp.addEventListener('input', result);
        function result() {
        //測試觸發事件
            console.log('event handle');
            //
            addTips();
            dispTips();
        }

四、獲取input輸入內容方法

        function getContent() {
        	//注意去空格
            var content = inp.value.replace(/\s*/g, '');
            inp.value = content;
            return content;
        }

五、生成提示框中的提示內容的方法

 function tips() {         
            var content = getContent();
            var len = postfixList.length;
            var arr = [];
            //一旦輸入了‘@’符號（content.indexOf('@') != -1），則提示內容就不再變動
            if (content.indexOf('@') != -1) {
                var newContent = content.slice(0, content.indexOf('@'));           
                for (var i = 0; i < len; i++) {
                    var li = document.createElement('li');
                    li.innerHTML = newContent + '@' + postfixList[i];
                    arr.push(li.innerHTML);
                }
            }else{
                 for (var i = 0; i < len; i++) {
                    var li = document.createElement('li');
                    li.innerHTML = content + '@' + postfixList[i];
                    arr.push(li.innerHTML);
                }
            }
            return arr;
        }

六、把提示內容添加到ul下的方法

 function addTips() {
            var arr = tips();
            var len = arr.length;
            //先刪除已有的li元素
            if (ul.childNodes.length != 0) {
               for (var i = 0; i < len; i++) {
                    ul.removeChild(ul.childNodes[0]);
                }  
            }
            //再添加li元素
            for (var i = 0; i < len; i++) {
                var li = document.createElement('li');
                li.innerHTML = arr[i];
                ul.appendChild(li);
            }
        }

七、ul的顯示與否方法

   function dispTips() {
            if (inp.value == '') {
                hidden();
            }else {
                show();
            }
        }

八、顯示方法

        function show() {
            ul.style.display = 'block';
        }

九、隱藏方法

function hidden() {
            ul.style.display = 'none';   
        }

當然，後續的要求也很重要，但是我寫的真的是坨屎，還是不順手，也就自己能看的懂（摳鼻），不多說了，貼出來吧！

<!DOCTYPE html>
<html lang="cn-zh-hans">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </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 ul = document.getElementById('email-sug-wrapper');
        var inp = document.querySelector('#email-input');
        var nowSelectTipIndex = 0;

        
        //調用focu（），讓input獲取焦點
        document.onclick = focu; 
        window.onload = focu;
		//當輸入有變動時，調用這些方法
        inp.oninput = function(e) {
            reset(e);
            console.log('event handle');
            addTips();
            dispTips();
            getColor();
            mouseClick();
        }
        //當鍵盤有敲擊時，觸發一些事件
        inp.onkeydown = function(e) {
            var e = e || window.event;
            var li = document.querySelectorAll('li');
            //如果按下了esc鍵（27），觸發全選
            if (e.keyCode == 27) {
                inp.select();
            }
            //enter鍵（13），選中值填入input框，順便隱藏提示欄(ul&li)，其中nowSelectTipIndex是下標值
            if (e.keyCode == 13) {
                inp.value = li[nowSelectTipIndex].innerHTML;
                hidden();
            }
            //↑鍵（38），且li的length不少於2，用來選擇li元素
            if (e.keyCode == 38 && ul.childNodes.length >= 2) {
                li[nowSelectTipIndex].style = 'none';
                nowSelectTipIndex--; 
                if (nowSelectTipIndex == -1) {
                    nowSelectTipIndex = 4;
                }
                li[nowSelectTipIndex].style.backgroundColor = 'green';
            }
              //↓鍵（40），且li的length不少於2，用來選擇li元素
            if (e.keyCode == 40 && ul.childNodes.length >= 2) {
                li[nowSelectTipIndex].style = 'none';
                nowSelectTipIndex++;
                if (nowSelectTipIndex == 5) {
                    nowSelectTipIndex = 0;
                }
                li[nowSelectTipIndex].style.backgroundColor = 'green';
            }
        }
	//初始化 nowSelectTipIndex的方法
        function reset(e) {
            var e = e || window.event;
            if (e.keyCode !== 13 && e.keyCode !== 38 && e.keyCode !== 40) {
                resetOptions();
            }
        }
	//感覺很多餘的方法
        function resetOptions() {
            nowSelectTipIndex = 0;
        }
		//獲取input文本，去掉前後空格可以用trim（）方法
        function getContent() {
            var content = inp.value.replace(/\s*/g, '');
            inp.value = content;
            return content;
        }
		//input獲取焦點的方法
        function focu() {
            inp.focus();
        }
	//防火防盜防入侵的方法，還不是很理解這部分
        function xss() {
           var t = getContent();
           var temp = document.createElement('div');
           temp.textContent !== undefined ? temp.textContent = t : temp.innerText = t;
           var output = temp.innerHTML;
           temp = null;
           return output;
        }
	//創造li的方法
        function tips() {         
            var content = xss();
            var len = postfixList.length;
            var arr = [];
            var emp = [];
            if (content.indexOf('@') != -1) {
                var newContent = content.slice(0, content.indexOf('@'));
                var mate ='^' + content.slice(content.indexOf('@') + 1);
                var rege = new RegExp(mate);
                for (var i = 0; i < len; i++) {
                    var str = postfixList[i];
                    if (rege.test(str)) {
                        var li = document.createElement('li');
                        li.innerHTML = newContent + '@' + postfixList[i];
                        arr.push(li.innerHTML);
                    }else{
                        emp.push(str);
                        if (emp.length == 5) {
                            for (var i = 0; i < len; i++) {
                                var li = document.createElement('li');
                                li.innerHTML = newContent + '@' + postfixList[i];
                                arr.push(li.innerHTML);
                            }
                        }
                    }                
                }
            }else{
                 for (var i = 0; i < len; i++) {
                    var li = document.createElement('li');
                    li.innerHTML = content + '@' + postfixList[i];
                    arr.push(li.innerHTML);
                }
            }
            return arr;
        }

       
//添加li的方法
        function addTips() {
            var arr = tips();
            var len = arr.length;
            while (ul.firstChild) {
               ul.removeChild(ul.firstChild);
            }
            for (var i = 0; i < len; i++) {
                var li = document.createElement('li');
                li.innerHTML = arr[i];
                ul.appendChild(li);
            }
            ul.firstChild.style.backgroundColor = 'green';
        }
	//鼠標經過時的顏色變化
        function getColor() {
            var color = ['#00FFFF', '#7FFFD4', '#F5F5DC', '#8A2BE2', '#7FFF00'];
            for (var i = 0; i <  ul.childNodes.length; i++) {
                (function(n) {
                    ul.childNodes[i].onmouseover = function() {
                        this.style.backgroundColor = color[n];
                    };
                    ul.childNodes[i].onmouseout = function() {
                        this.style = 'none';
                    }  
                })(i);
            }
        }
//鼠標敲擊的事件
        function mouseClick() {
            ul.onclick = function(e) {
                var e = e || window.event;
                var tar = e.target || window.srcElement;
                if (tar.nodeName.toLowerCase() == 'li') {
                    inp.value = tar.innerHTML;
                    hidden();
                    focu();
                }
            }
        }
//提示內容的隱藏和顯示
        function dispTips() {
            if (inp.value == '') {
                hidden();
            }else {
                show();
            }
        }
//顯示方法
        function show() {
            ul.style.display = 'block';
        }
//隱藏方法
        function hidden() {
            ul.style.display = 'none';   
        }
    </script>
</body>
</html>

js郵箱（給愛的人發個郵件吧）

Python 潮流週刊#52：Python 處理 Excel 的資源

前端小計(數組轉爲對象)——第二十二天到第二十四天：JavaScript裏面的居民們

對象轉換數組

js郵箱（給愛的人發個郵件吧）

前端小計（setTimeout實現淡入淡出）——百度學院第二十到第二十一天：讓你和頁面對話

前端小計（setInterval實現淡入淡出2）——百度學院第二十到第二十一天：讓你和頁面對話

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

linux以太網驅動總結