<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實現前臺和後臺的線程數據交互</title>
<script>
var intArray=new Array();//產生一個隨機數組
var intStr="";//將隨機數組用字符串進行連接
//生成200個隨機數
for(var i=0;i<200;i++){
intArray[i]=parseInt(Math.random()*200);
if(i!=0){
intStr+=";";//用分號作爲隨機數組的分隔符
}
intStr+=intArray[i];
}
//向後臺線程提交隨機數組
var worker=new Worker("js/test.js");
worker.postMessage(intStr);
//從線程中取得計算結果
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>
<head>
<meta charset="UTF-8">
<title>實現前臺和後臺的線程數據交互</title>
<script>
var intArray=new Array();//產生一個隨機數組
var intStr="";//將隨機數組用字符串進行連接
//生成200個隨機數
for(var i=0;i<200;i++){
intArray[i]=parseInt(Math.random()*200);
if(i!=0){
intStr+=";";//用分號作爲隨機數組的分隔符
}
intStr+=intArray[i];
}
//向後臺線程提交隨機數組
var worker=new Worker("js/test.js");
worker.postMessage(intStr);
//從線程中取得計算結果
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>
//test.js
onmessage=function(event){
var data=event.data;
var returnStr;//將5的倍數組成字符串返回
var intArray=data.split(";");
returnStr="";
for(var i=0;i<intArray.length;i++){
if(parseInt(intArray[i]%5)==0){
if(returnStr!=""){
returnStr+=";";
}
returnStr+=intArray[i];
}
}
postMessage(returnStr);
};
