问题描述
三门问题（Monty Hall problem）亦称为蒙提霍尔问题、蒙特霍问题或蒙提霍尔悖论，大致出自美国的电视游戏节目Let's Make a Deal。问题名字来自该节目的主持人蒙提·霍尔（Monty Hall）。参赛者会看见三扇关闭了的门，其中一扇的后面有一辆汽车，选中后面有车的那扇门可赢得该汽车，另外两扇门后面则各藏有一只山羊。当参赛者选定了一扇门，但未去开启它的时候，节目主持人开启剩下两扇门的其中一扇，露出其中一只山羊。主持人其后会问参赛者要不要换另一扇仍然关上的门。问题是：换另一扇门会否增加参赛者赢得汽车的机率？如果严格按照上述的条件，即主持人清楚地知道，自己打开的那扇门后是羊，那么答案是会。不换门的话，赢得汽车的几率是1/3。换门的话，赢得汽车的几率是2/3。
这个问题亦被叫做蒙提霍尔悖论：虽然该问题的答案在逻辑上并不自相矛盾，但十分违反直觉。这问题曾引起一阵热烈的讨论。
下面是一个小demo展示计算过程和结果
效果
image.png
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" >
<title>三门问题</title>
<link rel="stylesheet" href="src/css/index.css">
<script type="text/javascript" src="src/js/vue.min.js"></script>
</head>
<body>
<div id="todo" class="todo">
<div class="header">
<section>
<form action="javascript:void(0)">
<label for="title">三门问题</label>
<button class="addBtn" v-on:click="play"></button>
<input type="text" name="title" placeholder="请输入计算次数..." required="required" autocomplete="off" v-model="time" v-on:keypress.enter="play">
</form>
</section>
</div>
<section>
<h2>改变选择的成功率：<span id="todoCount" class="count">{{changeRate}}</span></h2>
<h2>不改变选择的成功率：<span id="doneCount" class="count">{{noChangeRate}}</span></h2>
</section>
<p class="footer">Derek</p>
</div>
<script type="text/javascript" src="src/js/index.js"></script>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
background: #cdcdcd;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.header {
height: 50px;
background: rgba(47, 47, 47, 0.98);
}
section {
max-width: 620px;
margin: 0 auto;
padding: 0 10px;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #ddd;
font-size: 24px;
cursor: pointer;
}
.header input {
float: right;
width: 60%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none;
}
.header button{
float: right;
width: 48px;
height: 25px;
margin-top: 12px;
background-color: #07FC27;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
outline: none;
font-weight: bolder;
}
h2 {
position: relative;
margin: 26px 0;
}
h2 .count {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 20px;
background: #e6e6fa;
line-height: 22px;
text-align: center;
color: #666;
font-size: 14px;
}
ol {
margin: 28px 0 32px;
}
ol,
ul {
list-style-type: none;
}
li {
height: 32px;
line-height: 32px;
background: #fff;
position: relative;
margin-bottom: 10px;
padding: 0 48px;
border-radius: 3px;
border-left: 5px solid #629a9c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
li input {
position: absolute;
top: 6px;
left: 22px;
width: 22px;
height: 22px;
cursor: pointer;
}
li p {
line-height: 34px;
}
li a {
position: absolute;
top: 4px;
right: 5px;
display: inline-block;
width: 14px;
height: 12px;
border-radius: 14px;
border: 6px double #fff;
background: #ccc;
line-height: 12px;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
#doneList li {
border-left: 5px solid #999;
opacity: 0.5;
}
.footer {
font-size: 14px;
text-align: center;
color: #666;
}
@media only screen and (max-width: 400px){
.header input{
width: 52%;
}
}
js
var todo = new Vue({
el: "#todo",
data: {
time: '',
changeChoice: [],
noChangeChoice: [],
changeRate:0,
noChangeRate:0
},
methods: {
play: function() {
if(!this.time)return;
for (var i = 0; i < this.time; i++) {
var gates = this.init();
var choice = Math.floor(Math.random()*3);
// nochange
this.noChangeChoice.push(gates[choice]);
// change
if(gates[choice] == 0)
this.changeChoice.push(1);
else
this.changeChoice.push(0);
}
this.changeRate = this.total(this.changeChoice);
this.noChangeRate = this.total(this.noChangeChoice);
},
init:function(){
// gates
var gates = new Array(0,0,0);
var sheep = Math.floor(Math.random()*3);
gates.splice(sheep,1,1);
return gates;
},
total:function(result){
var count = 0;
for (var i = 0; i < result.length; i++) {
if(result[i])
count += result[i];
}
return ((count/result.length*100).toFixed(2))+"%";
}
}
});
网友评论