<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style>
/* 大框框 */
#box{
width: 300px;
height: 300px;
margin:0 auto;
position: relative;
}
/* 聊天界面 */
#a{
width:300px;
height:250px;
border:2px solid blue;
}
/* 下面装输入框和按钮的框 */
#b{
width: 300px;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
}
/* 文字输入框 */
#inp{
width: 250px;
height: 20px;
background: white;
float: left;
}
/* 按钮 */
#btn{
width: 45px;
height: 25px;
background:#00FFD1;
float: right;
border:1px solid #00FFD1
}
#a p{
margin: 10px 0;
float: right;
color:red;
}
#a span{
display: block;
margin: 10px 0;
float: left;
}
</style>
</head>
<body>
<div id="box">
<div id="a"></div><br><br>
<div id="b">
<input type="text" name="" id="inp" value="" />
<button id="btn">发送</button>
</div>
</div>
</body>
<script type="text/javascript">
(function(){
var w;
start();
function start(){
//判断浏览器兼容
if(typeof(Worker) === 'undefined'){
alert('浏览器不支持web worker机制');
return false;
}
$(function(){
$('#btn').click(function(){
//判断是否为空
if(inp.value==''||w.postMessage($('#inp').val())){
alert('不能为空哦');
inp.style.borderColor="red";
inp.focus();
return false;
}else{
var value1= $('#inp').val();
$('#a').append('<p>'+ value1+' '+':我</p></br>');
$('#inp').val("").focus();
w.onmessage = function(e){
$('#a').append('<span>'+e.data +'</span></br>');
};
};
});
});
//创建worker,只有在确认当前不存在这个线程的时候采取创建
if(typeof(w) == 'undefined'){
w = new Worker('worker2.js');
return false;
w.onmessage = function(e){
$('#a').append('<span>'+e.data +'</span></br>');
}
}
}
})();
</script>
</html>
注：
要重新新建一个worker.js 然后把后面这一段拷贝到worker.js里面--> self.addEventListener('message',function(e){self.postMessage('线程收到,他说的是:' + e.data);})
