美文网首页
实现websocket聊天室之聊天窗口的几个坑

实现websocket聊天室之聊天窗口的几个坑

作者: zy懒人漫游 | 来源:发表于2018-06-08 04:31 被阅读0次

    1.如何实现聊天窗口没有滚动条

    • css+js 实现
    ::-webkit-scrollbar {  /*实现滚动条隐藏*/
                width: 0px;
            }
    /*  IE兼容
        HTML {  
          scrollbar-base-color: #fff;  
          scrollbar-base-color: #fff;  
          scrollbar-3dlight-color: #fff;  
          scrollbar-highlight-color: #fff;  
          scrollbar-track-color: #fff;  
          scrollbar-arrow-color: #fff;  
          scrollbar-shadow-color: #fff;  
          scrollbar-dark-shadow-color: #fff;  
        } 
        */    
    
    let body = document.querySelector('body')
    body.scrollTop = body.scrollHeight;
    

    2.一行代码实现年月日星期

    <div id="timer"></div> 
    <script>    
        setInterval("timer.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);     
    </script> 
    

    3.消息发送之后,输入框立即清空内容
    如果输入框为空,弹出提示

    document.querySelector('footer button').onclick = (e) => {
          if (input.value === '' || input.value === null) {
            alert('请输入内容')
            input.focus()
            return false
          }
          input.value = ''
          input.focus()
        }
    

    4.监听回车按钮

    document.onkeydown = function (e) {
          var theEvent = window.event || e;
          var code = theEvent.keyCode || theEvent.which;
          if (code == 13) {
            document.querySelector('footer button').onclick()
            input.focus()
          }
        }
    

    5.实现桌面通知

    let showMsg = msg =>{
          if(Notification.permission === 'granted'){
            let notification = new Notification(msg)
            console.log(notification);
            
          }else if(Notification.permission !== 'denied'){
            Notification.requestPermission(permission=>{
                if(permission === 'granted'){
                  let notification = new Notification(msg)
                }
            })
          }
        }
    

    相关文章

      网友评论

          本文标题:实现websocket聊天室之聊天窗口的几个坑

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