web worker工作原理图：

抢票系统思维导图：

思路：五个人（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
}

效果图：
未点击开始抢票按钮前：

点击抢票按钮以后：

												


											
Web Worker模拟抢票的更多相关文章
	

    
								
  1. 并发编程 - 进程 - 1.互斥锁/2.模拟抢票/3.互斥锁与join区别
		
    1.互斥锁: 互斥锁:Lock 原理就是把并发变成串行,一个一个运行,不错乱,但效率低 保证多个进程修改一块数据时,大家是一个一个修改,不错乱 mutex.acquire() mutex.releas ...
    
		
    2. 
						
  2. 进程(守护进程--互斥锁--IPC机制--生产者模型--僵尸进程与孤儿进程--模拟抢票--消息队列)
		
    目录 一:进程理论知识 1.理论知识 二:什么是进程? 三:僵尸进程与孤儿进程 1.僵尸进程 四:守护进程 1.什么是守护进程? 2.主进程创建守护进程 3.守护进程 五:互斥锁(模拟多人抢票) 1. ...
    
		
    3. 
						
  3. 一个模拟——抢票部分功能的 简单版（主要实例化一下 Lock 的使用）
		
    """ 抢票! 多个用户在同时读写同一个数据 """ from multiprocessing import Process,Lock im ...
    
		
    4. 
						
  4. python 并发编程 多进程 模拟抢票
		
    抢票是并发执行 多个进程可以访问同一个文件 多个进程共享同一文件,我们可以把文件当数据库,用多个进程模拟多个人执行抢票任务 db.txt {"count": 1} 并发运行,效率高 ...
    
		
    5. 
						
  5. java多线程下模拟抢票
		
    我们设置三个对象分别同时抢20张票,利用多线程实现. public class Web123506 implements Runnable{ private int ticteksNums=20;// ...
    
		
    6. 
						
  6. Web Worker浅学
		
    Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面.它独立于其他脚本,不会影响页面的性能.您 ...
    
		
    7. 
						
  7. Service Worker,Web Worker,WebSocket的对比
		
    Service Worker 处理网络请求的后台服务.适用于离线和后台同步数据或推送信息.不能直接和dom交互.通过postMessage方法交互. Web Worker 模拟多线程,允许复杂计算功能 ...
    
		
    8. 
						
  8. c# 模拟 网页实现12306登陆、自动刷票、自动抢票完全篇
		
    这一篇文章,我将从头到尾教大家使用c#模拟网页面登陆12306网站,自动刷票,选择订票人,到最后一步提交订单.研究过HTTP协议的童鞋们都知道,我们在访问网站时,是有两种方式的,POST和GET方式, ...
    
		
    9. 
						
  9. Python 实现的 12306抢票脚本
		
    Python12306抢票脚本 本脚本使用一个类来实现所有代码,大体上分为以下几个模块及其步骤:- 初始化对象属性(在抢票前进行的属性初始化,包括初始化浏览器模拟对象,个人信息等).- 建立模拟浏览器 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. jQuery-1.样式篇---属性与样式
			
    jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标 ...
    
			
    2. 
						
  2. 本地Debug Asp.net MVC 无法加载css与js
			
    运行一个从网上download的一个MVC项目,运行的时候无法显示样式,js也报错. 检查路径也没有问题,后来在配置中把其中的一段配置去掉 <staticContent> <!--  ...
    
			
    3. 
						
  3. Linux命令学习之路——内容剪切:cut
			
    使用者:所有角色 用法:cut [ -bcdfn ] [ --complement ] filename 作用:截取文件中的部分字段用于展示或存储到新文件中 应用场景: 1.内容展示 : 截取一个或多 ...
    
			
    4. 
						
  4. linux自启动tomcat
			
    第一种方式 1.修改脚本文件rc.local:vim /etc/rc.d/rc.local 这个脚本是使用者自定的开机启动程序,可以在里面添加想在系统启动之后执行的脚本或者脚本执行命令 2.添加如下内 ...
    
			
    5. 
						
  5. JDK下载与安装、 Eclipse下载与使用、 Tomcat下载与使用、 MySQL安装与使用
			
    前言 本文将介绍JDK的下载与安装,eclipse的下载与使用,Tomcat的下载与使用,MySQL的安装与使用. JDK下载与安装 一.JRE与JDK介绍 java是当前比较流行的一种编程语言,当我 ...
    
			
    6. 
						
  6. java栈的实现复习
			
    栈是一种线性表,仅限在一端进行插入和删除操作,特点是先进后出. 由于栈是一种线性结构,首先可以想到用数组来实现,但由于数组初始化后容量就已经确定,如果不添加扩容操作,则会出现栈溢出,同时扩容操作也会降 ...
    
			
    7. 
						
  7. golang cache--go-cache
			
    go-cache是一款类似于memached 的key/value 缓存软件.它比较适用于单机执行的应用程序. go-cache实质上就是拥有过期时间并且线程安全的map,可以被多个goroutine ...
    
			
    8. 
						
  8. Spark性能优化指南——高级篇
			
    本文转载自:https://tech.meituan.com/spark-tuning-pro.html 美团技术点评团队) Spark性能优化指南——高级篇 李雪蕤 ·2016-05-12 14:4 ...
    
			
    9. 
						
  9. 关于音频总线IIS的学习---Verilog
			
    关于音频总线IIS的学习---Verilog 主要思想: 在分析寄存器的值变化的时候,将时钟的边沿分两边来看,边沿之前,边沿之后,在always 块语句里面用来分析判断的寄存器的值,都应该用边沿变化之 ...
    
			
    10. 
						
  10. bootstrap的日期选择器
			
    时间框偏移解决办法 首先导入js和css文件 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" ...
    
			
    11.