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

2018-06-08  本文已影响0人  zy懒人漫游

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

::-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)
            }
        })
      }
    }
上一篇下一篇

猜你喜欢

热点阅读