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

<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)
            }
        })
      }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,040评论 3 119
  • 说说断奶这件事吧…… 其实我一直不想说断奶,熟悉我的人都知道,有N年母乳喂养经验的我理解,断这个字眼是被动的强迫式...
    我爱滴国诺佐阅读 1,794评论 0 0
  • Content Hugging Priority:该优先级表示一个控件抗被拉伸的优先级。优先级越高,越不容易被拉伸...
    梦想不是遥不可及的阅读 4,719评论 0 1
  • 临近春节,市服务业发展局根据党风廉政建设工作安排,加强党风廉政教育警示,增强了全体干部职工“文明过节、廉洁过...
    Fateman阅读 910评论 0 0
  • A男出身一般,头一次坐春秋航空没赶上,后来又一次坐春秋航空又他当时有限的能力解救了个晚到半分钟却被拒绝登记的黑人。...
    Annanchen阅读 1,313评论 0 0