html5线程嵌套-单线程嵌套

最新推荐文章于 2023-12-08 16:08:02 发布

清濛

最新推荐文章于 2023-12-08 16:08:02 发布

阅读量482

点赞数

分类专栏： Html5 文章标签： html5 线程

本文链接：https://blog.csdn.net/xyy_933/article/details/51437476

版权

Html5 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单线程嵌套</title>
<script>
var worker=new Worker("14-1.js");
worker.postMessage("");
//从线程中取得计算结果
worker.onmessage=function(event){
if(event.data!=""){
var h;//行号
var l;//列号
var tr;
var td;
var intArray=event.data.split(";");
var table=document.getElementById("table");
for(var i=0;i<intArray.length;i++){
//h=parseInt(i/15,0);
h=parseInt(i/15);
l=i%15;
//该行不存在
if(l==0){
//添加新行的判断
tr=document.createElement("tr");
tr.id="tr"+h;
table.appendChild(tr);
}
//该行已经存在的话
else{
//获取改行
tr=document.getElementById("tr"+h);
}
//添加列
td=document.createElement("td");
tr.appendChild(td);
//设置该列的数字内容
td.innerHTML=intArray[h*15+l];
//设置该列的背景色颜色
td.style.background="#f56848";
//设置给列对象的数字颜色
td.style.color="#000000";
//设置宽度
td.width="30";
}
}
};
</script>
</head>
<body>
<h2 style="text-shadow:3px 3px 6px blue;">从随机生成的数字中抽取5的倍数显示实例</h2>
<table id="table" border="" cellspacing="" cellpadding="">
</table>
</body>

</html>

//14-1.js

//该线程用于执行数据的挑选，会随机产生200个整数，将其交与子进程
onmessage=function(event){
var intArray=new Array(200);//产生随机的数组
//生成200个随机数
for(var i=0;i<200;i++){
intArray[i]=parseInt(Math.random()*200);
}
var worker;
//调用子进程
worker=new Worker("14-2.js");
//将随机数组提交给子进程
worker.postMessage(JSON.stringify(intArray));
worker.onmessage=function(event){
//将挑选结果返回主页面
postMessage(event.data);
};
}

//14-2.js

onmessage=function(event){
var intArray=JSON.parse(event.data);
var returnStr;
returnStr="";
for(var i=0;i<intArray.length;i++){
//数字能否被5整除判断
if(parseInt(intArray[i])%5==0){
if(returnStr!="")
returnStr+=";";
returnStr+=intArray[i];
}
}
//返回拼接后的字符串
postMessage(returnStr);
//关闭子进程
close();
}