网页实现新冠疫情数据可视化

前言：

由于时间和能力的限制只完成了全国以及五个省份从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
（记录一下第一份自己独立完成的程序设计大作业。。。）