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

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.一行代码实现年月日星期

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聊天室之聊天窗口的几个坑)