北京地铁计价系统的实现
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<style>
body{
margin-left: auto;
margin-right: auto;
margin-top: 200px;
width: 25em;
}
</style>
</head>
<body>
前端交互，线路存储，票价计算及输出等由station.js实现。
2)station.js结构
线路数据通过一个stationData变量实现，这个变量中存储了1~15号线路的全部站点，并且通过stationData[]进行访问。
站点间距离数据通过chartData存储，这个变量中按照类似二维数组的格式存储相邻站点间距离，并且在station.js文件调用时通过dijkstra.addEdges(chartData)初始化到dijkstra算法中。
循环结束之后的已经得到最短路径minDist；return的作用是索引函数，在station.js中通过dijkstra.shortest就可以索引到函数中。
Shortest函数的流程展示:
4.
1)index.html:
<!--2016.11.24 nevil-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Subway</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<script src="./js/jquery.min.js"></script>
一、
1.
1)掌握dijkstra算法的思想；
2)掌握javascript数据类型之javascript对象；
3)采用模块化的思想编写程序；
4)学会用浏览器的调试功能检查代码；
5)掌握整个网页设计过程元素调用的问题，可以将各个元素正确调用；
6)学会将知识应用于实际的方法，提高分析和解决问题的能力，增加综合能力；
addChart将station.js中的chartData进行拆分导入：
获取参数的length作为循环总数，通过chart[i]索引二维数组并赋予变量edge，此时edge是包含两个站点和距离的一维数组。通过edge[i]索引edge中元素并作为参数传入函数addEdge中；
addEdge则是建立图表的函数。它包括三个参数：origin,target,distance代表起始、终点、权重。通过三个参数，建立坐标为origin,target、值为distance的图表。
<script src="./js/bootstrap.min.js"></script>
<script charset="UTF-8" src="./js/dijkstra.js"></script>
<script charset="UTF-8" src="./js/station.js"></script>
shortest函数是最重要的算法部分：通过station.js中dijkstra.shortest(origin,target)传入起点和终点，并返回最短的路径；
函数首先判断传入的数据是否在chart中，如果不在，则返回一个∞；
定义两个对象dist，vistited和一个数字numVertex，直接使用forin结构遍历图表，先认为全部的路径值都是∞，同时获取最大数numVertex用于下层的循环控制。在用语句dist[origin] = 0使得到原点的距离为0；
接下来if判断minV是否仍然为void0，是则跳出循环。如果minV和目标target相等 ，则返回最短路径minDist；否则继续，令对象visited[minV]存储bool值true表示已经找过；再定义一个变量edges=chart[minV]，新建循环，求解minDist到下一点的最短路径，如果有则记录到dist[v]中。进行下次循环。
函数getStartStation和getEndStation用于获取用户选择线路完毕后获取选项option的value值，根据value值向二级select元素中添加stationData线路பைடு நூலகம்据。实现select选项卡的级联。
函数getSubwayData用于实现用户点击时获取表单内容(即获取select元素内text元素)，然后distance中输出根据dijkstra算法中shortest函数得到的距离数，同时输出时使用toFixed(1)控制输出位数为1位(js中数字为浮点形式)；然后将计算的distance传入caleFare函数中计算费用并输出。
函数caleFare实现票价计算：6公里以内3元、12公里以内4元、32公里以内每超出12公里10公里1元、超出32公里的部分没20公里1元，上不封顶；前两部分判断直接return，后两部分则需要调用函数math.ceil向上取整功能。
3)dijkstra算法
dijkstra = function ()将dijkstra实例化为一个函数。函数内包括5部分：
接下来进行for循环： ；循环中定义一个minDist最短路径为∞，再定义一个最小值v=0；使用forin结构遍历dist[]，且v不存在于已经考虑过的点中 ，判断最短路径minDist是否大于dist[v],如果大于则将dist[v]中的值赋予minDist，同时将v赋予minV；如果小于则不进行操作。
7)为后续计算机课程的学习打下坚实基础；
2.
本次设计基于html+css+javascript设计了一款网页端的地铁计价系统，通过使用javascript对象存储数据，js调用数据和计算，html，css美化前端样式，js实现交互功能等，实现了一个完整的，实用的网页端地铁计价系统。
3.
1)整体架构
网页前端index.html由HTML编写，用一个subway-out的大容器承载全部元素，然后将这个容器细分为三大块，也就是使用三个form表单，分别实现起始线路与站点选择，终点线路与站点选择，提交按钮、票价显示和路程显示；HTML美化通过bootstrap和jquery实现，这里不再赘述。
body{
margin-left: auto;
margin-right: auto;
margin-top: 200px;
width: 25em;
}
</style>
</head>
<body>
前端交互，线路存储，票价计算及输出等由station.js实现。
2)station.js结构
线路数据通过一个stationData变量实现，这个变量中存储了1~15号线路的全部站点，并且通过stationData[]进行访问。
站点间距离数据通过chartData存储，这个变量中按照类似二维数组的格式存储相邻站点间距离，并且在station.js文件调用时通过dijkstra.addEdges(chartData)初始化到dijkstra算法中。
循环结束之后的已经得到最短路径minDist；return的作用是索引函数，在station.js中通过dijkstra.shortest就可以索引到函数中。
Shortest函数的流程展示:
4.
1)index.html:
<!--2016.11.24 nevil-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Subway</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<script src="./js/jquery.min.js"></script>
一、
1.
1)掌握dijkstra算法的思想；
2)掌握javascript数据类型之javascript对象；
3)采用模块化的思想编写程序；
4)学会用浏览器的调试功能检查代码；
5)掌握整个网页设计过程元素调用的问题，可以将各个元素正确调用；
6)学会将知识应用于实际的方法，提高分析和解决问题的能力，增加综合能力；
addChart将station.js中的chartData进行拆分导入：
获取参数的length作为循环总数，通过chart[i]索引二维数组并赋予变量edge，此时edge是包含两个站点和距离的一维数组。通过edge[i]索引edge中元素并作为参数传入函数addEdge中；
addEdge则是建立图表的函数。它包括三个参数：origin,target,distance代表起始、终点、权重。通过三个参数，建立坐标为origin,target、值为distance的图表。
<script src="./js/bootstrap.min.js"></script>
<script charset="UTF-8" src="./js/dijkstra.js"></script>
<script charset="UTF-8" src="./js/station.js"></script>
shortest函数是最重要的算法部分：通过station.js中dijkstra.shortest(origin,target)传入起点和终点，并返回最短的路径；
函数首先判断传入的数据是否在chart中，如果不在，则返回一个∞；
定义两个对象dist，vistited和一个数字numVertex，直接使用forin结构遍历图表，先认为全部的路径值都是∞，同时获取最大数numVertex用于下层的循环控制。在用语句dist[origin] = 0使得到原点的距离为0；
接下来if判断minV是否仍然为void0，是则跳出循环。如果minV和目标target相等 ，则返回最短路径minDist；否则继续，令对象visited[minV]存储bool值true表示已经找过；再定义一个变量edges=chart[minV]，新建循环，求解minDist到下一点的最短路径，如果有则记录到dist[v]中。进行下次循环。
函数getStartStation和getEndStation用于获取用户选择线路完毕后获取选项option的value值，根据value值向二级select元素中添加stationData线路பைடு நூலகம்据。实现select选项卡的级联。
函数getSubwayData用于实现用户点击时获取表单内容(即获取select元素内text元素)，然后distance中输出根据dijkstra算法中shortest函数得到的距离数，同时输出时使用toFixed(1)控制输出位数为1位(js中数字为浮点形式)；然后将计算的distance传入caleFare函数中计算费用并输出。
函数caleFare实现票价计算：6公里以内3元、12公里以内4元、32公里以内每超出12公里10公里1元、超出32公里的部分没20公里1元，上不封顶；前两部分判断直接return，后两部分则需要调用函数math.ceil向上取整功能。
3)dijkstra算法
dijkstra = function ()将dijkstra实例化为一个函数。函数内包括5部分：
接下来进行for循环： ；循环中定义一个minDist最短路径为∞，再定义一个最小值v=0；使用forin结构遍历dist[]，且v不存在于已经考虑过的点中 ，判断最短路径minDist是否大于dist[v],如果大于则将dist[v]中的值赋予minDist，同时将v赋予minV；如果小于则不进行操作。
7)为后续计算机课程的学习打下坚实基础；
2.
本次设计基于html+css+javascript设计了一款网页端的地铁计价系统，通过使用javascript对象存储数据，js调用数据和计算，html，css美化前端样式，js实现交互功能等，实现了一个完整的，实用的网页端地铁计价系统。
3.
1)整体架构
网页前端index.html由HTML编写，用一个subway-out的大容器承载全部元素，然后将这个容器细分为三大块，也就是使用三个form表单，分别实现起始线路与站点选择，终点线路与站点选择，提交按钮、票价显示和路程显示；HTML美化通过bootstrap和jquery实现，这里不再赘述。