前言:
由于时间和能力的限制只完成了全国以及五个省份从1月24日到2月28日的数据统计。(疫情地图部分的数据是所有省市的)
整体构架:
有首页、湖北、广东、浙江、河南、山东六个网页。
每个网页中包含标题、导航栏、主体的各个区域、尾部的信息来源链接。
主体部分划分为图片展示、数据曲线、疫情地图、日期选择、疫情表格5个区域。
另外还加了时间显示与背景音乐播放器两个配件。
运用到的知识:
HTML写网页的基础元素。
CSS设置网页的样式和布局。
JavaScript实现交互,制作了图片展示与时间显示的部分,并实现了按钮的提交、表格数据显示、、提醒框跳出和地图的切换功能。
echarts.js实现数据的可视化,通过折线图、地图展示数据。
node.js爬取数据放入json文件
头部:
标题、菜单栏、日期时间、bgm播放
<div class="header">
<div id="times"></div>
<h1 style="text-shadow: 2px 2px #8888ff;">新冠肺炎数据统计网站</h1>
</div>
<div class="topnav">
<a href="index.html">首页</a>
<a href="hb.html">湖北</a>
<a href="gd.html">广东</a>
<a href="zj.html">浙江</a>
<a href="hn.html">河南</a>
<a href="sd.html">山东</a>
<audio controls style="float: right;">
<source src="song.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素
</audio>
</div>
<script>
//得到时间并写入div
function getDate(){
//获取当前时间
var date = new Date();
//格式化为本地时间格式
var date1 = date.toLocaleString();
//获取div
document.getElementById("times").innerHTML=date1;
}
//使用定时器每秒向div写入当前时间
setInterval("getDate()",1000);
</script>
轮播图片:
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="p1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="p2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="p3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
数据曲线:
<div class="card">
<h2>数据曲线</h2>
<div id="chart" style="width: 700px;height:400px;"> </div>
<script src="JS/echarts.min.js"></script>
<script src="JS/qgzx.js"></script>
</div>
(主要的内容放在两个script里了,一个存放数据,另一个绘制折线图)
日期选择及对应日期疫情展示:
<div class="card">
<h2>日期选择</h2>
<div style="padding-left: 40px;">
<form>
<input type="text" id="inputdate">
</form>
<button type="button" onclick="myFunction()">确认</button>
<p><b>请在此输入日期:</b><br>
从1月24日到2月28日(形式为x月xx日)</p>
<p id="lala"></p>
</div>
</div>
<div class="card">
<h2>疫情</h2>
<h5 id="显示日期"></h5>
<table>
<tr>
<tr><td>现有确诊病例</td><td id="现有确诊病例"></td></tr>
<tr><td>现有疑似病例</td><td id="现有疑似病例"></td></tr>
<tr><td>现有重症病例</td><td id="现有重症病例"></td></tr>
<tr><td>累计确诊病例</td><td id="累计确诊病例"></td></tr>
<tr><td>治愈病例</td><td id="治愈病例"></td></tr>
<tr><td>死亡病例</td><td id="死亡病例"></td></tr>
</tr>
</table>
</div>
疫情地图:
<div class="card">
<h2>疫情地图</h2>
<div id="chinamap" style="width: 600px;height: 450px;margin: 0px auto"> </div>
<div id="chinamap1" style="display: none;width: 600px;height: 450px;margin: 0px auto"> </div>
<div id="chinamap2" style="display: none;width: 600px;height: 450px;margin: 0px auto"> </div>
<script src="JS/china.js"></script>
<script src="JS/chinamap.js"></script>
<script src="JS/chinamap1.js"></script>
<script src="JS/chinamap2.js"></script>
<button type="button" onclick="divSW()">现有确诊病例</button>
<button type="button" onclick="divSW1()">累计确诊病例</button>
<button type="button" onclick="divSW2()">累计死亡病例</button>
<script>
var dv = document.getElementById("chinamap");
var dv1 = document.getElementById("chinamap1");
var dv2 = document.getElementById("chinamap2");
function divSW() {
dv.style.display = "block";
dv1.style.display = "none";
dv2.style.display = "none";}
function divSW1() {
dv.style.display = "none";
dv1.style.display = "block";
dv2.style.display = "none";}
function divSW2() {
dv.style.display = "none";
dv1.style.display = "none";
dv2.style.display = "block";}
</script>
</div>
底部(信息来源):
<div class="footer">
<h2>信息来源</h2>
<div class="footie">
<p>全国:<a href="http://www.nhc.gov.cn/xcs/yqtb/list_gzbd.shtml">中华人民共和国国家卫生健康委员会</a></p>
<p>湖北:<a href="http://wjw.hubei.gov.cn/bmdt/ztzl/fkxxgzbdgrfyyq/xxfb/">湖北省卫生健康委员会</a></p>
</div>
<div class="footie">
<p>广东:<a href="http://wsjkw.gd.gov.cn/zwyw_yqxx/index.html">广东省卫生健康委员会</a></p>
<p>河南:<a href="http://www.hnwsjsw.gov.cn/channels/858.shtml">河南省卫生健康委员会</a></p>
</div>
<div class="footie" >
<p>浙江:<a href="http://www.zjwjw.gov.cn/col/col1202101/index.html">浙江省卫生健康委员会</a></p>
<p>山东:<a href="http://wsjkw.shandong.gov.cn/ztzl/rdzt/qlzhfkgz/tzgg/">山东省卫生健康委员会</a></p>
</div>
</div>
代码见github
(记录一下第一份自己独立完成的程序设计大作业。。。)