注釋詳細，不多解釋！請看代碼！！！
- 簡單交互頁面 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web worker 最小公倍數和最大共約數</title>
</head>
<style>
body {
font-family: "微軟雅黑";
font-size: 14px;
}
.input-number,.result,.operate {
margin: 10px auto;
text-align: center;
}
.result {
width: 200px;
text-align: left;
}
</style>
<body>
<div class="input-number">
<label for="first">
第一個數：
</label>
<input type="number" id="first" name="first">
</div>
<div class="input-number">
<label for="second">
第二個數：
</label>
<input type="number" id="second" name="first">
</div>
<div class="operate">
<button id="calculate">計算</button>
</div>
<div class="result">
<p>最小公倍數:<span id="common_multiple"></span></p>
<p>最大共約數:<span id="common_divisor"></span></p>
</div>
<script src="main.js"></script>
</body>
</html>
- 主線程js文件 main.js
var worker = new Worker('multiple-divisor.js'),
calculateBtn = document.getElementById('calculate');
// 監聽點擊事件
calculateBtn.addEventListener('click', function () {
var first = document.getElementById('first').value,
second = document.getElementById('second').value;
// 向子線程發送參數
worker.postMessage({first: parseInt(first), second: parseInt(second)});
});
// 接收數據
worker.onmessage = function(e) {
document.getElementById('common_multiple').textContent = e.data.multiple;
document.getElementById('common_divisor').textContent = e.data.divisor;
}
- web worker線程js文件 multiple-divisor.js
// 接收主線程發過來的參數
onmessage = function (e) {
var first = e.data.first,
second = e.data.second;
calculate(first, second);
}
// 求最小公倍數和最大公約數
function calculate(a, b) {
var c_multiple = multiple(a, b),
c_divisor = divisor(a, b);
// 向主進程發送計算結果
postMessage({multiple: c_multiple, divisor: c_divisor});
}
// 求最小公倍數
function multiple(a, b) {
return a * b / divisor(a, b);
}
// 求最大共約數
function divisor(a, b) {
if( a % b == 0) {
return b;
} else {
return divisor(b, a % b);
}
}
注意：本實例需要在服務器上運行
