欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

与Web Worker线程交换数据应用

程序员文章站 2022-07-08 07:59:14
...
一 应用
该应用允许用户输入两个数,两个数确定一个范围,而程序代码则计算、收集这个范围的所有质数。
 
二 代码
1、HTML代码
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 计算质数 </title>
	<style type="text/css">
		#show {
			width: 400px;
			background-color: #ddd;
			border-collapse: collapse;
		}
		td {
			border: 1px solid #555;
		}
	</style>
</head>
<body>
	起始值:<input type="text" id="start" name="start"/><br/>
	结束值:<input type="text" id="end" name="end"/><br/>
	<input type="button" value="计算" onclick="cal();"/>
	<table id="show"></table>
	<script type="text/javascript">
		var cal = function()
		{
			// 得到用户输入的start、end两个值
			var start = parseInt(document.getElementById("start").value);
			var end = parseInt(document.getElementById("end").value);
			// 如果start大于、等于end,直接结束该函数
			if (start >= end)
			{
				return;
			}
			var cal = new Worker("worker.js");
			// 定义需要提交给Worker线程的数据
			var data = {
				start : start,
				end : end
			};
			// 向Worker线程提交数据。
			cal.postMessage(JSON.stringify(data));
			cal.onmessage = function(event)
			{
				var table = document.getElementById("show");
				// 清空该表格原有的内容
				table.innerHTML = "";
				// 获取Worker线程返回的数据
				var result = event.data;
				var nums = result.split(",");
				// 定义表格总共包含多少列
				var COLS_NUM = 7;
				for (var i = 0 ; i <= (nums.length - 1) / COLS_NUM ; i++)
				{
					// 添加表格行
					var row = table.insertRow(i);
					// 循环插入7个单元格
					for(var j = 0 ; j < COLS_NUM &&
						i * COLS_NUM + j < nums.length - 1 ; j++)
					{
						// 插入单元格、并为单元格设置innerHTML属性
						row.insertCell(j).innerHTML = nums[i * COLS_NUM + j]
					}
				}
			}
		};
	</script>
</body>
</html>
 
 
2、JS代码
onmessage = function(event)
{
	// 将数据提取出来。
	var data = JSON.parse(event.data);
	// 取出start参数
	var start = data.start;
	// 取出end参数
	var end = data.end;
	var result = "";
	search:
	for (var n = start ; n <= end ; n++)
	{
		for (var i = 2; i <= Math.sqrt(n); i ++)
		{
			// 如果除以n的余数为0,开始判断下一个数字。
			if (n % i == 0)
			{
				continue search;
			}
		}
		// 搜集找到的质数
		result += (n + ",");
	}
	// 发送消息,将会触发前台JavaScript脚本中
	// Worker对象的onmessage方法
	postMessage(result);
}
 
 
三 运行结果
与Web Worker线程交换数据应用
            
    
    博客分类: JavaScript Web Worker线程交换数据 
 
  • 与Web Worker线程交换数据应用
            
    
    博客分类: JavaScript Web Worker线程交换数据 
  • 大小: 24.4 KB