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. 进程(守护进程--互斥锁--IPC机制--生产者模型--僵尸进程与孤儿进程--模拟抢票--消息队列)

    目录 一:进程理论知识 1.理论知识 二:什么是进程? 三:僵尸进程与孤儿进程 1.僵尸进程 四:守护进程 1.什么是守护进程? 2.主进程创建守护进程 3.守护进程 五:互斥锁(模拟多人抢票) 1. ...

  3. 一个模拟——抢票部分功能的 简单版(主要实例化一下 Lock 的使用)

    """ 抢票! 多个用户在同时读写同一个数据 """ from multiprocessing import Process,Lock im ...

  4. python 并发编程 多进程 模拟抢票

    抢票是并发执行 多个进程可以访问同一个文件 多个进程共享同一文件,我们可以把文件当数据库,用多个进程模拟多个人执行抢票任务 db.txt {"count": 1} 并发运行,效率高 ...

  5. java多线程下模拟抢票

    我们设置三个对象分别同时抢20张票,利用多线程实现. public class Web123506 implements Runnable{ private int ticteksNums=20;// ...

  6. Web Worker浅学

    Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面.它独立于其他脚本,不会影响页面的性能.您 ...

  7. Service Worker,Web Worker,WebSocket的对比

    Service Worker 处理网络请求的后台服务.适用于离线和后台同步数据或推送信息.不能直接和dom交互.通过postMessage方法交互. Web Worker 模拟多线程,允许复杂计算功能 ...

  8. c# 模拟 网页实现12306登陆、自动刷票、自动抢票完全篇

    这一篇文章,我将从头到尾教大家使用c#模拟网页面登陆12306网站,自动刷票,选择订票人,到最后一步提交订单.研究过HTTP协议的童鞋们都知道,我们在访问网站时,是有两种方式的,POST和GET方式, ...

  9. Python 实现的 12306抢票脚本

    Python12306抢票脚本 本脚本使用一个类来实现所有代码,大体上分为以下几个模块及其步骤:- 初始化对象属性(在抢票前进行的属性初始化,包括初始化浏览器模拟对象,个人信息等).- 建立模拟浏览器 ...

随机推荐

  1. vim中将小写替换为大写--快速解决变量名风格

    将C语言的下划线分割快速替换为Java的驼峰方式. 命令如下 :%s/_\([a-zA-Z]\)/\U\1/g 参考文档

  2. indexOf 引用

  3. linux shell 指令搜索顺序

    在linux shell 中输入一个命令,如果有多个同名指令,shell需要按照一定规则去取优先级高的一个执行,shell命令的搜索顺序为: 1.别名,使用alias创建的命令. 2.关键字,如if, ...

  4. js 功能

    ---IE wps excelApp =ActiveXObject("Excel.Application") App.DisplayAlerts = false 不显示警告 App ...

  5. Properties类学习笔记

    1.Properties是一个hashTable子类,但它只装String类型的值2.一个Properties集中有一个子Properties集为它的默认属性集,如果在Properties中找不到相关 ...

  6. msvcp140.dll丢失解决方案

    [首先给出99%情况下都能解决这个问题的最简单办法]:   下载并安装微软VC++2015版运行库 (英文全称:Microsoft Visual C++ 2015 Redistributable Pa ...

  7. 【剑指offer】链表第一个公共子结点

    *思路: 先求得两个链表的长度,然后得到长度差diff,再先遍历长链表diff步后,再同时遍历两个链表并比较对象指针. /* public class ListNode { int val; List ...

  8. 内训--PPT演示技巧

    企业内训,实操,不涉及如何做PPT,仅讲解PPT播放等内容.做好PPT后,在演讲的过程中,如何使用这些功能.

  9. js中记住密码功能

    js中记住密码功能(在前端实现) 直接上例子(如果你也要实现的话注意改一些变量名称,jsp代码不包含样式) Jsp代码: <form class="am-form tpl-form-l ...

  10. linux如何复制文件夹和移动文件夹

    linux下文件的复制.移动与删除命令为:cp,mv,rm一.文件复制命令cp 命令格式:cp [-adfilprsu] 源文件(source) 目标文件(destination)cp [option ...