localstorage小试牛刀之todoList多页面聊天窗口

作者: 鹤仔z | 来源:发表于2019-11-30 20:43 被阅读0次

此案例由数据驱动页面的渲染，用最简单有效的逻辑实现多窗口显示记录，建议初学者仔细阅读

css部分：

        #wrapper{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            position: relative;
        }
        #msgWindow{
            width: 400px;
            height: 300px;
            border: 1px solid #ddd;
            overflow: auto;
        }
        #msg{
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        #send{
            width: 60px;
            height: 30px;
        }

html部分：

<body>
    <div id="wrapper">
        <button class="select">世界</button>
        <button class="select">附近</button>
        <button class="select">公会</button>
        <button class="select">私聊</button>
        <ul id="msgWindow"></ul>
        <input type="text" id="msg">
        <button id="send">发送</button>
    </div>
</body>

javaScript部分：

        // 数据驱动

        "use strict"


        let data = localStorage.data ? JSON.parse(localStorage.data) : {
            "世界":[],
            "附近":[],
            "公会":[],
            "私聊":[]
        };
        let msgWindow,msg,send,selects,wrapper;
        let now = "世界";

        init();

        function init(){
            wrapper = document.getElementById("wrapper");
            msgWindow = document.getElementById("msgWindow");
            msg    = document.getElementById("msg");
            send   = document.getElementById("send");
            selects = [].slice.call(document.getElementsByClassName("select"));
            bindEvent();
            renderWindow();
        }

        function bindEvent(){
            send.addEventListener("click",()=>updateData())
            document.addEventListener("keydown",(e)=>{
                e.keyCode !== 13 ? "" : updateData();
            })

            // 绑定选择聊天窗口事件
            for(let i = 0 ; i < selects.length ; i ++){
                // 给按钮加index
                selects[i].index = i;
                selects[i].addEventListener("click",e=>selectHandler(e))
            }
        }

        function selectHandler(e){
            // 根据index改变now的状态
            switch(e.target.index){
                case 0 : now = "世界";break;
                case 1 : now = "附近";break;
                case 2 : now = "公会";break;
                case 3 : now = "私聊";break;
            }
            renderWindow();
        }

        // 更新data数据
        function updateData(){
            switch(now){
                case "世界":{
                    data["世界"].push(msg.value);
                };break;
                case "附近":{
                    data["附近"].push(msg.value);
                };break;
                case "公会":{
                    data["公会"].push(msg.value);
                };break;
                case "私聊":{
                    data["私聊"].push(msg.value);
                };break;
            }
            msg.value = "";
            localStorage.data = JSON.stringify(data);
            // 渲染聊天窗口
            renderWindow();
            msgWindow.scrollTop = msgWindow.scrollHeight;
        }

        function clearWindow(){
            let _length = msgWindow.children.length;
            for(let i = 0 ; i < _length ; i ++){
                // 删
                msgWindow.children[0].remove();
            }
        }

        // 渲染聊天窗口
        function renderWindow(){
            // 清空聊天窗口
            clearWindow();
            console.log(data[now]);
            data[now].forEach(element => {
                let li = document.createElement("li");
                li.textContent = element;
                msgWindow.appendChild(li);
            });
        }

网友评论

本文标题：localstorage小试牛刀之todoList多页面聊天窗口

本文链接：https://www.haomeiwen.com/subject/ahkawctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

localstorage小试牛刀之todoList多页面聊天窗口

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读