记-JS网页开发(csv数据读取)与阿里云轻量级服务器部署

本文链接：https://blog.csdn.net/CDUTCo/article/details/108348258

项目：PM2.5网站

一、CSV文件读取

       //定义XMLHttpRequest对象
		var city2ProvinceReader = new XMLHttpRequest();
       //当对象状态改变时，就执行function函数
		city2ProvinceReader.onreadystatechange = function()
		{
			if (this.readyState == 4 && this.status == 200) {
				var text =this.responseText.split("\r\n");//将文件内容读取为string
				for(var i = 1;i<text.length;i++)//拆数据，将其变为行数据
				{	var temp=text[i].split(",")
					c2p.push(temp);
					for(var j =0;j<cities.length;j++)
					{
						console.log(typeof temp[1])
						if(temp[1].indexOf(cities[j])>-1 && 
                           Procince[temp[0]].indexOf(cities[j])<=-1)
							Procince[temp[0]].push[cities[j]];
					}
				}
			}
		};
		city2ProvinceReader.open("GET", "./city2province.csv", true);
		city2ProvinceReader.send();

注意：尽量将读取封装为函数，否则全局变量内存储不了数据，可能是因为需要数据读取完成。（此认知建立在我未学习过JavaScript的基础上，有正确的请指教）

二、搜索并根据内容出现候选框

 var datalist = document.getElementById('datalist');

//------实现下拉候选框
    function generatelist(array) {
        var _innerHTML = '';
        for (var i = 0; i < array.length; i++) {
            _innerHTML += '<li>' + array[i] + '</li>';
        }
        datalist.innerHTML = _innerHTML;
    }

    function findInArray(s) {
        var filter_array = [];
        if (s != '') {
            for (var i = 0; i < cities.length; i++) {
                if (cities[i].indexOf(s) > -1) {
                    filter_array.push(cities[i])
                }
            }
        }
        return filter_array;
    }

    city.onkeyup = function () {
        var new_array = findInArray(this.value);
        generatelist(new_array);
        if (new_array.length > 0) {
            setTimeout(function () {
                datalist.style.visibility = 'visible';
            }, 0);
        } else {
            setTimeout(function () {
                datalist.style.visibility = 'hidden';
            }, 0);
        }
    }
    var EventUtil = {
        on: function (elem, type, handler) {
            if (elem.addEventListener) {
                elem.addEventListener(type, handler, false);
            } else if (elem.attachEvent) {
                elem.attachEvent("on" + type, handler);
            }
        },
        getEvent: function (event) {
            return event || window.event;
        },
        getTarget: function (event) {
            return event.target || event.srcElement;
        },
        getCharCode: function (event) {
            if (typeof event.handler == "number") {
                return event.charCode;
            } else {
                return event.keyCode;
            }
        }
    }

    function stopPropagation(e) {
        e = window.event || e;
        if (document.all) {
            e.cancelBubble = true;
        } else {
            e.stopPropagation();
        }
    }

    EventUtil.on(document.body, 'click', function (e) {
        stopPropagation(e);
        if (EventUtil.getTarget(e).nodeName == 'BODY') {
            datalist.style.visibility = 'hidden';
            datalist.innerHTML = '';
        }
        if (EventUtil.getTarget(e).nodeName == "LI") {
            city.value = EventUtil.getTarget(e).innerHTML;
            datalist.style.visibility = 'hidden';
            datalist.innerHTML = '';
        }
    })

注：从网上直接扒下来使用的，并没有太多注释。

三、中国地图

1、需要导入Echarts包。

2、我的代码是从一个web网站上开会员下载的。

<div className="wrap" style="margin-top: 50px;">
                <div className="itemCon" style="float: left">
                    <div id="ChinaMap" style="margin: 50px;"></div>
                    <div id="stateTip" style="position: absolute;left: 100%;text-align: left;display: inline;"></div>
                </div>
                <div id="mapTipContent" style="width: 900px;margin: 0 auto;display: none">
                    <div className="mapTipText mapTipText0">
                        <div className="mapTipList">
                            <h2 id='黑龙江'><a>黑龙江<span>Heilongjiang</span></a></h2>
                            <ul id="0">
                             <li><a onClick="getCity_info(this.innerText)">哈尔滨</a></li>
                                //为省份插入地级城市，可人工，可用代码插入
                                <li><a>齐齐哈尔</a></li>
                                <li><a>佳木斯</a></li>
                                <li><a href="">鸡西</a></li>
                                <li><a href="">鹤岗</a></li>
                                <li><a href="">牡丹江</a></li>
                                <li><a href="">伊春</a></li>
                                <li><a href="">大庆</a></li>
                                <li><a href="">双鸭山</a></li>
                                <li><a href="">帽儿山</a></li>
                            </ul>
                        </div>
                    </div>
                    //可继续添加   
                </div>
            </div>

代码效果如：https://www.51qianduan.com/article/4401.html