景点【查找关键词】

来源：互联网发布：关于初中语文的软件编辑：程序博客网时间：2024/04/28 23:05
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>scenery</title><style>#out {display: flex;justify-content: center;margin-top: 100px;}#input {display: inline-block;text-align: center;height: 30px;width:200px ;border: 3px solid red;background: black;color: white;}#sea {display: inline-block;text-align: center;height: 38px;width:50px ;border: 3px solid red;background: black;color: white;}#noul {margin: 30px auto;font: 700 18px/30px "";border: 3px solid red;background: black;color: white;width: 800px;height: 500px;}#noul li {}</style></head><body><div id="out"><input id="input" /><button onclick="search()" id="sea">搜索</button></div><ul id="noul"></ul><script>/* 1.先要遍历每个省 2，查找每个城市的内容是否有这个关键词 3.含有此关键词的省组成新的数组 4.重新渲染列表 * */function search() {var input = document.getElementById("input").value;var arr = [{province: "黑龙江省",city: "五大连池  哈尔滨太阳岛  东北虎林园  漠河北极村 哈尔滨冰雪大世界 牡丹江雪乡  镜泊湖风景区"},{province: "辽宁省",city: "长春-可怕  大连-老虎滩海洋公园 -星海广场-动物园（找黄牛便宜，不要买胡萝卜）"},{province: "江苏省",city: "南京-夫子庙(迷路n次)-中山陵-南京大屠杀纪念馆-玄武湖 苏州-旗袍-寒山寺（姑苏城）拙政园"}, //别买假证= ={province: "上海市",city: "东方明珠广播电视塔 -外滩-外滩-南京路步行街-田子坊（蚊子聚集地）"},{province: "浙江省",city: "杭州-西湖（晚上喷泉一定要看7:00  8:00）-灵隐寺-雷峰塔-宋城-四季（中国两大服装厂之一）嘉兴-月河-西塘-乌镇 舟山-普陀山（佛教圣地）"},{province: "江西省",city: "南昌-滕王阁"},{province: "广东省",city: "深圳 珠海 肇庆 （吃吃吃= =好多花）"},{province: "香港",city: "香港迪斯尼乐园-香港海洋公园-香港会议展览中心、金紫荆广场-尖沙咀海滨花园-星光大道-旺角-浅水湾"},{province: "海南省",city: "各大沙滩= =天涯海角-亚龙湾-椰林-三亚"}];var newArr = [];arr.forEach(function(item, index) {//遍历每一个省console.log(item.city);//关键字if(item.city.indexOf(input) >= 0) { //返回出现位置，若为-1，则没有。newArr.push(item)}})var ne = newArr.map(function(item, index) {return "<li>" + item.province + "<br/>" +item.city + "</li>"})document.getElementById("noul").innerHTML = ne.join("");}</script></body></html>
阅读全文
0 0