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)
}
})
}
}
网友评论