这个测试也是纯前端的一个页面，前面还写过一个武侠末世的无聊小游戏，但是没往下继续写
这测试看到结果的我感觉触目惊心
真的太真实了
power是原有财富，knowledge是学历
加权后真的很符合现实世界的统计
所以好好学习吧！
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
font-size: 10px;
}
#title {
text-align: center;
position: sticky;
top: 0;
background-color: #F2F2F2;
/* border: 2px solid #4CAF50; */
}
</style>
</head>
<body>
<div id="title">
<h1>模擬社會</h1>
<button type="button" id="continueButton">生成人物</button>
<button type="button" id="continueButton2">人物匹配</button>
<button type="button" id="continueButton3">生成圖</button>
<br />
<br />
</div>
<div id="container" style="height: 500px"></div>
<div id="log"></div>
</body>
<script src="jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ecStat.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function newMan() {
var knowledge = Math.floor(Math.random() * 10 + 1);
var power = Math.floor(Math.random() * 10 + 1);
var man = new Object();
man.knowledge = knowledge;
man.power = power;
return man;
}
function newWoman() {
var knowledge = Math.floor(Math.random() * 10 + 1);
var power = Math.floor(Math.random() * 10 + 1);
var woman = new Object();
woman.knowledge = knowledge;
woman.power = power;
return woman;
}
var num = 10000;
var menArray = new Array();
var womenArray = new Array();
var countChildren = 0;
var childrenArray = new Array();
$("#continueButton").click(function() {
for (var i = 0; i < num; i++) {
menArray[i] = newMan();
womenArray[i] = newWoman();
// $("#log").append("男" + i + "號，學識：" + menArray[i].knowledge + " 能力：" + menArray[i].power + "</br>");
// $("#log").append("女" + i + "號，學識：" + womenArray[i].knowledge + " 能力：" + womenArray[i].power + "</br>");
}
})
$("#continueButton2").click(function() {
for (var i = 0; i < num; i++) {
for (var j = 0; j < num; j++) {
if (menArray[i] != null && womenArray[j] != null) {
// var kabs = Math.abs(menArray[i].knowledge - womenArray[j].knowledge);
// var pabs = Math.abs(menArray[i].power - womenArray[j].power);
//社會資源低於4的男性,低於3的女性沒有後代 學識低於3的男性,低於2的女性沒有後代
if(menArray[i].knowledge<3 && menArray[i].power<4){
$("#log").append("男" + i + "號，學識：" + menArray[i].knowledge + " 能力：" + menArray[i].power + " 被淘汰 </br>");
menArray[i] = null;
continue;
}
if(womenArray[j].knowledge<2 && womenArray[j].power<3){
$("#log").append("女" + j + "號，學識：" + womenArray[j].knowledge + " 能力：" + womenArray[j].power + " 被淘汰 </br>");
womenArray[j] = null;
continue;
}
//模擬女性只會找比自己強或者和自己實力相當的男性
var kabs = menArray[i].knowledge - womenArray[j].knowledge;
var pabs = menArray[i].power - womenArray[j].power;
if (kabs < 2 && kabs >= 0 && pabs >= 0 && pabs < 2) {
var children = new Object();
children.father = menArray[i];
children.mother = womenArray[j];
children.knowledge = Math.round((children.father.knowledge + children.mother.knowledge) / 2);
children.power = Math.round((children.father.power + children.mother.power) / 2);
childrenArray[countChildren] = children;
$("#log").append("男" + i + "號，學識：" + menArray[i].knowledge + " 能力：" + menArray[i].power + " 牽手 ");
$("#log").append("女" + j + "號，學識：" + womenArray[j].knowledge + " 能力：" + womenArray[j].power + " 孩子 ");
$("#log").append("孩子" + countChildren + "號學識：" + children.knowledge + " 能力：" + children.power + "</br>");
menArray[i] = null;
womenArray[j] = null;
countChildren++;
}
}
}
}
for (var i = 0; i < num; i++) {
if (menArray[i] != null) {
$("#log").append("剩男" + i + "號，學識：" + menArray[i].knowledge + " 能力：" + menArray[i].power + "</br>");
}
if (womenArray[i] != null) {
$("#log").append("剩女" + i + "號，學識：" + womenArray[i].knowledge + " 能力：" + womenArray[i].power + "</br>");
}
}
})
$("#continueButton3").click(function() {
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var data = new Array();
for (var i = 0; i < countChildren; i++) {
var temp = new Array();
temp[0] = i;
//加權進行能力判定
temp[1] = childrenArray[i].knowledge*childrenArray[i].knowledge+childrenArray[i].power*5;
data[i] = temp;
}
// See https://github.com/ecomfe/echarts-stat
var myRegression = ecStat.regression('exponential', data);
myRegression.points.sort(function(a, b) {
return a[0] - b[0];
});
option = {
title: {
text: '2018-2019 people relationship',
subtext: 'By gyx.test',
// sublink: 'https://github.com/ecomfe/echarts-stat',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
splitNumber: 20
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: [{
name: 'scatter',
type: 'scatter',
label: {
emphasis: {
show: true,
position: 'left',
textStyle: {
color: 'blue',
fontSize: 16
}
}
},
data: data
}, {
name: 'line',
type: 'line',
showSymbol: false,
smooth: true,
data: myRegression.points,
markPoint: {
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
normal: {
show: true,
position: 'left',
formatter: myRegression.expression,
textStyle: {
color: '#333',
fontSize: 14
}
}
},
data: [{
coord: myRegression.points[myRegression.points.length - 1]
}]
}
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
})
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
