Web Worker模擬選票
阿新 • • 發佈：2018-12-04
思路：五個人（5個div視窗模擬）同時進行搶票，有百分之十的機率可以搶到票，搶到票後對應的視窗（即隨機生成的數大於等於0小於9的情況）會程式設計天藍色，沒搶到票的視窗（即隨機生成的數大於9小於100的情況）會變成紅色
HTML原始碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html5拖拽效果</title>
<style>
div {
width: 150px;
height: 150px;
float: left;
margin-right: 10px;
border: black thin solid;
text-align: center;
}
.hasTicket {
/ / 表示搶到票後將對應的視窗的背景顏色修改為天藍色 width: 150 px;
height: 150px;
float: left;
margin-right: 10px;
border: black thin solid;
text-align: center;
background: aqua;
}
.noTicket {
/ / 表示未搶到票後將對應的視窗的背景顏色修改為天紅色 width: 150 px;
height: 150px;
float: left;
margin-right: 10px;
border: black thin solid;
text-align: center;
background: red;
}
</style>
</head>
<body>
<div id="div0">搶票者 1</div>
<div id="div1">搶票者 2</div>
<div id="div2">搶票者 3</div>
<div id="div3">搶票者 4</div>
<div id="div4">搶票者 5</div>
<button id="start" value="開始搶票">開始搶票</button>
</body>
</html>
<script type="text/javascript">
var button = document.getElementById("start");
button.onclick = function (event) {
if (typeof(Worker) !== "undefined") {
var workers = [];//用來儲存worker物件
for (var i = 0; i < 5; i++) {
var worker = new Worker("snatchTickets.js");
worker.onmessage = getmessage;
workers.push(worker);
}
function getmessage(event) {
var target = event.target;//從workers陣列中獲得當前worker物件的角標
var t = workers.indexOf(target);//查詢當前worker在workers陣列中的下標，這裡worker在陣列中的下標與div的id值是一一對應的
var div = document.getElementById("div" + t);//根據角標，取得對應的視窗
if (event.data == 1) {//若獲取的資料為1，表示搶到票了，將對應div的css樣式改為hasTicket
div.className = "hasTicket";
} else {
div.className = "noTicket";//否則，將對應div的css樣式改為noTicket
}
}
} else {
alert("你的瀏覽器不支援Worker元素，建議更換瀏覽器或者使用更高版本的瀏覽器");
}
};
</script>
snatchTickets.js對應的邏輯控制程式碼：
var rand=Math.floor(Math.random()*100);//取得0-99的一個隨機數
if(rand<=9){
postMessage(1);//若是在0-9之間，則表示搶到票了，傳遞資料1
}else{
postMessage(0);//否則，表示沒有搶到票，傳遞資料0
}
效果圖：
未點選開始搶票按鈕前：
點選搶票按鈕以後：
