DOM/BOM题库
DOM/BOM 课堂题库
购物车
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 * { 9 padding: 0; 10 margin: 0; 11 } 12 13 table { 14 width: 800px; 15 margin: 100px auto; 16 text-align: center; 17 border-collapse: collapse; 18 } 19 20 thead { 21 background-color: darkcyan; 22 } 23 24 25 tr th, 26 tr td { 27 height: 50px; 28 line-height: 50px; 29 border: 1px solid #ccc; 30 } 31 </style> 32 </head> 33 <body> 34 <table> 35 <thead> 36 <tr> 37 <th><input type="checkbox" name="" id=""> </th> 38 <th>商品</th> 39 <th>数量</th> 40 <th>价钱</th> 41 </tr> 42 </thead> 43 <tbody> 44 <!-- <tr> 45 <td><input type="checkbox" name="" id=""></td> 46 <td>华为</td> 47 <td>5000</td> 48 </tr> 49 <tr> 50 <td><input type="checkbox" name="" id=""></td> 51 <td>华为</td> 52 <td>5000</td> 53 </tr> 54 <tr> 55 <td><input type="checkbox" name="" id=""></td> 56 <td>华为</td> 57 <td>5000</td> 58 </tr> 59 <tr> 60 <td><input type="checkbox" name="" id=""></td> 61 <td>华为</td> 62 <td>5000</td> 63 </tr> --> 64 </tbody> 65 <tfoot> 66 <tr> 67 <td>总价</td> 68 <td colspan="3" ></td> 69 </tr> 70 </tfoot> 71 </table> 72 <script> 73 // 商品列表 74 let proList = [ 75 { name: 'iPone8', count:1, price: '8000' }, 76 { name: 'ipad Pro', count:2, price: '500' }, 77 { name: 'iPad Air', count:3, price: '2000' }, 78 { name: 'Apple Watch', count:4, price: '2000' } 79 ]; 80 81 // 获取元素对象 82 // 全选 83 let all = document.querySelector('thead input'); 84 85 // tbody 86 let tbody = document.querySelector('tbody'); 87 88 89 // 渲染tbody页面后 才能获取到 tbody中的元素 否则获取不到 90 for (let i = 0; i < proList.length; i++ ) { 91 tbody.innerHTML += ` 92 <tr> 93 <td><input type="checkbox" name="" id=""></td> 94 <td>${proList[i].name}</td> 95 <td>${proList[i].count}</td> 96 <td>${proList[i].price}</td> 97 </tr> 98 `; 99 } 100 101 102 103 // tbody 中复选框 104 let lis = document.querySelectorAll('tbody input'); 105 // 总价 106 let tr = document.querySelector('tfoot tr'); 107 108 // 全选功能 109 all.onclick = function () { 110 for (let i = 0; i < lis.length; i++) { 111 lis[i].checked = all.checked; 112 } 113 114 // 计算价格 115 tr.lastElementChild.innerHTML = getPrice(); 116 } 117 118 119 // 单选功能 120 // 绑定单选事件 121 for (let i = 0; i < lis.length; i++) { 122 lis[i].onclick = function () { 123 // 设置全选 124 all.checked = isAll(); 125 // 计算价格 126 tr.lastElementChild.innerHTML = getPrice(); 127 } 128 } 129 130 131 // 是否全选 132 function isAll () { 133 let num = 0; // 复选框选中的个数 134 for (let i = 0; i < lis.length; i++) { 135 // 选中 136 if (lis[i].checked == true) { 137 num +=1; 138 } 139 } 140 return num == lis.length; 141 } 142 143 144 // 重新计算价格 145 function getPrice () { 146 let sum = 0; 147 for (let i = 0; i < lis.length; i++ ) { 148 if (lis[i].checked) { 149 let tr = lis[i].parentNode.parentNode; 150 sum += tr.children[2].innerHTML * tr.children[3].innerHTML; 151 } 152 } 153 154 return sum; 155 } 156 157 158 </script> 159 160 161 </body> 162 </html>
微博发布案例
主：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="css/weibo.css"> 10 </head> 11 12 <body> 13 <div class="w"> 14 <div class="controls"> 15 <img src="images/tip.png" alt=""><br> 16 <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea> 17 <div> 18 <span class="useCount">0</span> 19 <span>/</span> 20 <span>200</span> 21 <button id="send">发布</button> 22 </div> 23 24 </div> 25 <div class="contentList"> 26 <ul> 27 <!-- 微博的模板 --> 28 <!-- <li> 29 <div class="info"> 30 <img src="./images/07-魏延.jpg"> 31 <span>魏延</span> 32 <p>2020-12-23 09:38:38</p> 33 </div> 34 <div class="content"> 35 我爱编程,编程使我快乐 36 </div> 37 <div class="del"> 38 <span>删除</span> 39 </div> 40 </li> --> 41 </ul> 42 </div> 43 </div> 44 <!-- js操作 --> 45 <script> 46 // 1.1 列表,渲染页面列表的数据 47 let list = []; 48 49 // 1.2 生成随机头像和随机姓名的数据列表 50 let users = [{ 51 src: './images/01-常遇春.jpg', 52 name: '常遇春', 53 }, 54 { 55 src: './images/02-徐延昭.jpg', 56 name: '徐延昭' 57 }, 58 { 59 src: './images/03-花振芳.jpg', 60 name: '花振芳' 61 }, 62 { 63 src: './images/04-濮天雕.jpg', 64 name: '濮天雕' 65 }, 66 { 67 src: './images/05-费德功.jpg', 68 name: '费德功' 69 }, 70 { 71 src: './images/06-窦尔敦.jpg', 72 name: '窦尔敦' 73 }, 74 { 75 src: './images/07-魏延.jpg', 76 name: '魏延' 77 } 78 ]; 79 80 // 2 获取需要的dom元素 81 // 文本域的dom元素对象 82 let area = document.querySelector('#area'); 83 // 发送 84 let send = document.querySelector('#send'); 85 // 输入字符串内容的个数 86 let useCount = document.querySelector('.useCount'); 87 // 用户评论列表的ul容器 88 let ul = document.querySelector('ul'); 89 // 本地存储 90 ul.innerHTML = sessionStorage.getItem('wul'); 91 // 3.绑定事件 92 send.addEventListener('click', function (event) { 93 // 兼容event 94 event = event || window.event; 95 // 获取用户输入的内容 判断是不是空字符串 96 if (area.value.trim() == '') { 97 alert('输入的内容不能为空,请重新输入'); 98 // 设置用户输入的内容的长度为0 99 useCount.innerHTML = '0'; 100 // 后面代码不执行 101 return; 102 } 103 104 105 // 随机下标 106 let index = getRandom(0, users.length - 1); 107 108 // 从前新增数据 109 list.unshift({ 110 name: users[index]['name'], // 随机用户名 111 src: users[index]['src'], // 用户头像 112 time: getDate(), // 评论的时间 113 text: area.value.trim() // 用户评论的内容 114 }); 115 116 // 清空文本域的内容 117 area.value = ''; 118 // 设置用户输入的内容的长度为0 119 useCount.innerHTML = '0'; 120 121 122 123 // 根据数据列表渲染页面 124 render(); 125 126 // 本地存储 127 sessionStorage.setItem('wul', ul.innerHTML); 128 129 }); 130 131 // area 文本域输入框绑定键盘弹起事件 132 // area.addEventListener('keyup', function () { 133 // // 设置用输入输入的个数 134 // useCount.innerHTML = this.value.length; 135 // }); 136 137 138 // input 事件 给表单使用 内容发生变化 会触发input 139 area.addEventListener('input', function () { 140 // 设置用输入输入的个数 141 useCount.innerHTML = this.value.length; 142 }); 143 144 145 // ul 添加点击事件 146 ul.addEventListener('click', function (e = e || window.event) { 147 // 兼容 148 // event = event || window.event; 149 // 是不是点击的删除 150 if (event.target.innerHTML == '删除') { 151 // 获取自定义属性data-index 数组下标 152 let index = +event.target.getAttribute('data-index'); 153 // 删除当前项 154 list.splice(index, 1); 155 // 从新渲染页面 156 render(); 157 } 158 159 160 }); 161 162 163 164 165 166 167 168 // let index = getRandom(0,users.length -1); 169 // console.log(users[index]); 170 171 172 173 // 封装随机数 174 function getRandom(min, max) { 175 return Math.floor(Math.random() * (max - min + 1) + min); 176 } 177 178 // 封装时间 179 function getDate() { 180 // 创建日期对象 181 let date = new Date(); 182 // 年 183 let y = date.getFullYear(); 184 // 月份 从0 开始 185 let m = date.getMonth() + 1; 186 // 日 187 let d = date.getDate(); 188 // 时 189 let h = date.getHours(); 190 // 分 191 let mm = date.getMinutes(); 192 // 秒 193 let s = date.getSeconds(); 194 195 return `${y}-${m}-${d} ${h}:${mm}:${s}`; 196 } 197 198 199 // 封装渲染用户列表的页面 200 function render() { 201 ul.innerHTML = list.map(function (item, index) { 202 return ` <li> 203 <div class="info"> 204 <img src="${item.src}"> 205 <span>${item.name}</span> 206 <p>${item.time}</p> 207 </div> 208 <div class="content"> 209 ${item.text} 210 </div> 211 <div class="del"> 212 <span data-index=${index}>删除</span> 213 </div> 214 </li> 215 `; 216 }).join(''); 217 } 218 </script> 219 </body> 220 221 </html>
副：
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 ul { 6 list-style: none; 7 } 8 .w { 9 width: 900px; 10 margin:0 auto; 11 } 12 .controls textarea { 13 width: 878px; 14 height: 100px; 15 resize: none; 16 border-radius: 10px; 17 outline:none; 18 padding-left: 20px; 19 padding-top:10px; 20 font-size: 18px; 21 } 22 .controls { 23 overflow: hidden; 24 } 25 26 .controls div { 27 float: right; 28 } 29 .controls div span { 30 color:#666; 31 } 32 .controls div .useCount { 33 color:red; 34 } 35 .controls div button { 36 width: 100px; 37 outline: none; 38 border:none; 39 background: rgb(0, 132, 255); 40 height: 30px; 41 cursor: pointer; 42 color:#fff; 43 font:bold 14px '宋体'; 44 transition: all 0.5s; 45 } 46 .controls div button:hover { 47 background: rgb(0, 225, 255); 48 } 49 .controls div button:disabled { 50 background: rgba(0, 225, 255,0.5); 51 } 52 .contentList { 53 margin-top:50px; 54 } 55 .contentList li { 56 padding: 20px 0; 57 border-bottom: 1px dashed #ccc; 58 } 59 .contentList li .info { 60 position: relative; 61 } 62 .contentList li .info span { 63 position: absolute; 64 top:15px; 65 left:100px; 66 font:bold 16px '宋体'; 67 } 68 .contentList li .info p { 69 position: absolute; 70 top:40px; 71 left: 100px; 72 color:#aaa; 73 font-size: 12px; 74 } 75 .contentList img { 76 width: 80px; 77 border-radius: 50%; 78 border: 1px solid red; 79 } 80 .contentList li .content { 81 padding-left: 100px; 82 color: #666; 83 word-break: break-all; 84 } 85 86 .contentList li .del{ 87 margin-left: 800px; 88 margin-top: -30px; 89 background-color: green; 90 color:#fff; 91 padding: 5px 0; 92 text-align: center; 93 } 94 95 .contentList li .del span{ 96 display: block; 97 }
分页(数据库渲染)
主：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 padding: 0; 12 margin: 0; 13 list-style: none; 14 } 15 16 .warp { 17 margin: 100px auto; 18 19 } 20 21 .warp ul { 22 margin-bottom: 50px; 23 margin-left: 200px; 24 } 25 26 .page { 27 margin-left: 200px; 28 display: flex; 29 /* text-align: center; */ 30 } 31 32 .page span { 33 display: inline-block; 34 width: 36px; 35 height: 36px; 36 line-height: 36px; 37 text-align: center; 38 border: 1px solid #ddd; 39 border-radius: 8px; 40 margin: 0 8px; 41 } 42 43 .page span.active { 44 background-color: green; 45 color: #fff; 46 } 47 48 .prev, 49 .next { 50 width: 50px; 51 height: 36px; 52 line-height: 36px; 53 text-align: center; 54 border: 1px solid #ddd; 55 border-radius: 8px; 56 } 57 58 .select { 59 margin-left: 20px; 60 width: 50px; 61 } 62 </style> 63 </head> 64 65 <body> 66 <div class="warp"> 67 <ul> 68 <!-- <li>第一项</li> 69 <li>dierxiang</li> 70 <li>askhdjkcs</li> --> 71 </ul> 72 <div class="page"> 73 <div class="prev">上一页</div> 74 <div class="content"> 75 <!-- <span>1</span> 76 <span>2</span> 77 <span>3</span> --> 78 </div> 79 <div class="next">下一页</div> 80 <select name="" id="" class="select"> 81 <!-- <option>10<option> 82 <option>20<option> --> 83 </select> 84 85 </div> 86 </div> 87 <script src="./data.js"></script> 88 <script> 89 // 1.获取ul 90 let ul = document.querySelector('ul'); 91 // 2.获取页码容器 92 let content = document.querySelector('.content'); 93 // 3.一页显示10条数据 94 let pageSize = 10; 95 // 4.当前页码 96 let pageIndex = 1; 97 // 5.总共多少页 98 let pageCount = Math.ceil( data.data.length / pageSize); 99 // 6.当前页的数据 100 let list = []; 101 // 7.渲染内容 102 render(); 103 // 8.渲染页码 104 renderPage() 105 // 9.给页码绑定点击事件 106 content.addEventListener('click',function (e = e || window.event) { 107 if (e.target.nodeName == 'SPAN') { 108 // 点击第几页 109 pageIndex = +e.target.getAttribute('data-index'); 110 console.log(pageIndex,'pageIndex'); 111 // 重新渲染页面 112 render(); 113 // 渲染页码 114 renderPage(); 115 } 116 }); 117 118 119 // 第一页 120 // 第1-第10条数据 121 // data.data.slice(0,10) 对应下标0-10 122 123 // 第二页 124 // 11-20 125 // data.data.slice(10,20) 126 127 // 第页 128 // 21-30 129 // data.data.slice(20,30) 130 131 // data.data.slice((页码-1)*一页显示的数量, 页码*一页显示的数量 ) 132 data.data.slice((pageIndex-1)* pageSize, pageIndex*pageSize ) 133 134 135 136 137 138 139 140 141 // 渲染内容 142 function render () { 143 // 当前页数据源 144 list = data.data.slice((pageIndex -1) * pageSize, pageIndex * pageSize); 145 ul.innerHTML = list.map(function (item) { 146 return `<li>${item.Name}</li>`; 147 }).join(''); 148 } 149 150 // 渲染页码 151 function renderPage () { 152 let str = ''; 153 for (let i = 1; i <=pageCount; i++) { 154 str += `<span data-index = ${i} class=${ pageIndex == i ? 'active' :'' } >${i}</span>`; 155 } 156 content.innerHTML = str; 157 } 158 </script> 159 </body> 160 161 </html>
副：
1 let list = { 2 "code": 1, 3 "msg": "成功", 4 "data": [{ 5 "MasterID": "9", 6 "Name": "奥迪", 7 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_9_100.png", 8 "Spelling": "Aodi", 9 "tagurl": "http:\/\/picture.eclicks.cn\/g1\/l\/2017\/09\/22\/c3c70104705ff62e_86_32.png" 10 }, { 11 "MasterID": "97", 12 "Name": "阿斯顿·马丁", 13 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_97_100.png", 14 "Spelling": "Asidunmading", 15 "tagurl": "" 16 }, { 17 "MasterID": "92", 18 "Name": "阿尔法·罗密欧", 19 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_92_100.png", 20 "Spelling": "Aerfaluomiou", 21 "tagurl": "" 22 }, { 23 "MasterID": "289", 24 "Name": "ARCFOX", 25 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_289_100.png", 26 "Spelling": "ARCFOX", 27 "tagurl": "" 28 }, { 29 "MasterID": "26", 30 "Name": "本田", 31 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_26_100.png", 32 "Spelling": "Bentian", 33 "tagurl": "http:\/\/picture.eclicks.cn\/g1\/l\/2017\/09\/22\/410af256c1e43e55_86_32.png" 34 }, { 35 "MasterID": "2", 36 "Name": "奔驰", 37 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_2_100.png", 38 "Spelling": "Benchi", 39 "tagurl": "" 40 }, { 41 "MasterID": "127", 42 "Name": "别克", 43 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_127_100.png", 44 "Spelling": "Bieke", 45 "tagurl": "http:\/\/picture.eclicks.cn\/g1\/l\/2017\/09\/22\/0e673462afde3a3b_86_32.png" 46 }, { 47 "MasterID": "3", 48 "Name": "宝马", 49 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_3_100.png", 50 "Spelling": "Baoma", 51 "tagurl": "" 52 }, { 53 "MasterID": "15", 54 "Name": "比亚迪", 55 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_15_100.png", 56 "Spelling": "Biyadi", 57 "tagurl": "" 58 }, { 59 "MasterID": "157", 60 "Name": "宝骏", 61 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_157_100.png", 62 "Spelling": "Baojun", 63 "tagurl": "http:\/\/picture.eclicks.cn\/g1\/l\/2016\/09\/29\/14a3548ac14e4247_86_32.png" 64 }, { 65 "MasterID": "5", 66 "Name": "标致", 67 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_5_100.png", 68 "Spelling": "Biaozhi", 69 "tagurl": "" 70 }, { 71 "MasterID": "82", 72 "Name": "保时捷", 73 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_82_100.png", 74 "Spelling": "Baoshijie", 75 "tagurl": "" 76 }, { 77 "MasterID": "163", 78 "Name": "北京", 79 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_163_100.png", 80 "Spelling": "Beijing", 81 "tagurl": "" 82 }, { 83 "MasterID": "211", 84 "Name": "北汽幻速", 85 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_211_100.png", 86 "Spelling": "Beiqihuansu", 87 "tagurl": "" 88 }, { 89 "MasterID": "195", 90 "Name": "北汽绅宝", 91 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_195_100.png", 92 "Spelling": "Beiqishenbao", 93 "tagurl": "" 94 }, { 95 "MasterID": "59", 96 "Name": "奔腾", 97 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_59_100.png", 98 "Spelling": "Benteng", 99 "tagurl": "" 100 }, { 101 "MasterID": "236", 102 "Name": "宝沃", 103 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_236_100.png", 104 "Spelling": "Baowo", 105 "tagurl": "" 106 }, { 107 "MasterID": "85", 108 "Name": "宾利", 109 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_85_100.png", 110 "Spelling": "Binli", 111 "tagurl": "" 112 }, { 113 "MasterID": "14", 114 "Name": "北汽制造", 115 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_14_100.png", 116 "Spelling": "Beiqizhizao", 117 "tagurl": "" 118 }, { 119 "MasterID": "168", 120 "Name": "北汽威旺", 121 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_168_100.png", 122 "Spelling": "Beiqiweiwang", 123 "tagurl": "" 124 }, { 125 "MasterID": "216", 126 "Name": "北汽新能源", 127 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_216_100.png", 128 "Spelling": "Beiqixinnengyuan", 129 "tagurl": "" 130 }, { 131 "MasterID": "263", 132 "Name": "比速", 133 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_263_100.png", 134 "Spelling": "Bisu", 135 "tagurl": "" 136 }, { 137 "MasterID": "129", 138 "Name": "北汽昌河", 139 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_129_100.png", 140 "Spelling": "BEIQICHANGHE", 141 "tagurl": "" 142 }, { 143 "MasterID": "282", 144 "Name": "北汽道达", 145 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_282_100.png", 146 "Spelling": "BEIQIDAODA", 147 "tagurl": "" 148 }, { 149 "MasterID": "136", 150 "Name": "长安汽车", 151 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_136_100.png", 152 "Spelling": "CHANGANQICHE", 153 "tagurl": "" 154 }, { 155 "MasterID": "159", 156 "Name": "长安欧尚", 157 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_159_100.png", 158 "Spelling": "Changanoushang", 159 "tagurl": "" 160 }, { 161 "MasterID": "21", 162 "Name": "长城", 163 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_21_100.png", 164 "Spelling": "Changcheng", 165 "tagurl": "" 166 }, { 167 "MasterID": "281", 168 "Name": "长安轻型车", 169 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_281_100.png", 170 "Spelling": "CHANGANQINGXINGCHE", 171 "tagurl": "" 172 }, { 173 "MasterID": "283", 174 "Name": "长安跨越", 175 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_283_100.png", 176 "Spelling": "CHANGANKUAYUE", 177 "tagurl": "" 178 }, { 179 "MasterID": "8", 180 "Name": "大众", 181 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_8_100.png", 182 "Spelling": "Dazhong", 183 "tagurl": "http:\/\/picture.eclicks.cn\/g1\/l\/2016\/09\/29\/cf80cb915f060f26_86_32.png" 184 }, { 185 "MasterID": "115", 186 "Name": "东风风行", 187 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_115_100.png", 188 "Spelling": "Dongfengfengxing", 189 "tagurl": "" 190 }, { 191 "MasterID": "253", 192 "Name": "东风风光", 193 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_253_100.png", 194 "Spelling": "Dongfengfengguang", 195 "tagurl": "" 196 }, { 197 "MasterID": "141", 198 "Name": "东风风神", 199 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_141_100.png", 200 "Spelling": "Dongfengfengshen", 201 "tagurl": "" 202 }, { 203 "MasterID": "29", 204 "Name": "东南", 205 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_29_100.png", 206 "Spelling": "Dongnan", 207 "tagurl": "" 208 }, { 209 "MasterID": "113", 210 "Name": "道奇", 211 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_113_100.png", 212 "Spelling": "Daoqi", 213 "tagurl": "" 214 }, { 215 "MasterID": "179", 216 "Name": "DS", 217 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_179_100.png", 218 "Spelling": "Ds", 219 "tagurl": "" 220 }, { 221 "MasterID": "205", 222 "Name": "东风小康", 223 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_205_100.png", 224 "Spelling": "Dongfengxiaokang", 225 "tagurl": "" 226 }, { 227 "MasterID": "197", 228 "Name": "东风风度", 229 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_197_100.png", 230 "Spelling": "Dongfengfengdu", 231 "tagurl": "" 232 }, { 233 "MasterID": "27", 234 "Name": "东风", 235 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_27_100.png", 236 "Spelling": "Dongfeng", 237 "tagurl": "" 238 }, { 239 "MasterID": "294", 240 "Name": "电咖", 241 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_294_100.png", 242 "Spelling": "DIANKA", 243 "tagurl": "" 244 }, { 245 "MasterID": "7", 246 "Name": "丰田", 247 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_7_100.png", 248 "Spelling": "Fengtian", 249 "tagurl": "" 250 }, { 251 "MasterID": "17", 252 "Name": "福特", 253 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_17_100.png", 254 "Spelling": "Fute", 255 "tagurl": "http:\/\/picture.eclicks.cn\/g1\/l\/2016\/09\/29\/644268f586e023c8_86_32.png" 256 }, { 257 "MasterID": "91", 258 "Name": "法拉利", 259 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_91_100.png", 260 "Spelling": "Falali", 261 "tagurl": "" 262 }, { 263 "MasterID": "128", 264 "Name": "福田", 265 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_128_100.png", 266 "Spelling": "Futian", 267 "tagurl": "" 268 }, { 269 "MasterID": "40", 270 "Name": "菲亚特", 271 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_40_100.png", 272 "Spelling": "Feiyate", 273 "tagurl": "" 274 }, { 275 "MasterID": "67", 276 "Name": "福迪", 277 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_67_100.png", 278 "Spelling": "Fudi", 279 "tagurl": "" 280 }, { 281 "MasterID": "208", 282 "Name": "福汽启腾", 283 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_208_100.png", 284 "Spelling": "Fuqiqiteng", 285 "tagurl": "" 286 }, { 287 "MasterID": "147", 288 "Name": "广汽传祺", 289 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_147_100.png", 290 "Spelling": "Guangqichuanqi", 291 "tagurl": "" 292 }, { 293 "MasterID": "182", 294 "Name": "观致", 295 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_182_100.png", 296 "Spelling": "Guangzhi", 297 "tagurl": "" 298 }, { 299 "MasterID": "109", 300 "Name": "GMC", 301 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_109_100.png", 302 "Spelling": "Gmc", 303 "tagurl": "" 304 }, { 305 "MasterID": "63", 306 "Name": "广汽吉奥", 307 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_63_100.png", 308 "Spelling": "Guangqijiao", 309 "tagurl": "" 310 }, { 311 "MasterID": "290", 312 "Name": "国金", 313 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_290_100.png", 314 "Spelling": "GUOJIN", 315 "tagurl": "" 316 }, { 317 "MasterID": "295", 318 "Name": "广汽新能源", 319 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_295_100.png", 320 "Spelling": "GUANGQIXINNENGYUAN", 321 "tagurl": "" 322 }, { 323 "MasterID": "196", 324 "Name": "哈弗", 325 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_196_100.png", 326 "Spelling": "Hafu", 327 "tagurl": "http:\/\/picture.eclicks.cn\/g1\/l\/2016\/09\/21\/858acf18f497dfb3_86_32.png" 328 }, { 329 "MasterID": "32", 330 "Name": "海马", 331 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_32_100.png", 332 "Spelling": "Haima", 333 "tagurl": "" 334 }, { 335 "MasterID": "58", 336 "Name": "红旗", 337 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_58_100.png", 338 "Spelling": "Hongqi", 339 "tagurl": "" 340 }, { 341 "MasterID": "259", 342 "Name": "汉腾", 343 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_259_100.png", 344 "Spelling": "Hanteng", 345 "tagurl": "" 346 }, { 347 "MasterID": "112", 348 "Name": "华泰", 349 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_112_100.png", 350 "Spelling": "Huatai", 351 "tagurl": "" 352 }, { 353 "MasterID": "52", 354 "Name": "黄海", 355 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_52_100.png", 356 "Spelling": "Huanghai", 357 "tagurl": "" 358 }, { 359 "MasterID": "225", 360 "Name": "华颂", 361 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_225_100.png", 362 "Spelling": "Huasong", 363 "tagurl": "" 364 }, { 365 "MasterID": "181", 366 "Name": "恒天", 367 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_181_100.png", 368 "Spelling": "Hengtian", 369 "tagurl": "" 370 }, { 371 "MasterID": "292", 372 "Name": "华骐", 373 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_292_100.png", 374 "Spelling": "HUAQI", 375 "tagurl": "" 376 }, { 377 "MasterID": "34", 378 "Name": "吉利", 379 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_34_100.png", 380 "Spelling": "Jili", 381 "tagurl": "http:\/\/picture.eclicks.cn\/g1\/l\/2017\/09\/22\/fb6d758f38036da0_86_32.png" 382 }, { 383 "MasterID": "4", 384 "Name": "Jeep", 385 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_4_100.png", 386 "Spelling": "Jipu", 387 "tagurl": "" 388 }, { 389 "MasterID": "35", 390 "Name": "江淮", 391 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_35_100.png", 392 "Spelling": "Jianghuai", 393 "tagurl": "" 394 }, { 395 "MasterID": "98", 396 "Name": "捷豹", 397 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_98_100.png", 398 "Spelling": "Jiebao", 399 "tagurl": "" 400 }, { 401 "MasterID": "39", 402 "Name": "金杯", 403 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_39_100.png", 404 "Spelling": "Jinbei", 405 "tagurl": "" 406 }, { 407 "MasterID": "37", 408 "Name": "江铃", 409 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_37_100.png", 410 "Spelling": "Jiangling", 411 "tagurl": "" 412 }, { 413 "MasterID": "57", 414 "Name": "金龙", 415 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_57_100.png", 416 "Spelling": "Jinlong", 417 "tagurl": "" 418 }, { 419 "MasterID": "152", 420 "Name": "九龙", 421 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_152_100.png", 422 "Spelling": "Jiulong", 423 "tagurl": "" 424 }, { 425 "MasterID": "279", 426 "Name": "君马", 427 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_279_100.png", 428 "Spelling": "Junma", 429 "tagurl": "" 430 }, { 431 "MasterID": "296", 432 "Name": "捷途", 433 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_296_100.png", 434 "Spelling": "JIETU", 435 "tagurl": "" 436 }, { 437 "MasterID": "107", 438 "Name": "凯迪拉克", 439 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_107_100.png", 440 "Spelling": "Kaidilake", 441 "tagurl": "" 442 }, { 443 "MasterID": "220", 444 "Name": "凯翼", 445 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_220_100.png", 446 "Spelling": "Kaiyi", 447 "tagurl": "" 448 }, { 449 "MasterID": "150", 450 "Name": "开瑞", 451 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_150_100.png", 452 "Spelling": "Kairui", 453 "tagurl": "" 454 }, { 455 "MasterID": "51", 456 "Name": "克莱斯勒", 457 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_51_100.png", 458 "Spelling": "Kelaisile", 459 "tagurl": "" 460 }, { 461 "MasterID": "214", 462 "Name": "卡升", 463 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_214_100.png", 464 "Spelling": "Kasheng", 465 "tagurl": "" 466 }, { 467 "MasterID": "213", 468 "Name": "卡威", 469 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_213_100.png", 470 "Spelling": "Kawei", 471 "tagurl": "" 472 }, { 473 "MasterID": "96", 474 "Name": "路虎", 475 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_96_100.png", 476 "Spelling": "Luhu", 477 "tagurl": "" 478 }, { 479 "MasterID": "94", 480 "Name": "雷克萨斯", 481 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_94_100.png", 482 "Spelling": "Leikesasi", 483 "tagurl": "" 484 }, { 485 "MasterID": "36", 486 "Name": "陆风", 487 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_36_100.png", 488 "Spelling": "Lufeng", 489 "tagurl": "" 490 }, { 491 "MasterID": "16", 492 "Name": "铃木", 493 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_16_100.png", 494 "Spelling": "Lingmu", 495 "tagurl": "" 496 }, { 497 "MasterID": "153", 498 "Name": "猎豹", 499 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_153_100.png", 500 "Spelling": "Liebao", 501 "tagurl": "" 502 }, { 503 "MasterID": "99", 504 "Name": "雷诺", 505 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_99_100.png", 506 "Spelling": "Leinuo", 507 "tagurl": "" 508 }, { 509 "MasterID": "95", 510 "Name": "林肯", 511 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_95_100.png", 512 "Spelling": "Linken", 513 "tagurl": "" 514 }, { 515 "MasterID": "76", 516 "Name": "力帆", 517 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_76_100.png", 518 "Spelling": "Lifan", 519 "tagurl": "" 520 }, { 521 "MasterID": "86", 522 "Name": "兰博基尼", 523 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_86_100.png", 524 "Spelling": "Lanbojini", 525 "tagurl": "" 526 }, { 527 "MasterID": "80", 528 "Name": "劳斯莱斯", 529 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_80_100.png", 530 "Spelling": "Laosilaisi", 531 "tagurl": "" 532 }, { 533 "MasterID": "83", 534 "Name": "路特斯", 535 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_83_100.png", 536 "Spelling": "Lutesi", 537 "tagurl": "" 538 }, { 539 "MasterID": "267", 540 "Name": "领克", 541 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_267_100.png", 542 "Spelling": "Lingke", 543 "tagurl": "" 544 }, { 545 "MasterID": "18", 546 "Name": "马自达", 547 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_18_100.png", 548 "Spelling": "Mazida", 549 "tagurl": "http:\/\/picture.eclicks.cn\/g1\/l\/2016\/09\/21\/6202bb9b632ea532_86_32.png" 550 }, { 551 "MasterID": "93", 552 "Name": "玛莎拉蒂", 553 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_93_100.png", 554 "Spelling": "Mashaladi", 555 "tagurl": "" 556 }, { 557 "MasterID": "79", 558 "Name": "名爵", 559 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_79_100.png", 560 "Spelling": "Mingjue", 561 "tagurl": "" 562 }, { 563 "MasterID": "81", 564 "Name": "MINI", 565 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_81_100.png", 566 "Spelling": "Mini", 567 "tagurl": "" 568 }, { 569 "MasterID": "183", 570 "Name": "迈凯伦", 571 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_183_100.png", 572 "Spelling": "Maikailun", 573 "tagurl": "" 574 }, { 575 "MasterID": "155", 576 "Name": "纳智捷", 577 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_155_100.png", 578 "Spelling": "Nazhijie", 579 "tagurl": "" 580 }, { 581 "MasterID": "300", 582 "Name": "欧尚汽车", 583 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_300_100.png", 584 "Spelling": "OUSHANGQICHE", 585 "tagurl": "" 586 }, { 587 "MasterID": "84", 588 "Name": "讴歌", 589 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_84_100.png", 590 "Spelling": "Ouge", 591 "tagurl": "" 592 }, { 593 "MasterID": "231", 594 "Name": "前途", 595 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_231_100.png", 596 "Spelling": "Qiantu", 597 "tagurl": "" 598 }, { 599 "MasterID": "28", 600 "Name": "起亚", 601 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_28_100.png", 602 "Spelling": "Qiya", 603 "tagurl": "" 604 }, { 605 "MasterID": "42", 606 "Name": "奇瑞", 607 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_42_100.png", 608 "Spelling": "Qirui", 609 "tagurl": "http:\/\/picture.eclicks.cn\/g1\/l\/2016\/09\/29\/a048876e75aac1f9_86_32.png" 610 }, { 611 "MasterID": "43", 612 "Name": "庆铃", 613 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_43_100.png", 614 "Spelling": "Qingling", 615 "tagurl": "" 616 }, { 617 "MasterID": "156", 618 "Name": "启辰", 619 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_156_100.png", 620 "Spelling": "Qichen", 621 "tagurl": "" 622 }, { 623 "MasterID": "30", 624 "Name": "日产", 625 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_30_100.png", 626 "Spelling": "Richan", 627 "tagurl": "" 628 }, { 629 "MasterID": "78", 630 "Name": "荣威", 631 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_78_100.png", 632 "Spelling": "Rongwei", 633 "tagurl": "" 634 }, { 635 "MasterID": "10", 636 "Name": "斯柯达", 637 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_10_100.png", 638 "Spelling": "Sikeda", 639 "tagurl": "" 640 }, { 641 "MasterID": "25", 642 "Name": "三菱", 643 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_25_100.png", 644 "Spelling": "Sanling", 645 "tagurl": "" 646 }, { 647 "MasterID": "111", 648 "Name": "斯巴鲁", 649 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_111_100.png", 650 "Spelling": "Sibalu", 651 "tagurl": "" 652 }, { 653 "MasterID": "165", 654 "Name": "上汽大通", 655 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_165_100.png", 656 "Spelling": "Shangqidatong", 657 "tagurl": "" 658 }, { 659 "MasterID": "102", 660 "Name": "双龙", 661 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_102_100.png", 662 "Spelling": "Shuanglong", 663 "tagurl": "" 664 }, { 665 "MasterID": "89", 666 "Name": "smart", 667 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_89_100.png", 668 "Spelling": "Smart", 669 "tagurl": "" 670 }, { 671 "MasterID": "260", 672 "Name": "SWM斯威", 673 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_260_100.png", 674 "Spelling": "Swmsiwei", 675 "tagurl": "" 676 }, { 677 "MasterID": "244", 678 "Name": "上喆汽车", 679 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_244_100.png", 680 "Spelling": "S", 681 "tagurl": "" 682 }, { 683 "MasterID": "189", 684 "Name": "特斯拉", 685 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_189_100.png", 686 "Spelling": "Tesila", 687 "tagurl": "" 688 }, { 689 "MasterID": "175", 690 "Name": "腾势", 691 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_175_100.png", 692 "Spelling": "Tngshi", 693 "tagurl": "" 694 }, { 695 "MasterID": "202", 696 "Name": "泰卡特", 697 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_202_100.png", 698 "Spelling": "Taikate", 699 "tagurl": "" 700 }, { 701 "MasterID": "48", 702 "Name": "五菱", 703 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_48_100.png", 704 "Spelling": "Wuling", 705 "tagurl": "" 706 }, { 707 "MasterID": "19", 708 "Name": "沃尔沃", 709 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_19_100.png", 710 "Spelling": "Woerwo", 711 "tagurl": "" 712 }, { 713 "MasterID": "132", 714 "Name": "五十铃", 715 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_132_100.png", 716 "Spelling": "Wushiling", 717 "tagurl": "" 718 }, { 719 "MasterID": "207", 720 "Name": "潍柴英致", 721 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_207_100.png", 722 "Spelling": "Weichaiyingzhi", 723 "tagurl": "" 724 }, { 725 "MasterID": "266", 726 "Name": "蔚来", 727 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_266_100.png", 728 "Spelling": "Weilai", 729 "tagurl": "" 730 }, { 731 "MasterID": "270", 732 "Name": "WEY", 733 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_270_100.png", 734 "Spelling": "Wei", 735 "tagurl": "" 736 }, { 737 "MasterID": "298", 738 "Name": "威马汽车", 739 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_298_100.png", 740 "Spelling": "WEIMAQICHE", 741 "tagurl": "" 742 }, { 743 "MasterID": "13", 744 "Name": "现代", 745 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_13_100.png", 746 "Spelling": "Xiandai", 747 "tagurl": "http:\/\/picture.eclicks.cn\/g1\/l\/2016\/09\/29\/5f2e2fc0c06078d5_86_32.png" 748 }, { 749 "MasterID": "49", 750 "Name": "雪佛兰", 751 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_49_100.png", 752 "Spelling": "Xuefolan", 753 "tagurl": "" 754 }, { 755 "MasterID": "6", 756 "Name": "雪铁龙", 757 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_6_100.png", 758 "Spelling": "Xuetielong", 759 "tagurl": "" 760 }, { 761 "MasterID": "87", 762 "Name": "西雅特", 763 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_87_100.png", 764 "Spelling": "Xiyate", 765 "tagurl": "" 766 }, { 767 "MasterID": "286", 768 "Name": "星驰", 769 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_286_100.png", 770 "Spelling": "XINGCHI", 771 "tagurl": "" 772 }, { 773 "MasterID": "100", 774 "Name": "英菲尼迪", 775 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_100_100.png", 776 "Spelling": "Yingfeinidi", 777 "tagurl": "" 778 }, { 779 "MasterID": "53", 780 "Name": "一汽", 781 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_53_100.png", 782 "Spelling": "Yiqi", 783 "tagurl": "" 784 }, { 785 "MasterID": "258", 786 "Name": "驭胜", 787 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_258_100.png", 788 "Spelling": "Yusheng", 789 "tagurl": "" 790 }, { 791 "MasterID": "138", 792 "Name": "野马", 793 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_138_100.png", 794 "Spelling": "Yema", 795 "tagurl": "" 796 }, { 797 "MasterID": "41", 798 "Name": "依维柯", 799 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_41_100.png", 800 "Spelling": "Yiweike", 801 "tagurl": "" 802 }, { 803 "MasterID": "75", 804 "Name": "永源", 805 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_75_100.png", 806 "Spelling": "Yongyuan", 807 "tagurl": "" 808 }, { 809 "MasterID": "194", 810 "Name": "亚星客车", 811 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_194_100.png", 812 "Spelling": "Yaxingkeche", 813 "tagurl": "" 814 }, { 815 "MasterID": "285", 816 "Name": "云度", 817 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_285_100.png", 818 "Spelling": "YUNDU", 819 "tagurl": "" 820 }, { 821 "MasterID": "291", 822 "Name": "裕路", 823 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_291_100.png", 824 "Spelling": "YULU", 825 "tagurl": "" 826 }, { 827 "MasterID": "77", 828 "Name": "众泰", 829 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_77_100.png", 830 "Spelling": "Zhongtai", 831 "tagurl": "" 832 }, { 833 "MasterID": "60", 834 "Name": "中华", 835 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_60_100.png", 836 "Spelling": "Zhonghua", 837 "tagurl": "" 838 }, { 839 "MasterID": "33", 840 "Name": "中兴", 841 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_33_100.png", 842 "Spelling": "Zhongxing", 843 "tagurl": "" 844 }, { 845 "MasterID": "233", 846 "Name": "知豆", 847 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_233_100.png", 848 "Spelling": "Zhidou", 849 "tagurl": "" 850 }, { 851 "MasterID": "203", 852 "Name": "之诺", 853 "CoverPhoto": "http:\/\/image.bitautoimg.com\/bt\/car\/default\/images\/logo\/masterbrand\/png\/100\/m_203_100.png", 854 "Spelling": "Zhinuo", 855 "tagurl": "" 856 }], 857 "timestamp": 1544535759, 858 "version": 1 859 } 860 861 862 let content = document.querySelector('.content'); 863 console.log(Math.floor(list.data.length / 10)); 864 for (let i = 1; i < list.data.length / 10; i++) { 865 let span = document.createElement('span'); 866 span.innerHTML = `${i}`; 867 content.appendChild(span); 868 } 869 870 871 let spans = document.querySelectorAll('span'); 872 let ul = document.querySelector('ul'); 873 let prev = document.querySelector('.prev'); 874 let next = document.querySelector('.next'); 875 let act = 0; 876 for (let i = 0; i < Math.floor(list.data.length / 10) ; i++) { 877 spans[i].addEventListener('click', function () { 878 for (let j = 0; j < Math.floor(list.data.length / 10); j++) { 879 spans[j].className = ''; 880 } 881 spans[i].className = 'active'; 882 883 // 渲染 884 let md = list.data.slice((i) * 10, (i + 1) * 10); 885 let add = md.map(function (items) { 886 return `<li>${items.Name}</li>`; 887 }).join(''); 888 ul.innerHTML = add; 889 act = i; 890 }) 891 892 } 893 prev.addEventListener('click', function () { 894 act--; 895 keyi(); 896 }) 897 next.addEventListener('click', function () { 898 act++; 899 keyi(); 900 }) 901 function keyi() { 902 for (let j = 0; j < Math.floor(list.data.length / 10); j++) { 903 spans[j].className = ''; 904 } 905 spans[act].className = 'active'; 906 let md = list.data.slice(act * 10, (act+1) * 10); 907 let add = md.map(function (items) { 908 return `<li>${items.Name}</li>`; 909 }).join(''); 910 ul.innerHTML = add; 911 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 * { 10 padding: 0; 11 margin: 0; 12 list-style: none; 13 } 14 15 .warp { 16 margin:100px auto; 17 18 } 19 .warp ul { 20 margin-bottom: 50px; 21 margin-left: 200px; 22 } 23 .page { 24 margin-left: 200px; 25 display: flex; 26 /* text-align: center; */ 27 } 28 .page span { 29 display: inline-block; 30 width: 36px; 31 height:36px; 32 line-height: 36px; 33 text-align: center; 34 border: 1px solid #ddd; 35 border-radius: 8px; 36 margin: 0 8px; 37 } 38 /* 666 */ 39 .page span.active{ 40 background-color: green; 41 color: #fff; 42 } 43 .prev,.next { 44 width: 50px; 45 height: 36px; 46 line-height: 36px; 47 text-align: center; 48 border:1px solid #ddd; 49 border-radius: 8px; 50 } 51 .select { 52 margin-left: 20px; 53 width: 50px; 54 } 55 56 </style> 57 </head> 58 <body> 59 <div class="warp"> 60 <ul> 61 <!-- <li>第一项</li> 62 <li>dierxiang</li> 63 <li>askhdjkcs</li> --> 64 </ul> 65 <div class="page"> 66 <div class="prev">上一页</div> 67 <div class="content"> 68 <!-- <span>1</span> 69 <span>2</span> 70 <span>3</span> --> 71 </div> 72 <div class="next">下一页</div> 73 <select name="" id="" class="select"> 74 <option>10<option> 75 <!-- <option>20<option> --> 76 </select> 77 78 </div> 79 80 81 82 </div> 83 84 </body> 85 <script src="./data.js"></script> 86 87 </html>
拖拽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .box { 9 width: 200px; 10 height: 200px; 11 background-color: pink; 12 position: absolute; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="box"></div> 18 <script> 19 // 1.获取box 20 let box = document.querySelector('.box'); 21 // 记录鼠标的坐标 22 let pos = {}; 23 // 开关 24 let flag = false; 25 26 // 2.鼠标按下 27 box.addEventListener('mousedown', function (e = e || window.event) { 28 // 打开开关 29 flag = true; 30 // 记录鼠标在盒子中的位置 31 // pos.x = e.pageX - this.offsetLeft; 32 // pos.y = e.pageY - this.offsetTop; 33 34 // 直接通过事件对象e.offsetX 得鼠标在盒子中的x坐标，e.offsetY 得到鼠标在盒子中的Y坐标 35 pos.x = e.offsetX; 36 pos.y = e.offsetY; 37 }); 38 // 3.鼠标移动 39 document.addEventListener('mousemove', function (e = e || window.event) { 40 // 发生在鼠标按下以后 41 if (flag) { 42 box.style.left = e.pageX - pos.x + 'px'; 43 box.style.top = e.pageY - pos.y + 'px'; 44 } 45 }); 46 // 4. 鼠标弹起 47 document.addEventListener('mouseup', function () { 48 // console.log(3); 49 flag = false; 50 }); 51 52 53 54 55 </script> 56 </body> 57 </html>
放大镜
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 * { 9 padding: 0; 10 margin: 0; 11 } 12 13 .wrap { 14 width: 1400px; 15 margin: 100px auto; 16 } 17 .wrap .small { 18 width: 600px; 19 height: 400px; 20 margin-right: 20px; 21 position: relative; 22 float: left; 23 } 24 25 .wrap .small img { 26 width: 600px; 27 height: 400px; 28 } 29 30 .wrap .big { 31 width: 600px; 32 height: 400px; 33 position: relative; 34 overflow: hidden; 35 display: none; 36 float: left; 37 } 38 39 .wrap .big img { 40 width: 1200px; 41 height: 800px; 42 position:absolute; 43 } 44 45 .small .mask { 46 position:absolute; 47 top: 0; 48 left: 0; 49 width: 200px; 50 height: 200px; 51 background-color: rgba(0,0,0,.5); 52 display: none; 53 } 54 55 </style> 56 </head> 57 <body> 58 <div class="wrap"> 59 <div class="small"> 60 <img src="./images/3.jpg" alt=""> 61 <div class="mask"></div> 62 </div> 63 <div class="big"> 64 <img src="./images/3.jpg" alt=""> 65 </div> 66 </div> 67 68 <script> 69 // 1.获取左侧small 70 let small = document.querySelector('.small'); 71 // 获取遮罩层 72 let mask = document.querySelector('.mask'); 73 // 获取右侧大盒子big 74 let big = document.querySelector('.big'); 75 // 获取大图片 76 let bigImg = document.querySelector('.big img'); 77 // 遮罩的坐标 78 let maskPos = {}; 79 80 // 给small添加鼠标经过 显示遮罩 和右侧大盒子big 81 small.addEventListener('mouseover', function (e = e || window.event) { 82 // 显示遮罩层 83 mask.style.display = 'block'; 84 // 显示big 85 big.style.display = 'block'; 86 }); 87 88 // 给small添加鼠标经过 显示遮罩 和右侧大盒子big 89 small.addEventListener('mouseout', function (e = e || window.event) { 90 // 显示遮罩层 91 mask.style.display = 'none'; 92 // 显示big 93 big.style.display = 'none'; 94 }); 95 96 // 给small添加mousemove事件 97 small.addEventListener('mousemove', function (e = e || window.event) { 98 // 设置遮罩的坐标,并且设置鼠标为遮罩的中心点(- mask.offsetWidth / 2) 99 maskPos.left = e.pageX - small.offsetLeft - mask.offsetWidth / 2; 100 maskPos.top = e.pageY - small.offsetTop - mask.offsetHeight / 2; 101 102 // 限制遮罩移动的范围 103 // 遮罩水平方向移动最大的距离 104 let x = small.offsetWidth - mask.offsetWidth; 105 // 遮罩垂直移动最大的距离 106 let y = small.offsetHeight - mask.offsetHeight; 107 // 水平方向最小值 108 if (maskPos.left < 0) { 109 maskPos.left = 0; 110 } 111 112 // 水平方向最大值 113 if (maskPos.left > x ) { 114 maskPos.left = x 115 } 116 // 垂直方向最小值 117 if (maskPos.top < 0) { 118 maskPos.top = 0 119 } 120 // 垂直方向最大值 121 if (maskPos.top > y ) { 122 maskPos.top = y 123 } 124 mask.style.left = maskPos.left + 'px'; 125 mask.style.top = maskPos.top + 'px'; 126 127 128 // 比例 遮挡层移动距离(maskPos.left) / 遮挡层的最大移动距离(x) = 大图片的移动距离(未知) / 大图片最大移动距离(可以计算出来) 129 // 大图片最大移动距离 130 let bigMax = bigImg.offsetWidth - big.offsetWidth; 131 132 bigImg.style.left = - maskPos.left * bigMax / x + 'px'; 133 bigImg.style.top = - maskPos.top * bigMax / y + 'px'; 134 135 }); 136 137 138 139 </script> 140 </body> 141 </html>
动画封装
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 width: 200px; 11 height: 200px; 12 background-color: pink; 13 position: absolute; 14 left: 200px; 15 top: 100px; 16 } 17 18 .p1 { 19 width: 150px; 20 height: 150px; 21 background-color: blue; 22 position: absolute; 23 top: 300px; 24 left: 0; 25 } 26 </style> 27 </head> 28 29 <body> 30 <div class="box"></div> 31 <p class="p1"></p> 32 <button>向钱进</button> 33 <script> 34 35 // 获取box 36 let box = document.querySelector('.box'); 37 let p = document.querySelector('.p1'); 38 let btn = document.querySelector('button'); 39 // animate(p, 500); 40 41 // 绑定点击事件 42 btn.addEventListener('click', function () { 43 animate(box, 1000 , function () { 44 box.style.backgroundColor = 'red'; 45 },15); 46 }); 47 48 // obj= {}; 49 // obj.name = '张三' 50 function animate(ele, target, callback,time) { 51 // 先清除上一个定时器 52 clearInterval(ele.timeId); 53 // 开启定时器 54 ele.timeId = setInterval(function () { 55 // step 每个20毫秒移动的距离 56 // 1. 步长 57 let step = (target - ele.offsetLeft) / 10; 58 step = step > 0 ? Math.ceil(step) : Math.floor(step); 59 // 3. == ? >= 60 console.log(ele.offsetLeft); 61 if (ele.offsetLeft == target) { 62 clearInterval(ele.timeId); 63 // 回调函数 64 // 0 undefined NaN null '' =>false 65 if ( typeof callback == 'function') { 66 callback(); 67 } 68 // 后面所有代码不执行 69 return; 70 } 71 // 2.移动的位置 72 ele.style.left = ele.offsetLeft + step + 'px'; 73 },time); 74 } 75 76 77 </script> 78 </body> 79 80 </html>
高级轮播图
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 * { 10 padding: 0; 11 margin: 0; 12 } 13 14 .slide { 15 width: 1000px; 16 height: 720px; 17 margin: 100px auto; 18 position: relative; 19 overflow: hidden; 20 } 21 22 .prev, 23 .next { 24 width: 80px; 25 height: 60px; 26 line-height: 60px; 27 text-align: center; 28 position: absolute; 29 top: 50%; 30 margin-top: -30px; 31 background-color: rgba(0, 0, 0, .5); 32 font-size: 36px; 33 color: #fff; 34 border-radius: 10px; 35 display: none; 36 } 37 38 .prev { 39 left: 10px; 40 } 41 42 .next { 43 right: 10px; 44 } 45 46 .nav { 47 display: flex; 48 justify-content: space-between; 49 width: 200px; 50 height: 24px; 51 position: absolute; 52 left: 50%; 53 bottom: 20px; 54 margin-left: -100px; 55 z-index: 10; 56 } 57 58 .nav span { 59 width: 20px; 60 height: 20px; 61 border-radius: 50%; 62 background-color: #fff; 63 } 64 65 .slide .active { 66 background-color: #666; 67 } 68 </style> 69 </head> 70 71 <body> 72 <div class="slide"> 73 <!-- 图片 --> 74 <img src="./imgs/1.png" alt=""> 75 <!-- 上一张 --> 76 <div class="prev"><</div> 77 <!-- 下一张 --> 78 <div class="next">></div> 79 80 <!-- 小圆圈 --> 81 <div class="nav"> 82 <!-- <span></span> 83 <span></span> 84 <span></span> 85 <span></span> --> 86 </div> 87 88 </div> 89 <script> 90 let img = document.querySelector('img'); 91 let slide = document.querySelector('.slide'); 92 let prev = document.querySelector('.prev'); 93 let next = document.querySelector('.next'); 94 let nav = document.querySelector('.nav'); 95 96 let arr = ['./imgs/1.png', './imgs/2.png', './imgs/3.png', './imgs/4.png']; 97 let i = 0; 98 autoPlay(); 99 100 // 自动轮播 101 function autoPlay() { 102 setInterval(function () { 103 i = ++i > arr.length - 1 ? 0 : i++; 104 render(); 105 }, 1000); 106 } 107 // 渲染图片 108 function render() { 109 img.src = arr[i]; 110 } 111 // 渲染圆 112 function renderpage() { 113 nav.innerHTML = arr.map(function (item, index) { 114 return `<span class = "${}"></span>`; 115 }); 116 } 117 </script> 118 </body> 119 120 </html>
思路：
- 渲染的重复使用，使用innerhtml加数组map进行渲染，结尾加join
- 三元表达式的替代if语句
- 函数内局部变量和全局变量范围
-
+e.target.getAttribute('data-index')获取自定义类名
知识点
-
e.target.nodeName == 'SPAN'；e的节点名（大写）
三级联动
1 var data = [ 2 { 3 name: '上海', 4 cityList: [{ 5 name: '市辖区', 6 areaList: ['黄浦区', '卢湾区', '徐汇区', '长宁区', '静安区', '普陀区', '闸北区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '南汇区', '奉贤区'] 7 }, 8 { 9 name: '县', 10 areaList: ['崇明县'] 11 } 12 ] 13 }, 14 { 15 name: '北京', 16 cityList: [{ 17 name: '市辖区', 18 areaList: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区'] 19 }, 20 { 21 name: '县', 22 areaList: ['密云县', '延庆县'] 23 } 24 ] 25 }, 26 { 27 name: '天津', 28 cityList: [{ 29 name: '市辖区', 30 areaList: ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '塘沽区', '汉沽区', '大港区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区'] 31 }, 32 { 33 name: '县', 34 areaList: ['宁河县', '静海县', '蓟 县'] 35 } 36 ] 37 }, 38 { 39 name: '重庆', 40 cityList: [{ 41 name: '市辖区', 42 areaList: ['万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '万盛区', '双桥区', '渝北区', '巴南区', '黔江区', '长寿区'] 43 }, 44 { 45 name: '县', 46 areaList: ['綦江县', '潼南县', '铜梁县', '大足县', '荣昌县', '璧山县', '梁平县', '城口县', '丰都县', '垫江县', '武隆县', '忠 县', '开 县', '云阳县', '奉节县', '巫山县', '巫溪县', '石柱土家族自治县', '秀山土家族苗族自治县', '酉阳土家族苗族自治县', '彭水苗族土家族自治县'] 47 }, 48 { 49 name: '市', 50 areaList: ['江津市', '合川市', '永川市', '南川市'] 51 } 52 ] 53 }, 54 { 55 name: '四川', 56 cityList: [{ 57 name: '成都市', 58 areaList: ['市辖区', '锦江区', '青羊区', '金牛区', '武侯区', '成华区', '龙泉驿区', '青白江区', '新都区', '温江县', '金堂县', '双流县', '郫 县', '大邑县', '蒲江县', '新津县', '都江堰市', '彭州市', '邛崃市', '崇州市'] 59 }, 60 { 61 name: '自贡市', 62 areaList: ['市辖区', '自流井区', '贡井区', '大安区', '沿滩区', '荣 县', '富顺县'] 63 }, 64 { 65 name: '攀枝花市', 66 areaList: ['市辖区', '东 区', '西 区', '仁和区', '米易县', '盐边县'] 67 }, 68 { 69 name: '泸州市', 70 areaList: ['市辖区', '江阳区', '纳溪区', '龙马潭区', '泸 县', '合江县', '叙永县', '古蔺县'] 71 }, 72 { 73 name: '德阳市', 74 areaList: ['市辖区', '旌阳区', '中江县', '罗江县', '广汉市', '什邡市', '绵竹市'] 75 }, 76 { 77 name: '绵阳市', 78 areaList: ['市辖区', '涪城区', '游仙区', '三台县', '盐亭县', '安 县', '梓潼县', '北川羌族自治县', '平武县', '江油市'] 79 }, 80 { 81 name: '广元市', 82 areaList: ['市辖区', '市中区', '元坝区', '朝天区', '旺苍县', '青川县', '剑阁县', '苍溪县'] 83 }, 84 { 85 name: '遂宁市', 86 areaList: ['市辖区', '船山区', '安居区', '蓬溪县', '射洪县', '大英县'] 87 }, 88 { 89 name: '内江市', 90 areaList: ['市辖区', '市中区', '东兴区', '威远县', '资中县', '隆昌县'] 91 }, 92 { 93 name: '乐山市', 94 areaList: ['市辖区', '市中区', '沙湾区', '五通桥区', '金口河区', '犍为县', '井研县', '夹江县', '沐川县', '峨边彝族自治县', '马边彝族自治县', '峨眉山市'] 95 }, 96 { 97 name: '南充市', 98 areaList: ['市辖区', '顺庆区', '高坪区', '嘉陵区', '南部县', '营山县', '蓬安县', '仪陇县', '西充县', '阆中市'] 99 }, 100 { 101 name: '眉山市', 102 areaList: ['市辖区', '东坡区', '仁寿县', '彭山县', '洪雅县', '丹棱县', '青神县'] 103 }, 104 { 105 name: '宜宾市', 106 areaList: ['市辖区', '翠屏区', '宜宾县', '南溪县', '江安县', '长宁县', '高 县', '珙 县', '筠连县', '兴文县', '屏山县'] 107 }, 108 { 109 name: '广安市', 110 areaList: ['市辖区', '广安区', '岳池县', '武胜县', '邻水县', '华莹市'] 111 }, 112 { 113 name: '达州市', 114 areaList: ['市辖区', '通川区', '达 县', '宣汉县', '开江县', '大竹县', '渠 县', '万源市'] 115 }, 116 { 117 name: '雅安市', 118 areaList: ['市辖区', '雨城区', '名山县', '荥经县', '汉源县', '石棉县', '天全县', '芦山县', '宝兴县'] 119 }, 120 { 121 name: '巴中市', 122 areaList: ['市辖区', '巴州区', '通江县', '南江县', '平昌县'] 123 }, 124 { 125 name: '资阳市', 126 areaList: ['市辖区', '雁江区', '安岳县', '乐至县', '简阳市'] 127 }, 128 { 129 name: '阿坝藏族羌族自治州', 130 areaList: ['汶川县', '理 县', '茂 县', '松潘县', '九寨沟县', '金川县', '小金县', '黑水县', '马尔康县', '壤塘县', '阿坝县', '若尔盖县', '红原县'] 131 }, 132 { 133 name: '甘孜藏族自治州', 134 areaList: ['康定县', '泸定县', '丹巴县', '九龙县', '雅江县', '道孚县', '炉霍县', '甘孜县', '新龙县', '德格县', '白玉县', '石渠县', '色达县', '理塘县', '巴塘县', '乡城县', '稻城县', '得荣县'] 135 }, 136 { 137 name: '凉山彝族自治州', 138 areaList: ['西昌市', '木里藏族自治县', '盐源县', '德昌县', '会理县', '会东县', '宁南县', '普格县', '布拖县', '金阳县', '昭觉县', '喜德县', '冕宁县', '越西县', '甘洛县', '美姑县', '雷波县'] 139 } 140 ] 141 }, 142 { 143 name: '贵州', 144 cityList: [{ 145 name: '贵阳市', 146 areaList: ['市辖区', '南明区', '云岩区', '花溪区', '乌当区', '白云区', '小河区', '开阳县', '息烽县', '修文县', '清镇市'] 147 }, 148 { 149 name: '六盘水市', 150 areaList: ['钟山区', '六枝特区', '水城县', '盘 县'] 151 }, 152 { 153 name: '遵义市', 154 areaList: ['市辖区', '红花岗区', '汇川区', '遵义县', '桐梓县', '绥阳县', '正安县', '道真仡佬族苗族自治县', '务川仡佬族苗族自治县', '凤冈县', '湄潭县', '余庆县', '习水县', '赤水市', '仁怀市'] 155 }, 156 { 157 name: '安顺市', 158 areaList: ['市辖区', '西秀区', '平坝县', '普定县', '镇宁布依族苗族自治县', '关岭布依族苗族自治县', '紫云苗族布依族自治县'] 159 }, 160 { 161 name: '铜仁地区', 162 areaList: ['铜仁市', '江口县', '玉屏侗族自治县', '石阡县', '思南县', '印江土家族苗族自治县', '德江县', '沿河土家族自治县', '松桃苗族自治县', '万山特区'] 163 }, 164 { 165 name: '黔西南布依族苗族自治州', 166 areaList: ['兴义市', '兴仁县', '普安县', '晴隆县', '贞丰县', '望谟县', '册亨县', '安龙县'] 167 }, 168 { 169 name: '毕节地区', 170 areaList: ['毕节市', '大方县', '黔西县', '金沙县', '织金县', '纳雍县', '威宁彝族回族苗族自治县', '赫章县'] 171 }, 172 { 173 name: '黔东南苗族侗族自治州', 174 areaList: ['凯里市', '黄平县', '施秉县', '三穗县', '镇远县', '岑巩县', '天柱县', '锦屏县', '剑河县', '台江县', '黎平县', '榕江县', '从江县', '雷山县', '麻江县', '丹寨县'] 175 }, 176 { 177 name: '黔南布依族苗族自治州', 178 areaList: ['都匀市', '福泉市', '荔波县', '贵定县', '瓮安县', '独山县', '平塘县', '罗甸县', '长顺县', '龙里县', '惠水县', '三都水族自治县'] 179 } 180 ] 181 }, 182 { 183 name: '云南', 184 cityList: [{ 185 name: '昆明市', 186 areaList: ['市辖区', '五华区', '盘龙区', '官渡区', '西山区', '东川区', '呈贡县', '晋宁县', '富民县', '宜良县', '石林彝族自治县', '嵩明县', '禄劝彝族苗族自治县', '寻甸回族彝族自治县', '安宁市'] 187 }, 188 { 189 name: '曲靖市', 190 areaList: ['市辖区', '麒麟区', '马龙县', '陆良县', '师宗县', '罗平县', '富源县', '会泽县', '沾益县', '宣威市'] 191 }, 192 { 193 name: '玉溪市', 194 areaList: ['市辖区', '红塔区', '江川县', '澄江县', '通海县', '华宁县', '易门县', '峨山彝族自治县', '新平彝族傣族自治县', '元江哈尼族彝族傣族自治县'] 195 }, 196 { 197 name: '保山市', 198 areaList: ['市辖区', '隆阳区', '施甸县', '腾冲县', '龙陵县', '昌宁县'] 199 }, 200 { 201 name: '昭通市', 202 areaList: ['市辖区', '昭阳区', '鲁甸县', '巧家县', '盐津县', '大关县', '永善县', '绥江县', '镇雄县', '彝良县', '威信县', '水富县'] 203 }, 204 { 205 name: '丽江市', 206 areaList: ['市辖区', '古城区', '玉龙纳西族自治县', '永胜县', '华坪县', '宁蒗彝族自治县'] 207 }, 208 { 209 name: '思茅市', 210 areaList: ['市辖区', '翠云区', '普洱哈尼族彝族自治县', '墨江哈尼族自治县', '景东彝族自治县', '景谷傣族彝族自治县', '镇沅彝族哈尼族拉祜族自治县', '江城哈尼族彝族自治县', '孟连傣族拉祜族佤族自治县', '澜沧拉祜族自治县', '西盟佤族自治县'] 211 }, 212 { 213 name: '临沧市', 214 areaList: ['市辖区', '临翔区', '凤庆县', '云 县', '永德县', '镇康县', '双江拉祜族佤族布朗族傣族自治县', '耿马傣族佤族自治县', '沧源佤族自治县'] 215 }, 216 { 217 name: '楚雄彝族自治州', 218 areaList: ['楚雄市', '双柏县', '牟定县', '南华县', '姚安县', '大姚县', '永仁县', '元谋县', '武定县', '禄丰县'] 219 }, 220 { 221 name: '红河哈尼族彝族自治州', 222 areaList: ['个旧市', '开远市', '蒙自县', '屏边苗族自治县', '建水县', '石屏县', '弥勒县', '泸西县', '元阳县', '红河县', '金平苗族瑶族傣族自治县', '绿春县', '河口瑶族自治县'] 223 }, 224 { 225 name: '文山壮族苗族自治州', 226 areaList: ['文山县', '砚山县', '西畴县', '麻栗坡县', '马关县', '丘北县', '广南县', '富宁县'] 227 }, 228 { 229 name: '西双版纳傣族自治州', 230 areaList: ['景洪市', '勐海县', '勐腊县'] 231 }, 232 { 233 name: '大理白族自治州', 234 areaList: ['大理市', '漾濞彝族自治县', '祥云县', '宾川县', '弥渡县', '南涧彝族自治县', '巍山彝族回族自治县', '永平县', '云龙县', '洱源县', '剑川县', '鹤庆县'] 235 }, 236 { 237 name: '德宏傣族景颇族自治州', 238 areaList: ['瑞丽市', '潞西市', '梁河县', '盈江县', '陇川县'] 239 }, 240 { 241 name: '怒江傈僳族自治州', 242 areaList: ['泸水县', '福贡县', '贡山独龙族怒族自治县', '兰坪白族普米族自治县'] 243 }, 244 { 245 name: '迪庆藏族自治州', 246 areaList: ['香格里拉县', '德钦县', '维西傈僳族自治县'] 247 } 248 ] 249 }, 250 { 251 name: '西藏', 252 cityList: [{ 253 name: '拉萨市', 254 areaList: ['市辖区', '城关区', '林周县', '当雄县', '尼木县', '曲水县', '堆龙德庆县', '达孜县', '墨竹工卡县'] 255 }, 256 { 257 name: '昌都地区', 258 areaList: ['昌都县', '江达县', '贡觉县', '类乌齐县', '丁青县', '察雅县', '八宿县', '左贡县', '芒康县', '洛隆县', '边坝县'] 259 }, 260 { 261 name: '山南地区', 262 areaList: ['乃东县', '扎囊县', '贡嘎县', '桑日县', '琼结县', '曲松县', '措美县', '洛扎县', '加查县', '隆子县', '错那县', '浪卡子县'] 263 }, 264 { 265 name: '日喀则地区', 266 areaList: ['日喀则市', '南木林县', '江孜县', '定日县', '萨迦县', '拉孜县', '昂仁县', '谢通门县', '白朗县', '仁布县', '康马县', '定结县', '仲巴县', '亚东县', '吉隆县', '聂拉木县', '萨嘎县', '岗巴县'] 267 }, 268 { 269 name: '那曲地区', 270 areaList: ['那曲县', '嘉黎县', '比如县', '聂荣县', '安多县', '申扎县', '索 县', '班戈县', '巴青县', '尼玛县'] 271 }, 272 { 273 name: '阿里地区', 274 areaList: ['普兰县', '札达县', '噶尔县', '日土县', '革吉县', '改则县', '措勤县'] 275 }, 276 { 277 name: '林芝地区', 278 areaList: ['林芝县', '工布江达县', '米林县', '墨脱县', '波密县', '察隅县', '朗 县'] 279 } 280 ] 281 }, 282 { 283 name: '河南', 284 cityList: [{ 285 name: '郑州市', 286 areaList: ['市辖区', '中原区', '二七区', '管城回族区', '金水区', '上街区', '邙山区', '中牟县', '巩义市', '荥阳市', '新密市', '新郑市', '登封市'] 287 }, 288 { 289 name: '开封市', 290 areaList: ['市辖区', '龙亭区', '顺河回族区', '鼓楼区', '南关区', '郊 区', '杞 县', '通许县', '尉氏县', '开封县', '兰考县'] 291 }, 292 { 293 name: '洛阳市', 294 areaList: ['市辖区', '老城区', '西工区', '廛河回族区', '涧西区', '吉利区', '洛龙区', '孟津县', '新安县', '栾川县', '嵩 县', '汝阳县', '宜阳县', '洛宁县', '伊川县', '偃师市'] 295 }, 296 { 297 name: '平顶山市', 298 areaList: ['市辖区', '新华区', '卫东区', '石龙区', '湛河区', '宝丰县', '叶 县', '鲁山县', '郏 县', '舞钢市', '汝州市'] 299 }, 300 { 301 name: '安阳市', 302 areaList: ['市辖区', '文峰区', '北关区', '殷都区', '龙安区', '安阳县', '汤阴县', '滑 县', '内黄县', '林州市'] 303 }, 304 { 305 name: '鹤壁市', 306 areaList: ['市辖区', '鹤山区', '山城区', '淇滨区', '浚 县', '淇 县'] 307 }, 308 { 309 name: '新乡市', 310 areaList: ['市辖区', '红旗区', '卫滨区', '凤泉区', '牧野区', '新乡县', '获嘉县', '原阳县', '延津县', '封丘县', '长垣县', '卫辉市', '辉县市'] 311 }, 312 { 313 name: '焦作市', 314 areaList: ['市辖区', '解放区', '中站区', '马村区', '山阳区', '修武县', '博爱县', '武陟县', '温 县', '济源市', '沁阳市', '孟州市'] 315 }, 316 { 317 name: '濮阳市', 318 areaList: ['市辖区', '华龙区', '清丰县', '南乐县', '范 县', '台前县', '濮阳县'] 319 }, 320 { 321 name: '许昌市', 322 areaList: ['市辖区', '魏都区', '许昌县', '鄢陵县', '襄城县', '禹州市', '长葛市'] 323 }, 324 { 325 name: '漯河市', 326 areaList: ['市辖区', '源汇区', '郾城区', '召陵区', '舞阳县', '临颍县'] 327 }, 328 { 329 name: '三门峡市', 330 areaList: ['市辖区', '湖滨区', '渑池县', '陕 县', '卢氏县', '义马市', '灵宝市'] 331 }, 332 { 333 name: '南阳市', 334 areaList: ['市辖区', '宛城区', '卧龙区', '南召县', '方城县', '西峡县', '镇平县', '内乡县', '淅川县', '社旗县', '唐河县', '新野县', '桐柏县', '邓州市'] 335 }, 336 { 337 name: '商丘市', 338 areaList: ['市辖区', '梁园区', '睢阳区', '民权县', '睢 县', '宁陵县', '柘城县', '虞城县', '夏邑县', '永城市'] 339 }, 340 { 341 name: '信阳市', 342 areaList: ['市辖区', '师河区', '平桥区', '罗山县', '光山县', '新 县', '商城县', '固始县', '潢川县', '淮滨县', '息 县'] 343 }, 344 { 345 name: '周口市', 346 areaList: ['市辖区', '川汇区', '扶沟县', '西华县', '商水县', '沈丘县', '郸城县', '淮阳县', '太康县', '鹿邑县', '项城市'] 347 }, 348 { 349 name: '驻马店市', 350 areaList: ['市辖区', '驿城区', '西平县', '上蔡县', '平舆县', '正阳县', '确山县', '泌阳县', '汝南县', '遂平县', '新蔡县'] 351 } 352 ] 353 }, 354 { 355 name: '湖北', 356 cityList: [{ 357 name: '武汉市', 358 areaList: ['市辖区', '江岸区', '江汉区', '乔口区', '汉阳区', '武昌区', '青山区', '洪山区', '东西湖区', '汉南区', '蔡甸区', '江夏区', '黄陂区', '新洲区'] 359 }, 360 { 361 name: '黄石市', 362 areaList: ['市辖区', '黄石港区', '西塞山区', '下陆区', '铁山区', '阳新县', '大冶市'] 363 }, 364 { 365 name: '十堰市', 366 areaList: ['市辖区', '茅箭区', '张湾区', '郧 县', '郧西县', '竹山县', '竹溪县', '房 县', '丹江口市'] 367 }, 368 { 369 name: '宜昌市', 370 areaList: ['市辖区', '西陵区', '伍家岗区', '点军区', '猇亭区', '夷陵区', '远安县', '兴山县', '秭归县', '长阳土家族自治县', '五峰土家族自治县', '宜都市', '当阳市', '枝江市'] 371 }, 372 { 373 name: '襄樊市', 374 areaList: ['市辖区', '襄城区', '樊城区', '襄阳区', '南漳县', '谷城县', '保康县', '老河口市', '枣阳市', '宜城市'] 375 }, 376 { 377 name: '鄂州市', 378 areaList: ['市辖区', '梁子湖区', '华容区', '鄂城区'] 379 }, 380 { 381 name: '荆门市', 382 areaList: ['市辖区', '东宝区', '掇刀区', '京山县', '沙洋县', '钟祥市'] 383 }, 384 { 385 name: '孝感市', 386 areaList: ['市辖区', '孝南区', '孝昌县', '大悟县', '云梦县', '应城市', '安陆市', '汉川市'] 387 }, 388 { 389 name: '荆州市', 390 areaList: ['市辖区', '沙市区', '荆州区', '公安县', '监利县', '江陵县', '石首市', '洪湖市', '松滋市'] 391 }, 392 { 393 name: '黄冈市', 394 areaList: ['市辖区', '黄州区', '团风县', '红安县', '罗田县', '英山县', '浠水县', '蕲春县', '黄梅县', '麻城市', '武穴市'] 395 }, 396 { 397 name: '咸宁市', 398 areaList: ['市辖区', '咸安区', '嘉鱼县', '通城县', '崇阳县', '通山县', '赤壁市'] 399 }, 400 { 401 name: '随州市', 402 areaList: ['市辖区', '曾都区', '广水市'] 403 }, 404 { 405 name: '恩施土家族苗族自治州', 406 areaList: ['恩施市', '利川市', '建始县', '巴东县', '宣恩县', '咸丰县', '来凤县', '鹤峰县'] 407 }, 408 { 409 name: '省直辖行政单位', 410 areaList: ['仙桃市', '潜江市', '天门市', '神农架林区'] 411 } 412 ] 413 }, 414 { 415 name: '湖南', 416 cityList: [{ 417 name: '长沙市', 418 areaList: ['市辖区', '芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '长沙县', '望城县', '宁乡县', '浏阳市'] 419 }, 420 { 421 name: '株洲市', 422 areaList: ['市辖区', '荷塘区', '芦淞区', '石峰区', '天元区', '株洲县', '攸 县', '茶陵县', '炎陵县', '醴陵市'] 423 }, 424 { 425 name: '湘潭市', 426 areaList: ['市辖区', '雨湖区', '岳塘区', '湘潭县', '湘乡市', '韶山市'] 427 }, 428 { 429 name: '衡阳市', 430 areaList: ['市辖区', '珠晖区', '雁峰区', '石鼓区', '蒸湘区', '南岳区', '衡阳县', '衡南县', '衡山县', '衡东县', '祁东县', '耒阳市', '常宁市'] 431 }, 432 { 433 name: '邵阳市', 434 areaList: ['市辖区', '双清区', '大祥区', '北塔区', '邵东县', '新邵县', '邵阳县', '隆回县', '洞口县', '绥宁县', '新宁县', '城步苗族自治县', '武冈市'] 435 }, 436 { 437 name: '岳阳市', 438 areaList: ['市辖区', '岳阳楼区', '云溪区', '君山区', '岳阳县', '华容县', '湘阴县', '平江县', '汨罗市', '临湘市'] 439 }, 440 { 441 name: '常德市', 442 areaList: ['市辖区', '武陵区', '鼎城区', '安乡县', '汉寿县', '澧 县', '临澧县', '桃源县', '石门县', '津市市'] 443 }, 444 { 445 name: '张家界市', 446 areaList: ['市辖区', '永定区', '武陵源区', '慈利县', '桑植县'] 447 }, 448 { 449 name: '益阳市', 450 areaList: ['市辖区', '资阳区', '赫山区', '南 县', '桃江县', '安化县', '沅江市'] 451 }, 452 { 453 name: '郴州市', 454 areaList: ['市辖区', '北湖区', '苏仙区', '桂阳县', '宜章县', '永兴县', '嘉禾县', '临武县', '汝城县', '桂东县', '安仁县', '资兴市'] 455 }, 456 { 457 name: '永州市', 458 areaList: ['市辖区', '芝山区', '冷水滩区', '祁阳县', '东安县', '双牌县', '道 县', '江永县', '宁远县', '蓝山县', '新田县', '江华瑶族自治县'] 459 }, 460 { 461 name: '怀化市', 462 areaList: ['市辖区', '鹤城区', '中方县', '沅陵县', '辰溪县', '溆浦县', '会同县', '麻阳苗族自治县', '新晃侗族自治县', '芷江侗族自治县', '靖州苗族侗族自治县', '通道侗族自治县', '洪江市'] 463 }, 464 { 465 name: '娄底市', 466 areaList: ['市辖区', '娄星区', '双峰县', '新化县', '冷水江市', '涟源市'] 467 }, 468 { 469 name: '湘西土家族苗族自治州', 470 areaList: ['吉首市', '泸溪县', '凤凰县', '花垣县', '保靖县', '古丈县', '永顺县', '龙山县'] 471 } 472 ] 473 }, 474 { 475 name: '广东', 476 cityList: [{ 477 name: '广州市', 478 areaList: ['市辖区', '东山区', '荔湾区', '越秀区', '海珠区', '天河区', '芳村区', '白云区', '黄埔区', '番禺区', '花都区', '增城市', '从化市'] 479 }, 480 { 481 name: '韶关市', 482 areaList: ['市辖区', '武江区', '浈江区', '曲江区', '始兴县', '仁化县', '翁源县', '乳源瑶族自治县', '新丰县', '乐昌市', '南雄市'] 483 }, 484 { 485 name: '深圳市', 486 areaList: ['市辖区', '罗湖区', '福田区', '南山区', '宝安区', '龙岗区', '盐田区'] 487 }, 488 { 489 name: '珠海市', 490 areaList: ['市辖区', '香洲区', '斗门区', '金湾区'] 491 }, 492 { 493 name: '汕头市', 494 areaList: ['市辖区', '龙湖区', '金平区', '濠江区', '潮阳区', '潮南区', '澄海区', '南澳县'] 495 }, 496 { 497 name: '佛山市', 498 areaList: ['市辖区', '禅城区', '南海区', '顺德区', '三水区', '高明区'] 499 }, 500 { 501 name: '江门市', 502 areaList: ['市辖区', '蓬江区', '江海区', '新会区', '台山市', '开平市', '鹤山市', '恩平市'] 503 }, 504 { 505 name: '湛江市', 506 areaList: ['市辖区', '赤坎区', '霞山区', '坡头区', '麻章区', '遂溪县', '徐闻县', '廉江市', '雷州市', '吴川市'] 507 }, 508 { 509 name: '茂名市', 510 areaList: ['市辖区', '茂南区', '茂港区', '电白县', '高州市', '化州市', '信宜市'] 511 }, 512 { 513 name: '肇庆市', 514 areaList: ['市辖区', '端州区', '鼎湖区', '广宁县', '怀集县', '封开县', '德庆县', '高要市', '四会市'] 515 }, 516 { 517 name: '惠州市', 518 areaList: ['市辖区', '惠城区', '惠阳区', '博罗县', '惠东县', '龙门县'] 519 }, 520 { 521 name: '梅州市', 522 areaList: ['市辖区', '梅江区', '梅 县', '大埔县', '丰顺县', '五华县', '平远县', '蕉岭县', '兴宁市'] 523 }, 524 { 525 name: '汕尾市', 526 areaList: ['市辖区', '城 区', '海丰县', '陆河县', '陆丰市'] 527 }, 528 { 529 name: '河源市', 530 areaList: ['市辖区', '源城区', '紫金县', '龙川县', '连平县', '和平县', '东源县'] 531 }, 532 { 533 name: '阳江市', 534 areaList: ['市辖区', '江城区', '阳西县', '阳东县', '阳春市'] 535 }, 536 { 537 name: '清远市', 538 areaList: ['市辖区', '清城区', '佛冈县', '阳山县', '连山壮族瑶族自治县', '连南瑶族自治县', '清新县', '英德市', '连州市'] 539 }, 540 { 541 name: '东莞市', 542 areaList: ['东莞市'] 543 }, 544 { 545 name: '中山市', 546 areaList: ['中山市'] 547 }, 548 { 549 name: '潮州市', 550 areaList: ['市辖区', '湘桥区', '潮安县', '饶平县'] 551 }, 552 { 553 name: '揭阳市', 554 areaList: ['市辖区', '榕城区', '揭东县', '揭西县', '惠来县', '普宁市'] 555 }, 556 { 557 name: '云浮市', 558 areaList: ['市辖区', '云城区', '新兴县', '郁南县', '云安县', '罗定市'] 559 } 560 ] 561 }, 562 { 563 name: '广西', 564 cityList: [{ 565 name: '南宁市', 566 areaList: ['市辖区', '兴宁区', '青秀区', '江南区', '西乡塘区', '良庆区', '邕宁区', '武鸣县', '隆安县', '马山县', '上林县', '宾阳县', '横 县'] 567 }, 568 { 569 name: '柳州市', 570 areaList: ['市辖区', '城中区', '鱼峰区', '柳南区', '柳北区', '柳江县', '柳城县', '鹿寨县', '融安县', '融水苗族自治县', '三江侗族自治县'] 571 }, 572 { 573 name: '桂林市', 574 areaList: ['市辖区', '秀峰区', '叠彩区', '象山区', '七星区', '雁山区', '阳朔县', '临桂县', '灵川县', '全州县', '兴安县', '永福县', '灌阳县', '龙胜各族自治县', '资源县', '平乐县', '荔蒲县', '恭城瑶族自治县'] 575 }, 576 { 577 name: '梧州市', 578 areaList: ['市辖区', '万秀区', '蝶山区', '长洲区', '苍梧县', '藤 县', '蒙山县', '岑溪市'] 579 }, 580 { 581 name: '北海市', 582 areaList: ['市辖区', '海城区', '银海区', '铁山港区', '合浦县'] 583 }, 584 { 585 name: '防城港市', 586 areaList: ['市辖区', '港口区', '防城区', '上思县', '东兴市'] 587 }, 588 { 589 name: '钦州市', 590 areaList: ['市辖区', '钦南区', '钦北区', '灵山县', '浦北县'] 591 }, 592 { 593 name: '贵港市', 594 areaList: ['市辖区', '港北区', '港南区', '覃塘区', '平南县', '桂平市'] 595 }, 596 { 597 name: '玉林市', 598 areaList: ['市辖区', '玉州区', '容 县', '陆川县', '博白县', '兴业县', '北流市'] 599 }, 600 { 601 name: '百色市', 602 areaList: ['市辖区', '右江区', '田阳县', '田东县', '平果县', '德保县', '靖西县', '那坡县', '凌云县', '乐业县', '田林县', '西林县', '隆林各族自治县'] 603 }, 604 { 605 name: '贺州市', 606 areaList: ['市辖区', '八步区', '昭平县', '钟山县', '富川瑶族自治县'] 607 }, 608 { 609 name: '河池市', 610 areaList: ['市辖区', '金城江区', '南丹县', '天峨县', '凤山县', '东兰县', '罗城仫佬族自治县', '环江毛南族自治县', '巴马瑶族自治县', '都安瑶族自治县', '大化瑶族自治县', '宜州市'] 611 }, 612 { 613 name: '来宾市', 614 areaList: ['市辖区', '兴宾区', '忻城县', '象州县', '武宣县', '金秀瑶族自治县', '合山市'] 615 }, 616 { 617 name: '崇左市', 618 areaList: ['市辖区', '江洲区', '扶绥县', '宁明县', '龙州县', '大新县', '天等县', '凭祥市'] 619 } 620 ] 621 }, 622 { 623 name: '陕西', 624 cityList: [{ 625 name: '西安市', 626 areaList: ['市辖区', '新城区', '碑林区', '莲湖区', '灞桥区', '未央区', '雁塔区', '阎良区', '临潼区', '长安区', '蓝田县', '周至县', '户 县', '高陵县'] 627 }, 628 { 629 name: '铜川市', 630 areaList: ['市辖区', '王益区', '印台区', '耀州区', '宜君县'] 631 }, 632 { 633 name: '宝鸡市', 634 areaList: ['市辖区', '渭滨区', '金台区', '陈仓区', '凤翔县', '岐山县', '扶风县', '眉 县', '陇 县', '千阳县', '麟游县', '凤 县', '太白县'] 635 }, 636 { 637 name: '咸阳市', 638 areaList: ['市辖区', '秦都区', '杨凌区', '渭城区', '三原县', '泾阳县', '乾 县', '礼泉县', '永寿县', '彬 县', '长武县', '旬邑县', '淳化县', '武功县', '兴平市'] 639 }, 640 { 641 name: '渭南市', 642 areaList: ['市辖区', '临渭区', '华 县', '潼关县', '大荔县', '合阳县', '澄城县', '蒲城县', '白水县', '富平县', '韩城市', '华阴市'] 643 }, 644 { 645 name: '延安市', 646 areaList: ['市辖区', '宝塔区', '延长县', '延川县', '子长县', '安塞县', '志丹县', '吴旗县', '甘泉县', '富 县', '洛川县', '宜川县', '黄龙县', '黄陵县'] 647 }, 648 { 649 name: '汉中市', 650 areaList: ['市辖区', '汉台区', '南郑县', '城固县', '洋 县', '西乡县', '勉 县', '宁强县', '略阳县', '镇巴县', '留坝县', '佛坪县'] 651 }, 652 { 653 name: '榆林市', 654 areaList: ['市辖区', '榆阳区', '神木县', '府谷县', '横山县', '靖边县', '定边县', '绥德县', '米脂县', '佳 县', '吴堡县', '清涧县', '子洲县'] 655 }, 656 { 657 name: '安康市', 658 areaList: ['市辖区', '汉滨区', '汉阴县', '石泉县', '宁陕县', '紫阳县', '岚皋县', '平利县', '镇坪县', '旬阳县', '白河县'] 659 }, 660 { 661 name: '商洛市', 662 areaList: ['市辖区', '商州区', '洛南县', '丹凤县', '商南县', '山阳县', '镇安县', '柞水县'] 663 } 664 ] 665 }, 666 { 667 name: '甘肃', 668 cityList: [{ 669 name: '兰州市', 670 areaList: ['市辖区', '城关区', '七里河区', '西固区', '安宁区', '红古区', '永登县', '皋兰县', '榆中县'] 671 }, 672 { 673 name: '嘉峪关市', 674 areaList: ['市辖区'] 675 }, 676 { 677 name: '金昌市', 678 areaList: ['市辖区', '金川区', '永昌县'] 679 }, 680 { 681 name: '白银市', 682 areaList: ['市辖区', '白银区', '平川区', '靖远县', '会宁县', '景泰县'] 683 }, 684 { 685 name: '天水市', 686 areaList: ['市辖区', '秦城区', '北道区', '清水县', '秦安县', '甘谷县', '武山县', '张家川回族自治县'] 687 }, 688 { 689 name: '武威市', 690 areaList: ['市辖区', '凉州区', '民勤县', '古浪县', '天祝藏族自治县'] 691 }, 692 { 693 name: '张掖市', 694 areaList: ['市辖区', '甘州区', '肃南裕固族自治县', '民乐县', '临泽县', '高台县', '山丹县'] 695 }, 696 { 697 name: '平凉市', 698 areaList: ['市辖区', '崆峒区', '泾川县', '灵台县', '崇信县', '华亭县', '庄浪县', '静宁县'] 699 }, 700 { 701 name: '酒泉市', 702 areaList: ['市辖区', '肃州区', '金塔县', '安西县', '肃北蒙古族自治县', '阿克塞哈萨克族自治县', '玉门市', '敦煌市'] 703 }, 704 { 705 name: '庆阳市', 706 areaList: ['市辖区', '西峰区', '庆城县', '环 县', '华池县', '合水县', '正宁县', '宁 县', '镇原县'] 707 }, 708 { 709 name: '定西市', 710 areaList: ['市辖区', '安定区', '通渭县', '陇西县', '渭源县', '临洮县', '漳 县', '岷 县'] 711 }, 712 { 713 name: '陇南市', 714 areaList: ['市辖区', '武都区', '成 县', '文 县', '宕昌县', '康 县', '西和县', '礼 县', '徽 县', '两当县'] 715 }, 716 { 717 name: '临夏回族自治州', 718 areaList: ['临夏市', '临夏县', '康乐县', '永靖县', '广河县', '和政县', '东乡族自治县', '积石山保安族东乡族撒拉族自治县'] 719 }, 720 { 721 name: '甘南藏族自治州', 722 areaList: ['合作市', '临潭县', '卓尼县', '舟曲县', '迭部县', '玛曲县', '碌曲县', '夏河县'] 723 } 724 ] 725 }, 726 { 727 name: '青海', 728 cityList: [{ 729 name: '西宁市', 730 areaList: ['市辖区', '城东区', '城中区', '城西区', '城北区', '大通回族土族自治县', '湟中县', '湟源县'] 731 }, 732 { 733 name: '海东地区', 734 areaList: ['平安县', '民和回族土族自治县', '乐都县', '互助土族自治县', '化隆回族自治县', '循化撒拉族自治县'] 735 }, 736 { 737 name: '海北藏族自治州', 738 areaList: ['门源回族自治县', '祁连县', '海晏县', '刚察县'] 739 }, 740 { 741 name: '黄南藏族自治州', 742 areaList: ['同仁县', '尖扎县', '泽库县', '河南蒙古族自治县'] 743 }, 744 { 745 name: '海南藏族自治州', 746 areaList: ['共和县', '同德县', '贵德县', '兴海县', '贵南县'] 747 }, 748 { 749 name: '果洛藏族自治州', 750 areaList: ['玛沁县', '班玛县', '甘德县', '达日县', '久治县', '玛多县'] 751 }, 752 { 753 name: '玉树藏族自治州', 754 areaList: ['玉树县', '杂多县', '称多县', '治多县', '囊谦县', '曲麻莱县'] 755 }, 756 { 757 name: '海西蒙古族藏族自治州', 758 areaList: ['格尔木市', '德令哈市', '乌兰县', '都兰县', '天峻县'] 759 } 760 ] 761 }, 762 { 763 name: '宁夏', 764 cityList: [{ 765 name: '银川市', 766 areaList: ['市辖区', '兴庆区', '西夏区', '金凤区', '永宁县', '贺兰县', '灵武市'] 767 }, 768 { 769 name: '石嘴山市', 770 areaList: ['市辖区', '大武口区', '惠农区', '平罗县'] 771 }, 772 { 773 name: '吴忠市', 774 areaList: ['市辖区', '利通区', '盐池县', '同心县', '青铜峡市'] 775 }, 776 { 777 name: '固原市', 778 areaList: ['市辖区', '原州区', '西吉县', '隆德县', '泾源县', '彭阳县', '海原县'] 779 }, 780 { 781 name: '中卫市', 782 areaList: ['市辖区', '沙坡头区', '中宁县'] 783 } 784 ] 785 }, 786 { 787 name: '新疆', 788 cityList: [{ 789 name: '乌鲁木齐市', 790 areaList: ['市辖区', '天山区', '沙依巴克区', '新市区', '水磨沟区', '头屯河区', '达坂城区', '东山区', '乌鲁木齐县'] 791 }, 792 { 793 name: '克拉玛依市', 794 areaList: ['市辖区', '独山子区', '克拉玛依区', '白碱滩区', '乌尔禾区'] 795 }, 796 { 797 name: '吐鲁番地区', 798 areaList: ['吐鲁番市', '鄯善县', '托克逊县'] 799 }, 800 { 801 name: '哈密地区', 802 areaList: ['哈密市', '巴里坤哈萨克自治县', '伊吾县'] 803 }, 804 { 805 name: '昌吉回族自治州', 806 areaList: ['昌吉市', '阜康市', '米泉市', '呼图壁县', '玛纳斯县', '奇台县', '吉木萨尔县', '木垒哈萨克自治县'] 807 }, 808 { 809 name: '博尔塔拉蒙古自治州', 810 areaList: ['博乐市', '精河县', '温泉县'] 811 }, 812 { 813 name: '巴音郭楞蒙古自治州', 814 areaList: ['库尔勒市', '轮台县', '尉犁县', '若羌县', '且末县', '焉耆回族自治县', '和静县', '和硕县', '博湖县'] 815 }, 816 { 817 name: '阿克苏地区', 818 areaList: ['阿克苏市', '温宿县', '库车县', '沙雅县', '新和县', '拜城县', '乌什县', '阿瓦提县', '柯坪县'] 819 }, 820 { 821 name: '克孜勒苏柯尔克孜自治州', 822 areaList: ['阿图什市', '阿克陶县', '阿合奇县', '乌恰县'] 823 }, 824 { 825 name: '喀什地区', 826 areaList: ['喀什市', '疏附县', '疏勒县', '英吉沙县', '泽普县', '莎车县', '叶城县', '麦盖提县', '岳普湖县', '伽师县', '巴楚县', '塔什库尔干塔吉克自治县'] 827 }, 828 { 829 name: '和田地区', 830 areaList: ['和田市', '和田县', '墨玉县', '皮山县', '洛浦县', '策勒县', '于田县', '民丰县'] 831 }, 832 { 833 name: '伊犁哈萨克自治州', 834 areaList: ['伊宁市', '奎屯市', '伊宁县', '察布查尔锡伯自治县', '霍城县', '巩留县', '新源县', '昭苏县', '特克斯县', '尼勒克县'] 835 }, 836 { 837 name: '塔城地区', 838 areaList: ['塔城市', '乌苏市', '额敏县', '沙湾县', '托里县', '裕民县', '和布克赛尔蒙古自治县'] 839 }, 840 { 841 name: '阿勒泰地区', 842 areaList: ['阿勒泰市', '布尔津县', '富蕴县', '福海县', '哈巴河县', '青河县', '吉木乃县'] 843 }, 844 { 845 name: '省直辖行政单位', 846 areaList: ['石河子市', '阿拉尔市', '图木舒克市', '五家渠市'] 847 } 848 ] 849 }, 850 { 851 name: '河北', 852 cityList: [{ 853 name: '石家庄市', 854 areaList: ['市辖区', '长安区', '桥东区', '桥西区', '新华区', '井陉矿区', '裕华区', '井陉县', '正定县', '栾城县', '行唐县', '灵寿县', '高邑县', '深泽县', '赞皇县', '无极县', '平山县', '元氏县', '赵 县', '辛集市', '藁城市', '晋州市', '新乐市', '鹿泉市'] 855 }, 856 { 857 name: '唐山市', 858 areaList: ['市辖区', '路南区', '路北区', '古冶区', '开平区', '丰南区', '丰润区', '滦 县', '滦南县', '乐亭县', '迁西县', '玉田县', '唐海县', '遵化市', '迁安市'] 859 }, 860 { 861 name: '秦皇岛市', 862 areaList: ['市辖区', '海港区', '山海关区', '北戴河区', '青龙满族自治县', '昌黎县', '抚宁县', '卢龙县'] 863 }, 864 { 865 name: '邯郸市', 866 areaList: ['市辖区', '邯山区', '丛台区', '复兴区', '峰峰矿区', '邯郸县', '临漳县', '成安县', '大名县', '涉 县', '磁 县', '肥乡县', '永年县', '邱 县', '鸡泽县', '广平县', '馆陶县', '魏 县', '曲周县', '武安市'] 867 }, 868 { 869 name: '邢台市', 870 areaList: ['市辖区', '桥东区', '桥西区', '邢台县', '临城县', '内丘县', '柏乡县', '隆尧县', '任 县', '南和县', '宁晋县', '巨鹿县', '新河县', '广宗县', '平乡县', '威 县', '清河县', '临西县', '南宫市', '沙河市'] 871 }, 872 { 873 name: '保定市', 874 areaList: ['市辖区', '新市区', '北市区', '南市区', '满城县', '清苑县', '涞水县', '阜平县', '徐水县', '定兴县', '唐 县', '高阳县', '容城县', '涞源县', '望都县', '安新县', '易 县', '曲阳县', '蠡 县', '顺平县', '博野县', '雄 县', '涿州市', '定州市', '安国市', '高碑店市'] 875 }, 876 { 877 name: '张家口市', 878 areaList: ['市辖区', '桥东区', '桥西区', '宣化区', '下花园区', '宣化县', '张北县', '康保县', '沽源县', '尚义县', '蔚 县', '阳原县', '怀安县', '万全县', '怀来县', '涿鹿县', '赤城县', '崇礼县'] 879 }, 880 { 881 name: '承德市', 882 areaList: ['市辖区', '双桥区', '双滦区', '鹰手营子矿区', '承德县', '兴隆县', '平泉县', '滦平县', '隆化县', '丰宁满族自治县', '宽城满族自治县', '围场满族蒙古族自治县'] 883 }, 884 { 885 name: '沧州市', 886 areaList: ['市辖区', '新华区', '运河区', '沧 县', '青 县', '东光县', '海兴县', '盐山县', '肃宁县', '南皮县', '吴桥县', '献 县', '孟村回族自治县', '泊头市', '任丘市', '黄骅市', '河间市'] 887 }, 888 { 889 name: '廊坊市', 890 areaList: ['市辖区', '安次区', '广阳区', '固安县', '永清县', '香河县', '大城县', '文安县', '大厂回族自治县', '霸州市', '三河市'] 891 }, 892 { 893 name: '衡水市', 894 areaList: ['市辖区', '桃城区', '枣强县', '武邑县', '武强县', '饶阳县', '安平县', '故城县', '景 县', '阜城县', '冀州市', '深州市'] 895 } 896 ] 897 }, 898 { 899 name: '山西', 900 cityList: [{ 901 name: '太原市', 902 areaList: ['市辖区', '小店区', '迎泽区', '杏花岭区', '尖草坪区', '万柏林区', '晋源区', '清徐县', '阳曲县', '娄烦县', '古交市'] 903 }, 904 { 905 name: '大同市', 906 areaList: ['市辖区', '城 区', '矿 区', '南郊区', '新荣区', '阳高县', '天镇县', '广灵县', '灵丘县', '浑源县', '左云县', '大同县'] 907 }, 908 { 909 name: '阳泉市', 910 areaList: ['市辖区', '城 区', '矿 区', '郊 区', '平定县', '盂 县'] 911 }, 912 { 913 name: '长治市', 914 areaList: ['市辖区', '城 区', '郊 区', '长治县', '襄垣县', '屯留县', '平顺县', '黎城县', '壶关县', '长子县', '武乡县', '沁 县', '沁源县', '潞城市'] 915 }, 916 { 917 name: '晋城市', 918 areaList: ['市辖区', '城 区', '沁水县', '阳城县', '陵川县', '泽州县', '高平市'] 919 }, 920 { 921 name: '朔州市', 922 areaList: ['市辖区', '朔城区', '平鲁区', '山阴县', '应 县', '右玉县', '怀仁县'] 923 }, 924 { 925 name: '晋中市', 926 areaList: ['市辖区', '榆次区', '榆社县', '左权县', '和顺县', '昔阳县', '寿阳县', '太谷县', '祁 县', '平遥县', '灵石县', '介休市'] 927 }, 928 { 929 name: '运城市', 930 areaList: ['市辖区', '盐湖区', '临猗县', '万荣县', '闻喜县', '稷山县', '新绛县', '绛 县', '垣曲县', '夏 县', '平陆县', '芮城县', '永济市', '河津市'] 931 }, 932 { 933 name: '忻州市', 934 areaList: ['市辖区', '忻府区', '定襄县', '五台县', '代 县', '繁峙县', '宁武县', '静乐县', '神池县', '五寨县', '岢岚县', '河曲县', '保德县', '偏关县', '原平市'] 935 }, 936 { 937 name: '临汾市', 938 areaList: ['市辖区', '尧都区', '曲沃县', '翼城县', '襄汾县', '洪洞县', '古 县', '安泽县', '浮山县', '吉 县', '乡宁县', '大宁县', '隰 县', '永和县', '蒲 县', '汾西县', '侯马市', '霍州市'] 939 }, 940 { 941 name: '吕梁市', 942 areaList: ['市辖区', '离石区', '文水县', '交城县', '兴 县', '临 县', '柳林县', '石楼县', '岚 县', '方山县', '中阳县', '交口县', '孝义市', '汾阳市'] 943 } 944 ] 945 }, 946 { 947 name: '内蒙古', 948 cityList: [{ 949 name: '呼和浩特市', 950 areaList: ['市辖区', '新城区', '回民区', '玉泉区', '赛罕区', '土默特左旗', '托克托县', '和林格尔县', '清水河县', '武川县'] 951 }, 952 { 953 name: '包头市', 954 areaList: ['市辖区', '东河区', '昆都仑区', '青山区', '石拐区', '白云矿区', '九原区', '土默特右旗', '固阳县', '达尔罕茂明安联合旗'] 955 }, 956 { 957 name: '乌海市', 958 areaList: ['市辖区', '海勃湾区', '海南区', '乌达区'] 959 }, 960 { 961 name: '赤峰市', 962 areaList: ['市辖区', '红山区', '元宝山区', '松山区', '阿鲁科尔沁旗', '巴林左旗', '巴林右旗', '林西县', '克什克腾旗', '翁牛特旗', '喀喇沁旗', '宁城县', '敖汉旗'] 963 }, 964 { 965 name: '通辽市', 966 areaList: ['市辖区', '科尔沁区', '科尔沁左翼中旗', '科尔沁左翼后旗', '开鲁县', '库伦旗', '奈曼旗', '扎鲁特旗', '霍林郭勒市'] 967 }, 968 { 969 name: '鄂尔多斯市', 970 areaList: ['东胜区', '达拉特旗', '准格尔旗', '鄂托克前旗', '鄂托克旗', '杭锦旗', '乌审旗', '伊金霍洛旗'] 971 }, 972 { 973 name: '呼伦贝尔市', 974 areaList: ['市辖区', '海拉尔区', '阿荣旗', '莫力达瓦达斡尔族自治旗', '鄂伦春自治旗', '鄂温克族自治旗', '陈巴尔虎旗', '新巴尔虎左旗', '新巴尔虎右旗', '满洲里市', '牙克石市', '扎兰屯市', '额尔古纳市', '根河市'] 975 }, 976 { 977 name: '巴彦淖尔市', 978 areaList: ['市辖区', '临河区', '五原县', '磴口县', '乌拉特前旗', '乌拉特中旗', '乌拉特后旗', '杭锦后旗'] 979 }, 980 { 981 name: '乌兰察布市', 982 areaList: ['市辖区', '集宁区', '卓资县', '化德县', '商都县', '兴和县', '凉城县', '察哈尔右翼前旗', '察哈尔右翼中旗', '察哈尔右翼后旗', '四子王旗', '丰镇市'] 983 }, 984 { 985 name: '兴安盟', 986 areaList: ['乌兰浩特市', '阿尔山市', '科尔沁右翼前旗', '科尔沁右翼中旗', '扎赉特旗', '突泉县'] 987 }, 988 { 989 name: '锡林郭勒盟', 990 areaList: ['二连浩特市', '锡林浩特市', '阿巴嘎旗', '苏尼特左旗', '苏尼特右旗', '东乌珠穆沁旗', '西乌珠穆沁旗', '太仆寺旗', '镶黄旗', '正镶白旗', '正蓝旗', '多伦县'] 991 }, 992 { 993 name: '阿拉善盟', 994 areaList: ['阿拉善左旗', '阿拉善右旗', '额济纳旗'] 995 } 996 ] 997 }, 998 { 999 name: '江苏', 1000 cityList: [{ 1001 name: '南京市', 1002 areaList: ['市辖区', '玄武区', '白下区', '秦淮区', '建邺区', '鼓楼区', '下关区', '浦口区', '栖霞区', '雨花台区', '江宁区', '六合区', '溧水县', '高淳县'] 1003 }, 1004 { 1005 name: '无锡市', 1006 areaList: ['市辖区', '崇安区', '南长区', '北塘区', '锡山区', '惠山区', '滨湖区', '江阴市', '宜兴市'] 1007 }, 1008 { 1009 name: '徐州市', 1010 areaList: ['市辖区', '鼓楼区', '云龙区', '九里区', '贾汪区', '泉山区', '丰 县', '沛 县', '铜山县', '睢宁县', '新沂市', '邳州市'] 1011 }, 1012 { 1013 name: '常州市', 1014 areaList: ['市辖区', '天宁区', '钟楼区', '戚墅堰区', '新北区', '武进区', '溧阳市', '金坛市'] 1015 }, 1016 { 1017 name: '苏州市', 1018 areaList: ['市辖区', '沧浪区', '平江区', '金阊区', '虎丘区', '吴中区', '相城区', '常熟市', '张家港市', '昆山市', '吴江市', '太仓市'] 1019 }, 1020 { 1021 name: '南通市', 1022 areaList: ['市辖区', '崇川区', '港闸区', '海安县', '如东县', '启东市', '如皋市', '通州市', '海门市'] 1023 }, 1024 { 1025 name: '连云港市', 1026 areaList: ['市辖区', '连云区', '新浦区', '海州区', '赣榆县', '东海县', '灌云县', '灌南县'] 1027 }, 1028 { 1029 name: '淮安市', 1030 areaList: ['市辖区', '清河区', '楚州区', '淮阴区', '清浦区', '涟水县', '洪泽县', '盱眙县', '金湖县'] 1031 }, 1032 { 1033 name: '盐城市', 1034 areaList: ['市辖区', '亭湖区', '盐都区', '响水县', '滨海县', '阜宁县', '射阳县', '建湖县', '东台市', '大丰市'] 1035 }, 1036 { 1037 name: '扬州市', 1038 areaList: ['市辖区', '广陵区', '邗江区', '郊 区', '宝应县', '仪征市', '高邮市', '江都市'] 1039 }, 1040 { 1041 name: '镇江市', 1042 areaList: ['市辖区', '京口区', '润州区', '丹徒区', '丹阳市', '扬中市', '句容市'] 1043 }, 1044 { 1045 name: '泰州市', 1046 areaList: ['市辖区', '海陵区', '高港区', '兴化市', '靖江市', '泰兴市', '姜堰市'] 1047 }, 1048 { 1049 name: '宿迁市', 1050 areaList: ['市辖区', '宿城区', '宿豫区', '沭阳县', '泗阳县', '泗洪县'] 1051 } 1052 ] 1053 }, 1054 { 1055 name: '浙江', 1056 cityList: [{ 1057 name: '杭州市', 1058 areaList: ['市辖区', '上城区', '下城区', '江干区', '拱墅区', '西湖区', '滨江区', '萧山区', '余杭区', '桐庐县', '淳安县', '建德市', '富阳市', '临安市'] 1059 }, 1060 { 1061 name: '宁波市', 1062 areaList: ['市辖区', '海曙区', '江东区', '江北区', '北仑区', '镇海区', '鄞州区', '象山县', '宁海县', '余姚市', '慈溪市', '奉化市'] 1063 }, 1064 { 1065 name: '温州市', 1066 areaList: ['市辖区', '鹿城区', '龙湾区', '瓯海区', '洞头县', '永嘉县', '平阳县', '苍南县', '文成县', '泰顺县', '瑞安市', '乐清市'] 1067 }, 1068 { 1069 name: '嘉兴市', 1070 areaList: ['市辖区', '秀城区', '秀洲区', '嘉善县', '海盐县', '海宁市', '平湖市', '桐乡市'] 1071 }, 1072 { 1073 name: '湖州市', 1074 areaList: ['市辖区', '吴兴区', '南浔区', '德清县', '长兴县', '安吉县'] 1075 }, 1076 { 1077 name: '绍兴市', 1078 areaList: ['市辖区', '越城区', '绍兴县', '新昌县', '诸暨市', '上虞市', '嵊州市'] 1079 }, 1080 { 1081 name: '金华市', 1082 areaList: ['市辖区', '婺城区', '金东区', '武义县', '浦江县', '磐安县', '兰溪市', '义乌市', '东阳市', '永康市'] 1083 }, 1084 { 1085 name: '衢州市', 1086 areaList: ['市辖区', '柯城区', '衢江区', '常山县', '开化县', '龙游县', '江山市'] 1087 }, 1088 { 1089 name: '舟山市', 1090 areaList: ['市辖区', '定海区', '普陀区', '岱山县', '嵊泗县'] 1091 }, 1092 { 1093 name: '台州市', 1094 areaList: ['市辖区', '椒江区', '黄岩区', '路桥区', '玉环县', '三门县', '天台县', '仙居县', '温岭市', '临海市'] 1095 }, 1096 { 1097 name: '丽水市', 1098 areaList: ['市辖区', '莲都区', '青田县', '缙云县', '遂昌县', '松阳县', '云和县', '庆元县', '景宁畲族自治县', '龙泉市'] 1099 } 1100 ] 1101 }, 1102 { 1103 name: '安徽', 1104 cityList: [{ 1105 name: '合肥市', 1106 areaList: ['市辖区', '瑶海区', '庐阳区', '蜀山区', '包河区', '长丰县', '肥东县', '肥西县'] 1107 }, 1108 { 1109 name: '芜湖市', 1110 areaList: ['市辖区', '镜湖区', '马塘区', '新芜区', '鸠江区', '芜湖县', '繁昌县', '南陵县'] 1111 }, 1112 { 1113 name: '蚌埠市', 1114 areaList: ['市辖区', '龙子湖区', '蚌山区', '禹会区', '淮上区', '怀远县', '五河县', '固镇县'] 1115 }, 1116 { 1117 name: '淮南市', 1118 areaList: ['市辖区', '大通区', '田家庵区', '谢家集区', '八公山区', '潘集区', '凤台县'] 1119 }, 1120 { 1121 name: '马鞍山市', 1122 areaList: ['市辖区', '金家庄区', '花山区', '雨山区', '当涂县'] 1123 }, 1124 { 1125 name: '淮北市', 1126 areaList: ['市辖区', '杜集区', '相山区', '烈山区', '濉溪县'] 1127 }, 1128 { 1129 name: '铜陵市', 1130 areaList: ['市辖区', '铜官山区', '狮子山区', '郊 区', '铜陵县'] 1131 }, 1132 { 1133 name: '安庆市', 1134 areaList: ['市辖区', '迎江区', '大观区', '郊 区', '怀宁县', '枞阳县', '潜山县', '太湖县', '宿松县', '望江县', '岳西县', '桐城市'] 1135 }, 1136 { 1137 name: '黄山市', 1138 areaList: ['市辖区', '屯溪区', '黄山区', '徽州区', '歙 县', '休宁县', '黟 县', '祁门县'] 1139 }, 1140 { 1141 name: '滁州市', 1142 areaList: ['市辖区', '琅琊区', '南谯区', '来安县', '全椒县', '定远县', '凤阳县', '天长市', '明光市'] 1143 }, 1144 { 1145 name: '阜阳市', 1146 areaList: ['市辖区', '颍州区', '颍东区', '颍泉区', '临泉县', '太和县', '阜南县', '颍上县', '界首市'] 1147 }, 1148 { 1149 name: '宿州市', 1150 areaList: ['市辖区', '墉桥区', '砀山县', '萧 县', '灵璧县', '泗 县'] 1151 }, 1152 { 1153 name: '巢湖市', 1154 areaList: ['市辖区', '居巢区', '庐江县', '无为县', '含山县', '和 县'] 1155 }, 1156 { 1157 name: '六安市', 1158 areaList: ['市辖区', '金安区', '裕安区', '寿 县', '霍邱县', '舒城县', '金寨县', '霍山县'] 1159 }, 1160 { 1161 name: '亳州市', 1162 areaList: ['市辖区', '谯城区', '涡阳县', '蒙城县', '利辛县'] 1163 }, 1164 { 1165 name: '池州市', 1166 areaList: ['市辖区', '贵池区', '东至县', '石台县', '青阳县'] 1167 }, 1168 { 1169 name: '宣城市', 1170 areaList: ['市辖区', '宣州区', '郎溪县', '广德县', '泾 县', '绩溪县', '旌德县', '宁国市'] 1171 } 1172 ] 1173 }, 1174 { 1175 name: '福建', 1176 cityList: [{ 1177 name: '福州市', 1178 areaList: ['市辖区', '鼓楼区', '台江区', '仓山区', '马尾区', '晋安区', '闽侯县', '连江县', '罗源县', '闽清县', '永泰县', '平潭县', '福清市', '长乐市'] 1179 }, 1180 { 1181 name: '厦门市', 1182 areaList: ['市辖区', '思明区', '海沧区', '湖里区', '集美区', '同安区', '翔安区'] 1183 }, 1184 { 1185 name: '莆田市', 1186 areaList: ['市辖区', '城厢区', '涵江区', '荔城区', '秀屿区', '仙游县'] 1187 }, 1188 { 1189 name: '三明市', 1190 areaList: ['市辖区', '梅列区', '三元区', '明溪县', '清流县', '宁化县', '大田县', '尤溪县', '沙 县', '将乐县', '泰宁县', '建宁县', '永安市'] 1191 }, 1192 { 1193 name: '泉州市', 1194 areaList: ['市辖区', '鲤城区', '丰泽区', '洛江区', '泉港区', '惠安县', '安溪县', '永春县', '德化县', '金门县', '石狮市', '晋江市', '南安市'] 1195 }, 1196 { 1197 name: '漳州市', 1198 areaList: ['市辖区', '芗城区', '龙文区', '云霄县', '漳浦县', '诏安县', '长泰县', '东山县', '南靖县', '平和县', '华安县', '龙海市'] 1199 }, 1200 { 1201 name: '南平市', 1202 areaList: ['市辖区', '延平区', '顺昌县', '浦城县', '光泽县', '松溪县', '政和县', '邵武市', '武夷山市', '建瓯市', '建阳市'] 1203 }, 1204 { 1205 name: '龙岩市', 1206 areaList: ['市辖区', '新罗区', '长汀县', '永定县', '上杭县', '武平县', '连城县', '漳平市'] 1207 }, 1208 { 1209 name: '宁德市', 1210 areaList: ['市辖区', '蕉城区', '霞浦县', '古田县', '屏南县', '寿宁县', '周宁县', '柘荣县', '福安市', '福鼎市'] 1211 } 1212 ] 1213 }, 1214 { 1215 name: '江西', 1216 cityList: [{ 1217 name: '南昌市', 1218 areaList: ['市辖区', '东湖区', '西湖区', '青云谱区', '湾里区', '青山湖区', '南昌县', '新建县', '安义县', '进贤县'] 1219 }, 1220 { 1221 name: '景德镇市', 1222 areaList: ['市辖区', '昌江区', '珠山区', '浮梁县', '乐平市'] 1223 }, 1224 { 1225 name: '萍乡市', 1226 areaList: ['市辖区', '安源区', '湘东区', '莲花县', '上栗县', '芦溪县'] 1227 }, 1228 { 1229 name: '九江市', 1230 areaList: ['市辖区', '庐山区', '浔阳区', '九江县', '武宁县', '修水县', '永修县', '德安县', '星子县', '都昌县', '湖口县', '彭泽县', '瑞昌市'] 1231 }, 1232 { 1233 name: '新余市', 1234 areaList: ['市辖区', '渝水区', '分宜县'] 1235 }, 1236 { 1237 name: '鹰潭市', 1238 areaList: ['市辖区', '月湖区', '余江县', '贵溪市'] 1239 }, 1240 { 1241 name: '赣州市', 1242 areaList: ['市辖区', '章贡区', '赣 县', '信丰县', '大余县', '上犹县', '崇义县', '安远县', '龙南县', '定南县', '全南县', '宁都县', '于都县', '兴国县', '会昌县', '寻乌县', '石城县', '瑞金市', '南康市'] 1243 }, 1244 { 1245 name: '吉安市', 1246 areaList: ['市辖区', '吉州区', '青原区', '吉安县', '吉水县', '峡江县', '新干县', '永丰县', '泰和县', '遂川县', '万安县', '安福县', '永新县', '井冈山市'] 1247 }, 1248 { 1249 name: '宜春市', 1250 areaList: ['市辖区', '袁州区', '奉新县', '万载县', '上高县', '宜丰县', '靖安县', '铜鼓县', '丰城市', '樟树市', '高安市'] 1251 }, 1252 { 1253 name: '抚州市', 1254 areaList: ['市辖区', '临川区', '南城县', '黎川县', '南丰县', '崇仁县', '乐安县', '宜黄县', '金溪县', '资溪县', '东乡县', '广昌县'] 1255 }, 1256 { 1257 name: '上饶市', 1258 areaList: ['市辖区', '信州区', '上饶县', '广丰县', '玉山县', '铅山县', '横峰县', '弋阳县', '余干县', '鄱阳县', '万年县', '婺源县', '德兴市'] 1259 } 1260 ] 1261 }, 1262 { 1263 name: '山东', 1264 cityList: [{ 1265 name: '济南市', 1266 areaList: ['市辖区', '历下区', '市中区', '槐荫区', '天桥区', '历城区', '长清区', '平阴县', '济阳县', '商河县', '章丘市'] 1267 }, 1268 { 1269 name: '青岛市', 1270 areaList: ['市辖区', '市南区', '市北区', '四方区', '黄岛区', '崂山区', '李沧区', '城阳区', '胶州市', '即墨市', '平度市', '胶南市', '莱西市'] 1271 }, 1272 { 1273 name: '淄博市', 1274 areaList: ['市辖区', '淄川区', '张店区', '博山区', '临淄区', '周村区', '桓台县', '高青县', '沂源县'] 1275 }, 1276 { 1277 name: '枣庄市', 1278 areaList: ['市辖区', '市中区', '薛城区', '峄城区', '台儿庄区', '山亭区', '滕州市'] 1279 }, 1280 { 1281 name: '东营市', 1282 areaList: ['市辖区', '东营区', '河口区', '垦利县', '利津县', '广饶县'] 1283 }, 1284 { 1285 name: '烟台市', 1286 areaList: ['市辖区', '芝罘区', '福山区', '牟平区', '莱山区', '长岛县', '龙口市', '莱阳市', '莱州市', '蓬莱市', '招远市', '栖霞市', '海阳市'] 1287 }, 1288 { 1289 name: '潍坊市', 1290 areaList: ['市辖区', '潍城区', '寒亭区', '坊子区', '奎文区', '临朐县', '昌乐县', '青州市', '诸城市', '寿光市', '安丘市', '高密市', '昌邑市'] 1291 }, 1292 { 1293 name: '济宁市', 1294 areaList: ['市辖区', '市中区', '任城区', '微山县', '鱼台县', '金乡县', '嘉祥县', '汶上县', '泗水县', '梁山县', '曲阜市', '兖州市', '邹城市'] 1295 }, 1296 { 1297 name: '泰安市', 1298 areaList: ['市辖区', '泰山区', '岱岳区', '宁阳县', '东平县', '新泰市', '肥城市'] 1299 }, 1300 { 1301 name: '威海市', 1302 areaList: ['市辖区', '环翠区', '文登市', '荣成市', '乳山市'] 1303 }, 1304 { 1305 name: '日照市', 1306 areaList: ['市辖区', '东港区', '岚山区', '五莲县', '莒 县'] 1307 }, 1308 { 1309 name: '莱芜市', 1310 areaList: ['市辖区', '莱城区', '钢城区'] 1311 }, 1312 { 1313 name: '临沂市', 1314 areaList: ['市辖区', '兰山区', '罗庄区', '河东区', '沂南县', '郯城县', '沂水县', '苍山县', '费 县', '平邑县', '莒南县', '蒙阴县', '临沭县'] 1315 }, 1316 { 1317 name: '德州市', 1318 areaList: ['市辖区', '德城区', '陵 县', '宁津县', '庆云县', '临邑县', '齐河县', '平原县', '夏津县', '武城县', '乐陵市', '禹城市'] 1319 }, 1320 { 1321 name: '聊城市', 1322 areaList: ['市辖区', '东昌府区', '阳谷县', '莘 县', '茌平县', '东阿县', '冠 县', '高唐县', '临清市'] 1323 }, 1324 { 1325 name: '滨州市', 1326 areaList: ['市辖区', '滨城区', '惠民县', '阳信县', '无棣县', '沾化县', '博兴县', '邹平县'] 1327 }, 1328 { 1329 name: '荷泽市', 1330 areaList: ['市辖区', '牡丹区', '曹 县', '单 县', '成武县', '巨野县', '郓城县', '鄄城县', '定陶县', '东明县'] 1331 } 1332 ] 1333 }, 1334 { 1335 name: '辽宁', 1336 cityList: [{ 1337 name: '沈阳市', 1338 areaList: ['市辖区', '和平区', '沈河区', '大东区', '皇姑区', '铁西区', '苏家屯区', '东陵区', '新城子区', '于洪区', '辽中县', '康平县', '法库县', '新民市'] 1339 }, 1340 { 1341 name: '大连市', 1342 areaList: ['市辖区', '中山区', '西岗区', '沙河口区', '甘井子区', '旅顺口区', '金州区', '长海县', '瓦房店市', '普兰店市', '庄河市'] 1343 }, 1344 { 1345 name: '鞍山市', 1346 areaList: ['市辖区', '铁东区', '铁西区', '立山区', '千山区', '台安县', '岫岩满族自治县', '海城市'] 1347 }, 1348 { 1349 name: '抚顺市', 1350 areaList: ['市辖区', '新抚区', '东洲区', '望花区', '顺城区', '抚顺县', '新宾满族自治县', '清原满族自治县'] 1351 }, 1352 { 1353 name: '本溪市', 1354 areaList: ['市辖区', '平山区', '溪湖区', '明山区', '南芬区', '本溪满族自治县', '桓仁满族自治县'] 1355 }, 1356 { 1357 name: '丹东市', 1358 areaList: ['市辖区', '元宝区', '振兴区', '振安区', '宽甸满族自治县', '东港市', '凤城市'] 1359 }, 1360 { 1361 name: '锦州市', 1362 areaList: ['市辖区', '古塔区', '凌河区', '太和区', '黑山县', '义 县', '凌海市', '北宁市'] 1363 }, 1364 { 1365 name: '营口市', 1366 areaList: ['市辖区', '站前区', '西市区', '鲅鱼圈区', '老边区', '盖州市', '大石桥市'] 1367 }, 1368 { 1369 name: '阜新市', 1370 areaList: ['市辖区', '海州区', '新邱区', '太平区', '清河门区', '细河区', '阜新蒙古族自治县', '彰武县'] 1371 }, 1372 { 1373 name: '辽阳市', 1374 areaList: ['市辖区', '白塔区', '文圣区', '宏伟区', '弓长岭区', '太子河区', '辽阳县', '灯塔市'] 1375 }, 1376 { 1377 name: '盘锦市', 1378 areaList: ['市辖区', '双台子区', '兴隆台区', '大洼县', '盘山县'] 1379 }, 1380 { 1381 name: '铁岭市', 1382 areaList: ['市辖区', '银州区', '清河区', '铁岭县', '西丰县', '昌图县', '调兵山市', '开原市'] 1383 }, 1384 { 1385 name: '朝阳市', 1386 areaList: ['市辖区', '双塔区', '龙城区', '朝阳县', '建平县', '喀喇沁左翼蒙古族自治县', '北票市', '凌源市'] 1387 }, 1388 { 1389 name: '葫芦岛市', 1390 areaList: ['市辖区', '连山区', '龙港区', '南票区', '绥中县', '建昌县', '兴城市'] 1391 } 1392 ] 1393 }, 1394 { 1395 name: '吉林', 1396 cityList: [{ 1397 name: '长春市', 1398 areaList: ['市辖区', '南关区', '宽城区', '朝阳区', '二道区', '绿园区', '双阳区', '农安县', '九台市', '榆树市', '德惠市'] 1399 }, 1400 { 1401 name: '吉林市', 1402 areaList: ['市辖区', '昌邑区', '龙潭区', '船营区', '丰满区', '永吉县', '蛟河市', '桦甸市', '舒兰市', '磐石市'] 1403 }, 1404 { 1405 name: '四平市', 1406 areaList: ['市辖区', '铁西区', '铁东区', '梨树县', '伊通满族自治县', '公主岭市', '双辽市'] 1407 }, 1408 { 1409 name: '辽源市', 1410 areaList: ['市辖区', '龙山区', '西安区', '东丰县', '东辽县'] 1411 }, 1412 { 1413 name: '通化市', 1414 areaList: ['市辖区', '东昌区', '二道江区', '通化县', '辉南县', '柳河县', '梅河口市', '集安市'] 1415 }, 1416 { 1417 name: '白山市', 1418 areaList: ['市辖区', '八道江区', '抚松县', '靖宇县', '长白朝鲜族自治县', '江源县', '临江市'] 1419 }, 1420 { 1421 name: '松原市', 1422 areaList: ['市辖区', '宁江区', '前郭尔罗斯蒙古族自治县', '长岭县', '乾安县', '扶余县'] 1423 }, 1424 { 1425 name: '白城市', 1426 areaList: ['市辖区', '洮北区', '镇赉县', '通榆县', '洮南市', '大安市'] 1427 }, 1428 { 1429 name: '延边朝鲜族自治州', 1430 areaList: ['延吉市', '图们市', '敦化市', '珲春市', '龙井市', '和龙市', '汪清县', '安图县'] 1431 } 1432 ] 1433 }, 1434 { 1435 name: '黑龙江', 1436 cityList: [{ 1437 name: '哈尔滨市', 1438 areaList: ['市辖区', '道里区', '南岗区', '道外区', '香坊区', '动力区', '平房区', '松北区', '呼兰区', '依兰县', '方正县', '宾 县', '巴彦县', '木兰县', '通河县', '延寿县', '阿城市', '双城市', '尚志市', '五常市'] 1439 }, 1440 { 1441 name: '齐齐哈尔市', 1442 areaList: ['市辖区', '龙沙区', '建华区', '铁锋区', '昂昂溪区', '富拉尔基区', '碾子山区', '梅里斯达斡尔族区', '龙江县', '依安县', '泰来县', '甘南县', '富裕县', '克山县', '克东县', '拜泉县', '讷河市'] 1443 }, 1444 { 1445 name: '鸡西市', 1446 areaList: ['市辖区', '鸡冠区', '恒山区', '滴道区', '梨树区', '城子河区', '麻山区', '鸡东县', '虎林市', '密山市'] 1447 }, 1448 { 1449 name: '鹤岗市', 1450 areaList: ['市辖区', '向阳区', '工农区', '南山区', '兴安区', '东山区', '兴山区', '萝北县', '绥滨县'] 1451 }, 1452 { 1453 name: '双鸭山市', 1454 areaList: ['市辖区', '尖山区', '岭东区', '四方台区', '宝山区', '集贤县', '友谊县', '宝清县', '饶河县'] 1455 }, 1456 { 1457 name: '大庆市', 1458 areaList: ['市辖区', '萨尔图区', '龙凤区', '让胡路区', '红岗区', '大同区', '肇州县', '肇源县', '林甸县', '杜尔伯特蒙古族自治县'] 1459 }, 1460 { 1461 name: '伊春市', 1462 areaList: ['市辖区', '伊春区', '南岔区', '友好区', '西林区', '翠峦区', '新青区', '美溪区', '金山屯区', '五营区', '乌马河区', '汤旺河区', '带岭区', '乌伊岭区', '红星区', '上甘岭区', '嘉荫县', '铁力市'] 1463 }, 1464 { 1465 name: '佳木斯市', 1466 areaList: ['市辖区', '永红区', '向阳区', '前进区', '东风区', '郊 区', '桦南县', '桦川县', '汤原县', '抚远县', '同江市', '富锦市'] 1467 }, 1468 { 1469 name: '七台河市', 1470 areaList: ['市辖区', '新兴区', '桃山区', '茄子河区', '勃利县'] 1471 }, 1472 { 1473 name: '牡丹江市', 1474 areaList: ['市辖区', '东安区', '阳明区', '爱民区', '西安区', '东宁县', '林口县', '绥芬河市', '海林市', '宁安市', '穆棱市'] 1475 }, 1476 { 1477 name: '黑河市', 1478 areaList: ['市辖区', '爱辉区', '嫩江县', '逊克县', '孙吴县', '北安市', '五大连池市'] 1479 }, 1480 { 1481 name: '绥化市', 1482 areaList: ['市辖区', '北林区', '望奎县', '兰西县', '青冈县', '庆安县', '明水县', '绥棱县', '安达市', '肇东市', '海伦市'] 1483 }, 1484 { 1485 name: '大兴安岭地区', 1486 areaList: ['呼玛县', '塔河县', '漠河县'] 1487 } 1488 ] 1489 }, 1490 { 1491 name: '海南', 1492 cityList: [{ 1493 name: '海口市', 1494 areaList: ['市辖区', '秀英区', '龙华区', '琼山区', '美兰区'] 1495 }, 1496 { 1497 name: '三亚市', 1498 areaList: ['市辖区'] 1499 }, 1500 { 1501 name: '省直辖县级行政单位', 1502 areaList: ['五指山市', '琼海市', '儋州市', '文昌市', '万宁市', '东方市', '定安县', '屯昌县', '澄迈县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县', '西沙群岛', '南沙群岛', '中沙群岛的岛礁及其海域'] 1503 } 1504 ] 1505 }, 1506 { 1507 name: '台湾', 1508 cityList: [] 1509 }, 1510 { 1511 name: '香港', 1512 cityList: [] 1513 }, 1514 { 1515 name: '澳门', 1516 cityList: [] 1517 } 1518 ];
1 /** 2 * 根据选择器sel获取一个dom元素对象 3 * @param {String} sel 选择器 4 * @param {Object} ele dom元素对象 5 * @returns {Object} 查找到的dom元素对象 6 */ 7 function get (sel,ele= document) { 8 return ele.querySelector(sel); 9 } 10 11 /** 12 * 根据选择器sel获取多个dom元素对象 13 * @param {String} sel 选择器 14 * @param {Object} ele dom元素对象 15 * @returns {Array} 查找到的多个dom元素对象 16 */ 17 function gets (sel,ele= document) { 18 return ele.querySelectorAll(sel); 19 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 padding: 0; 12 margin: 0; 13 } 14 15 .wrap { 16 width: 1000px; 17 margin: 100px auto; 18 text-align: center; 19 } 20 select { 21 width: 200px; 22 height: 36px; 23 font-size: 24px; 24 outline: none; 25 } 26 </style> 27 </head> 28 29 <body> 30 31 <div class="father"> 32 父亲 33 <div class="son">儿子</div> 34 </div> 35 36 37 <div class="wrap"> 38 <select id="province"> 39 <!-- <option>--请选择--</option> --> 40 </select> 41 <select id="city"> 42 <option>--请选择--</option> 43 </select> 44 <select id="area"> 45 <option>--请选择--</option> 46 </select> 47 </div> 48 <script src="./js/dom.js"></script> 49 <script src="./js/data.js"></script> 50 51 <script> 52 53 // 1. 获取省市区 54 // 省 55 let province = get('#province'); 56 // 市 57 let city = get('#city'); 58 // 区 59 let area = get('#area'); 60 61 62 // 给省绑定click事件 63 province.addEventListener('click', function () { 64 // console.log('province.selectedIndex',province.selectedIndex ); 65 // 省份下标 66 let pIndex = province.selectedIndex -1; 67 // 重置区县 68 area.selectedIndex = 0; 69 70 // 渲染市 71 render(city, data[pIndex].cityList); 72 }); 73 74 // 给市city绑定click事件 75 city.addEventListener('click', function () { 76 // 省下标 77 let pIndex = province.selectedIndex -1; 78 // 市下标 79 let cIndex = city.selectedIndex -1; 80 // 区县的数据 81 let list = data[pIndex].cityList[cIndex].areaList; 82 // 渲染区县 83 render(area, list); 84 }); 85 86 87 88 // 渲染省 89 render(province, data); 90 91 92 // 渲染 93 function render (ele, data) { 94 ele.innerHTML ='<option>--请选择--</option>'+ data.map(function (item) { 95 return `<option>${item.name || item}</option>`; 96 }); 97 } 98 99 100 101 102 103 104 105 </script> 106 </body> 107 108 </html>
思路：
- 渲染的重复使用，使用innerhtml加数组map进行渲染，结尾加join
- item.name || item 的逻辑选择
知识点：
- selectedIndex复选框内选项的下标
- 开发中的注释
1 /** 2 * 根据选择器sel获取一个dom元素对象 3 * @param {String} sel 选择器 4 * @param {Object} ele dom元素对象 5 * @returns {Object} 查找到的dom元素对象 6 */
- 函数封装 实参和形参的位置
1 function gets (sel,ele= document) { 2 return ele.querySelectorAll(sel); 3 }
楼层
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 padding: 0; 12 margin: 0; 13 list-style: none; 14 } 15 16 ul { 17 position: fixed; 18 top: 50%; 19 right: 10px; 20 width: 80px; 21 } 22 23 ul li { 24 background-color: green; 25 margin-bottom: 10px; 26 width: 100%; 27 height: 36px; 28 line-height: 36px; 29 text-align: center; 30 color: #ddd; 31 } 32 33 .content { 34 margin: 0 auto; 35 width: 1000px; 36 font-size: 500px; 37 color: #fff; 38 } 39 40 .content .box { 41 height: 1000px; 42 line-height: 1000px; 43 text-align: center; 44 } 45 46 ul li.active { 47 background-color: purple; 48 } 49 </style> 50 </head> 51 52 <body> 53 <!-- 右楼层 --> 54 <div class="warp"> 55 <ul> 56 <!-- <li>1</li> 57 <li>2</li> 58 <li>3</li> 59 <li>4</li> 60 <li>5</li> --> 61 </ul> 62 63 <div class="content"> 64 <!-- <div class="box">1</div> 65 <div class="box">2</div> 66 <div class="box">3</div> 67 <div class="box">4</div> 68 <div class="box">5</div> --> 69 </div> 70 71 72 </div> 73 74 </body> 75 <script> 76 let ul = document.querySelector('ul'); 77 let content = document.querySelector('.content'); 78 // 定义排序 79 let data = [1, 2, 3, 4, 5]; 80 let index = 0; 81 let pageY = 0; 82 // 提前渲染 83 renderFloor(); 84 renderContent(); 85 // 主楼层滚动 86 window.addEventListener('scroll', function () { 87 pageY = window.pageYOffset; 88 index = Math.floor(pageY / content.children[0].offsetHeight); 89 renderFloor(); 90 }) 91 // 副楼层点击 92 ul.addEventListener('click', function (e = e || window.event) { 93 if (e.target.nodeName == 'LI') { 94 let index = +e.target.innerHTML; 95 window.scrollTo(0, (index - 1) * content.children[0].offsetHeight); 96 } 97 renderFloor() 98 }) 99 // 渲染副楼层 100 function renderFloor() { 101 ul.innerHTML = data.map(function (item, i) { 102 return `<li class = ${index == i ? 'active' : ''}> ${item}</li>`; 103 }).join(''); 104 } 105 // 渲染主楼层 106 function renderContent() { 107 content.innerHTML = data.map(function (item, index) { 108 return `<div class = "box" style = "background-color:rgb(${getRandom(0, 255)},${getRandom(0, 255)},${getRandom(0, 255)})">${item}</div>`; 109 }).join(''); 110 } 111 // 封装随机数 112 function getRandom(min, max) { 113 return Math.floor(Math.random() * (max - min + 1) + min); 114 } 115 </script> 116 117 118 </html>
思路：
- 代码思路编写中，要重视整体框架的构思，一个好的框架既能节约时间，又清爽。注意开发规范才能提高水平。
- 滚动，点击均重新渲染。渲染的模块！
- 定义“位置函数”
- 数学函数的使用（取整）
知识点：
- 行内式<style="background-color：rgb();">
-
+e.target.innerHTML 字符串隐式转换为数字类型
- window的scroll事件
-
window.scrollTo((x距离页面坐标，y页面坐标);
本地存储
sessionStorage
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <input type="text" placeholder="请输入内容"> 10 <button>set 存储数据</button> 11 <button>get 获取数据</button> 12 <button>remove 删除数据</button> 13 <button>clear 清空数据</button> 14 <button>调转新页面</button> 15 16 <script> 17 // 1. 获取所有button 18 let btns = document.querySelectorAll('button'); 19 let ipt = document.querySelector('input'); 20 21 // 存数据 22 btns[0].addEventListener('click', function () { 23 // 设置数据(用户输入) 24 let obj = [{name:'张三'},{name:'李四'}]; 25 // 字符串序列化 对象类型 26 obj = JSON.stringify(obj); 27 sessionStorage.setItem('u_name', obj); 28 // sessionStorage.setItem('u_age', 20); 29 }); 30 31 // 获取数据 32 btns[1].addEventListener('click', function () { 33 console.log(sessionStorage.getItem('u_name')); 34 }); 35 // 删除数据 36 btns[2].addEventListener('click', function () { 37 sessionStorage.removeItem('u_name'); 38 }); 39 40 // 清空数据 41 btns[3].addEventListener('click', function () { 42 sessionStorage.clear(); 43 }); 44 45 btns[4].addEventListener('click', function () { 46 location.href = 'http://127.0.0.1:5500/index.html'; 47 }); 48 49 </script> 50 </body> 51 </html>
知识点：
- 字符串序列化
1 // 设置数据(用户输入) 2 let obj = [{name:'张三'},{name:'李四'}]; 3 // 字符串序列化 对象类型 4 obj = JSON.stringify(obj); 5 sessionStorage.setItem('u_name', obj);
-
location.href = 'http://127.0.0.1:5500/index.html';跳转页面
localStorage
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <input type="text" placeholder="请输入内容"> 10 <button>set 存储数据</button> 11 <button>get 获取数据</button> 12 <button>remove 删除数据</button> 13 <button>clear 清空数据</button> 14 <button>调转新页面</button> 15 16 <script> 17 // 1. 获取所有button 18 let btns = document.querySelectorAll('button'); 19 let ipt = document.querySelector('input'); 20 21 // 存数据 22 btns[0].addEventListener('click', function () { 23 // 设置数据(用户输入) 24 let obj = [{name:'张三'},{name:'李四'}]; 25 // 设置数据(用户输入) 26 localStorage.setItem('u_name', JSON.stringify(obj)); 27 localStorage.setItem('u_age', 20); 28 }); 29 30 // 获取数据 31 btns[1].addEventListener('click', function () { 32 console.log(localStorage.getItem('u_name')); 33 }); 34 // 删除数据 35 btns[2].addEventListener('click', function () { 36 localStorage.removeItem('u_name'); 37 }); 38 39 // 清空数据 40 btns[3].addEventListener('click', function () { 41 localStorage.clear(); 42 }); 43 44 btns[4].addEventListener('click', function () { 45 location.href = 'http://127.0.0.1:5500/index.html'; 46 }); 47 48 </script> 49 </body> 50 </html>
知识点：
- 原理同上
JSON序列化
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <h1>首页</h1> 10 11 <script> 12 13 // console.log(sessionStorage.getItem('u_name')); 14 // console.log(localStorage.getItem('u_name')); 15 16 let obj = sessionStorage.getItem('u_name'); 17 // JSON序列化 18 console.log(JSON.parse(obj)); 19 20 21 </script> 22 </body> 23 </html>
DOM/BOM 期末考试（必考题）
产品切换案例
购物栏
思路：利用data-index进行记序
1 <!DOCTYPE html> 2 <html> 3 4 <head lang="en"> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 ul { 14 list-style: none; 15 } 16 17 .wrapper { 18 width: 1000px; 19 height: 475px; 20 margin: 0 auto; 21 margin-top: 100px; 22 } 23 24 .tab { 25 border: 1px solid #ddd; 26 border-bottom: 0; 27 height: 36px; 28 width: 320px; 29 } 30 31 .tab li { 32 position: relative; 33 float: left; 34 width: 80px; 35 height: 34px; 36 line-height: 34px; 37 text-align: center; 38 cursor: pointer; 39 border-top: 4px solid #fff; 40 } 41 42 .tab span { 43 position: absolute; 44 right: 0; 45 top: 10px; 46 background: #ddd; 47 width: 1px; 48 height: 14px; 49 overflow: hidden; 50 } 51 52 .products { 53 width: 1002px; 54 border: 1px solid #ddd; 55 height: 476px; 56 } 57 58 .products .main { 59 float: left; 60 display: none; 61 } 62 63 .products .main.selected { 64 display: block; 65 } 66 67 .tab li.active { 68 border-color: red; 69 border-bottom: 0; 70 } 71 </style> 72 73 74 75 </head> 76 77 <body> 78 <div class="wrapper"> 79 <ul class="tab"> 80 <li data-index = '0' class="tab-item active">国际大牌<span>◆</span></li> 81 <li data-index = '1' class="tab-item">国妆名牌<span>◆</span></li> 82 <li data-index = '2' class="tab-item">清洁用品<span>◆</span></li> 83 <li data-index = '3' class="tab-item">男士精品</li> 84 </ul> 85 <div class="products"> 86 <div class="main selected"> 87 <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a> 88 </div> 89 <div class="main"> 90 <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a> 91 </div> 92 <div class="main"> 93 <a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a> 94 </div> 95 <div class="main"> 96 <a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a> 97 </div> 98 </div> 99 </div> 100 <script> 101 // 获取tab 102 let tab = document.querySelector('.tab'); 103 // 获取所有内容main 104 let mains = document.querySelectorAll('.main'); 105 // 默认高亮下标 106 let index = 0; 107 108 // 给table添加mouseover事件 109 tab.addEventListener('mouseover', function (e = e || window.event) { 110 // 是否是li 111 if (e.target.nodeName == 'LI') { 112 // 清除高亮 113 tab.children[index].classList.remove('active'); 114 // 给当前元素添加高亮 115 e.target.classList.add('active'); 116 // 隐藏上一个内容 117 mains[index].classList.remove('selected'); 118 // 获取当前元素下标 119 index = +e.target.getAttribute('data-index'); 120 // 显示对应的内容 121 mains[index].classList.add('selected'); 122 123 } 124 }); 125 126 </script> 127 </body> 128 129 </html>
游戏装备栏
知识点:设置自定义属性setattribute('属性名','属性值')
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 padding: 0; 12 margin: 0; 13 list-style: none; 14 } 15 16 .container { 17 width: 800px; 18 margin: 10px auto; 19 } 20 21 ul { 22 float: left; 23 } 24 25 ul li { 26 margin-top: 10px; 27 } 28 29 .content { 30 margin-left: 50px; 31 width: 500px; 32 float: left; 33 border: 1px solid #999; 34 } 35 36 .content p { 37 margin-top: 20px; 38 } 39 40 .active { 41 background: hotpink; 42 } 43 44 .item img { 45 width: 90px; 46 height: 90px; 47 } 48 49 .item { 50 display: none; 51 } 52 53 .selected { 54 display: block; 55 } 56 </style> 57 </head> 58 59 <body> 60 <div class="container"> 61 <ul> 62 <li class="title active">choose</li> 63 <li class="title">pay</li> 64 <li class="title">ship</li> 65 </ul> 66 <div class="content"> 67 <div class="item selected"> 68 <img src="./img/1.jpg" alt=""> 69 <p>choose your gift</p> 70 </div> 71 <div class="item"> 72 <img src="./img/2.jpg" alt=""> 73 <p>give you gift</p> 74 </div> 75 <div class="item"> 76 <img src="./img/3.jpg" alt=""> 77 <p>thank you very much</p> 78 </div> 79 </div> 80 </div> 81 <script> 82 let ul = document.querySelector('ul'); 83 let index = 0; 84 let lis = document.querySelectorAll('li'); 85 for (let i = 0; i < 3; i++) { 86 lis[i].setAttribute('data-index',`${i}`); 87 } 88 console.log(lis); 89 let items = document.querySelectorAll('.item'); 90 ul.addEventListener('click',function(e = e || window.event){ 91 lis[index].classList.remove('active'); 92 e.target.classList.add('active'); 93 items[index].classList.remove('selected'); 94 index = +e.target.getAttribute('data-index'); 95 items[index].classList.add('selected'); 96 }) 97 </script> 98 99 </body> 100 101 </html>
动态创建表格
知识点：有关创建元素的细节
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="css/user.css"> 10 </head> 11 12 <body> 13 <button>动态创建表格</button> 14 <!-- <div id="box1"> 15 16 </div> --> 17 18 <script> 19 20 // 后端的数据 21 var heads = ['姓名', '年龄', '性别', '学号', '薪资', '城市', '操作']; 22 var datas = [{ 23 name: '欧阳霸天', 24 age: 19, 25 gender: '男', 26 stuId: '1001', 27 salary: '20000', 28 city: '上海' 29 }, 30 { 31 name: '令狐霸天', 32 age: 19, 33 gender: '男', 34 stuId: '1001', 35 salary: '20000', 36 city: '北京' 37 }, 38 { 39 name: '诸葛霸天', 40 age: 19, 41 gender: '男', 42 stuId: '1001', 43 salary: '20000', 44 city: '南京' 45 }, 46 { 47 name: '西门霸天', 48 age: 19, 49 gender: '男', 50 stuId: '1001', 51 salary: '20000', 52 city: '深圳' 53 }, 54 { 55 name: '上官霸天', 56 age: 19, 57 gender: '男', 58 stuId: '1001', 59 salary: '20000', 60 city: '北京' 61 }, 62 { 63 name: '欧阳霸天', 64 age: 19, 65 gender: '男', 66 stuId: '1001', 67 salary: '20000', 68 city: '上海' 69 }, 70 { 71 name: '令狐霸天', 72 age: 19, 73 gender: '男', 74 stuId: '1001', 75 salary: '20000', 76 city: '北京' 77 }, 78 { 79 name: '诸葛霸天', 80 age: 19, 81 gender: '男', 82 stuId: '1001', 83 salary: '20000', 84 city: '南京' 85 }, 86 { 87 name: '西门霸天', 88 age: 19, 89 gender: '男', 90 stuId: '1001', 91 salary: '20000', 92 city: '深圳' 93 }, 94 { 95 name: '上官霸天', 96 age: 19, 97 gender: '男', 98 stuId: '1001', 99 salary: '20000', 100 city: '北京' 101 }, 102 ]; 103 104 let btn = document.querySelector('button'); 105 btn.addEventListener('click', function () { 106 let table = document.querySelector('table'); 107 if (table == null) { 108 // 渲染标题 109 div = document.createElement('div'); 110 document.body.appendChild(div); 111 div.id = 'box1'; 112 let h3 = document.createElement('h3'); 113 h3.style.color = '#fff'; 114 h3.style.textAlign = 'center'; 115 h3.style.fontSize = '36px'; 116 h3.innerHTML = '就业榜'; 117 div.appendChild(h3); 118 render(); 119 } 120 }) 121 122 // 渲染表格 123 function render() { 124 let table = document.createElement('table'); 125 let thead = document.createElement('thead'); 126 let tbody = document.createElement('tbody'); 127 table.appendChild(thead); 128 table.appendChild(tbody); 129 let tr = document.createElement('tr'); 130 tr.innerHTML = heads.map(function (item) { 131 return `<th>${item}</th>`; 132 }).join(''); 133 thead.appendChild(tr); 134 135 tbody.innerHTML = datas.map(function (item) { 136 return `<tr> 137 <td>${item.name}</td> 138 <td>${item.age}</td> 139 <td>${item.gender}</td> 140 <td>${item.stuId}</td> 141 <td>${item.salary}</td> 142 <td>${item.city}</td> 143 <td><a>删除</a></td> 144 <tr> 145 `; 146 }).join(''); 147 div.appendChild(table); 148 149 150 table.addEventListener('click',function(e = e || window.event){ 151 152 if (e.target.nodeName == 'A') { 153 let yea = confirm('确定删除吗'); 154 if (yea == true) { 155 e.target.parentNode.parentNode.remove(); 156 if (tbody.children.length == 10) { 157 div.innerHTML = ''; 158 } 159 } 160 161 } 162 }) 163 } 164 </script> 165 </body> 166 167 </html>
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 body { 6 background:rgb(2, 78, 15); 7 } 8 button{ 9 width: 150px; 10 height: 30px; 11 display: block; 12 margin: 10px auto; 13 background: goldenrod; 14 color: #fff; 15 border-radius: 15px; 16 line-height: 30px; 17 outline: none; 18 border: none; 19 font-size: 18px; 20 } 21 a { 22 text-decoration: none; 23 color:#aaa; 24 } 25 caption { 26 text-align: center; 27 color:#fff; 28 margin: 20px 0; 29 font-size: 25px; 30 31 } 32 table { 33 margin:0 auto; 34 width: 800px; 35 border-collapse: collapse; 36 } 37 th { 38 padding: 10px; 39 background: purple; 40 color:gold; 41 font-size: 20px; 42 } 43 td,th { 44 border:1px solid #ccc; 45 } 46 td { 47 padding:10px; 48 color:#666; 49 text-align: center; 50 font-size: 16px; 51 } 52 tbody tr { 53 background: #fff; 54 } 55 tbody tr:hover { 56 background: gold; 57 }
购物车
思路：模块化，函数封装
知识点：Array.from(目标) 将伪数组转为数组
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 table { 16 margin: 100px auto; 17 border-collapse: collapse; 18 } 19 20 td, 21 td { 22 text-align: center; 23 padding: 20px; 24 } 25 26 td img { 27 width: 50px; 28 height: 50px; 29 } 30 31 #num { 32 width: 50px; 33 height: 20px; 34 line-height: 20px; 35 outline: none; 36 } 37 38 button { 39 width: 36px; 40 height: 24px; 41 line-height: 24px; 42 text-align: center; 43 border-radius: 8px; 44 } 45 </style> 46 </head> 47 48 <body> 49 <div class="warp"> 50 <table border="1"> 51 <thead> 52 <tr> 53 <th></th> 54 <th>名称</th> 55 <th>单价</th> 56 <th>数量</th> 57 <th>小计</th> 58 </tr> 59 </thead> 60 <tbody> 61 62 <!-- <tr> 63 <td> 64 <input type="checkbox" name="" id=""> 65 </td> 66 <td> 67 <img src="./imgs/1.jpg" alt=""> 68 <p>Casio/卡西欧 EX-TR350</p> 69 </td> 70 <td> 71 <span>5000</span> 72 </td> 73 <td> 74 <button>-</button> 75 <input type="text" id="num" value="1"> 76 <button>+</button> 77 </td> 78 <td> 79 <span>5000</span> 80 </td> 81 </tr> --> 82 </tbody> 83 <tfoot> 84 <tr> 85 <td> 86 <input type="checkbox" name="" id="all">全选 87 </td> 88 <td colspan="2"> 89 <span>总量:</span> 90 <span>0</span> 91 </td> 92 <td colspan="2"> 93 <span>总金额:</span> 94 <span>0</span> 95 </td> 96 </tr> 97 </tfoot> 98 </table> 99 </div> 100 <script src="./libs/data.js"></script> 101 <script> 102 103 // 获取tbody单选按钮 104 let tbody = document.querySelector('tbody'); 105 // 获取tfoot中 106 let tfoot = document.querySelector('tfoot'); 107 // 全选按钮 108 let all = document.querySelector('#all'); 109 110 111 // 渲染tbody 112 render(shoppings); 113 114 // 单选绑定click 115 tbody.addEventListener('click', function (e = e || window.event) { 116 // 每行tr 中的输入框 117 let ipt = e.target.parentNode.parentNode.children[3].children[1]; 118 // 点击的是否是单选input并且type类型是checkbox 还是text 119 if (e.target.type == 'checkbox') { 120 // 计算总结 小计 和总量 121 getPrice(); 122 // 是否全选 123 isAll(); 124 } 125 126 // 是否点击是+ 127 if (e.target.innerHTML == '+') { 128 ipt.value = +ipt.value + 1; 129 } 130 // 是否点击是- 131 if (e.target.innerHTML == '-') { 132 if (ipt.value == 1) { 133 alert('数量不能小于1'); 134 return; 135 } 136 ipt.value = +ipt.value - 1; 137 138 } 139 // 计算总结 小计 和总量 140 getPrice(); 141 }); 142 143 // 全选绑定点击事件 144 all.addEventListener('click', function () { 145 // 获取tbody中的input type类型为checkbox 146 let ipts = tbody.querySelectorAll('input[type=checkbox]'); 147 // 点击全选让tbody中的每个复选框状态给全选保持一致 148 for (let i = 0; i < ipts.length; i++) { 149 ipts[i].checked = all.checked; 150 } 151 // 计算总结 小计 和总量 152 getPrice(); 153 }); 154 155 // 渲染tbody 156 function render(data) { 157 tbody.innerHTML = data.map(function (item) { 158 return ` <tr> 159 <td> 160 <input type="checkbox" name="" id=""> 161 </td> 162 <td> 163 <img src=${item.img} alt=""> 164 <p>${item.name}</p> 165 </td> 166 <td> 167 <span>${item.price}</span> 168 </td> 169 <td> 170 <button>-</button> 171 <input type="text" id="num" value=${item.num}> 172 <button>+</button> 173 </td> 174 <td> 175 <span>${item.price * item.num}</span> 176 </td> 177 </tr>`; 178 }).join(''); 179 } 180 181 // 计算总价 小计 和总量 182 function getPrice() { 183 // 获取tbody中的所有input 184 let ipts = document.querySelectorAll('tbody input[type=checkbox]'); 185 // 小计 186 let total = 0; 187 // 总价 188 let sum = 0; 189 // 总量 190 let count = 0; 191 for (let i = 0; i < ipts.length; i++) { 192 // tbody中每行(tr) 193 let tr = ipts[i].parentNode.parentNode; 194 // 复选框选中 需要累加小计和总价 195 if (ipts[i].checked) { 196 console.log(ipts[i].checked, i); 197 // 每行(tr)右侧的小计 每行数量* 每行单价 198 total = tr.children[3].children[1].value * tr.children[2].children[0].innerHTML; 199 // 每行小计 200 tr.children[4].innerHTML = `<span>${total}</span>`; 201 // 总价累加每行小计 202 sum += total; 203 // 总量累加 204 count += tr.children[3].children[1].value*1; 205 } 206 } 207 208 // 最终要设置tfoot中的总价和总量 209 // 总价 210 tfoot.children[0].children[2].innerHTML = `总金额:${sum}`; 211 // 总量 212 tfoot.children[0].children[1].children[1].innerHTML = count; 213 214 215 } 216 // 是否全选 217 function isAll() { 218 // 获取所有单选按钮(要区分每行中的input type值是checkbox还是text) 219 let checkboxs = tbody.querySelectorAll('input[type=checkbox]'); 220 // 每个单选全部选中才是全选 Array.from 可以将伪数组转成数组 从而使用every 221 // all.checked = Array.from(checkboxs).every(function (item) { 222 // return item.checked == true; 223 // }); 224 225 // 选中个数 226 let num = 0; 227 for (let i = 0; i < checkboxs.length; i++) { 228 if (checkboxs[i].checked) { 229 num++; 230 } 231 } 232 233 all.checked = num == checkboxs.length ? true : false; 234 } 235 236 237 </script> 238 </body> 239 240 </html>
1 var shoppings = [{ 2 "img": "./imgs/1.jpg", 3 "name": "Casio/卡西欧 EX-TR350", 4 "price": 5000, 5 "num": 1 6 }, 7 { 8 "img": "./imgs/2.jpg", 9 "name": "Canon/佳能 PowerShot SX50 HS", 10 "price": 3000, 11 "num": 2 12 13 }, 14 { 15 "img": "./imgs/3.jpg", 16 "name": "Sony/索尼 DSC-WX300", 17 "price": 1300, 18 "num": 1 19 }, 20 { 21 "img": "./imgs/4.jpg", 22 "name": "Fujifilm/富士 instax mini 25", 23 "price": 2999, 24 "num": 1 25 } 26 ]
DOM/BOM 期末考试（增题，自写）
穿梭框
思路：this的利用
1 let toRight = document.querySelector('#toRight'); 2 let toLeft = document.querySelector('#toLeft'); 3 let toAllRight = document.querySelector('#toAllRight'); 4 let toAllLeft = document.querySelector('#toAllLeft'); 5 let se1 = document.querySelector('#se1'); 6 let se2 = document.querySelector('#se2'); 7 let l; 8 let r; 9 let lstr = ''; 10 let rstr = ''; 11 12 left(); 13 // 注意：渲染重新调用事件 14 // 单个移动 15 toRight.addEventListener('click', function () { 16 se2.innerHTML += lstr; 17 l.remove(); 18 right(); 19 }) 20 toLeft.addEventListener('click', function () { 21 se1.innerHTML += rstr; 22 r.remove(); 23 left(); 24 }) 25 // 全部移动 26 toAllRight.addEventListener('click',function(){ 27 se2.innerHTML += se1.innerHTML; 28 se1.innerHTML = ''; 29 left(); 30 right(); 31 }) 32 toAllLeft.addEventListener('click',function(){ 33 se1.innerHTML += se2.innerHTML; 34 se2.innerHTML = ''; 35 left(); 36 right(); 37 }) 38 // 更改左右数据函数 39 function left() { 40 for (let i = 0; i < se1.children.length; i++) { 41 se1.children[i].addEventListener('click', function () { 42 lstr = `<option>${this.innerHTML}</option>`; 43 l = this; 44 }) 45 } 46 } 47 function right() { 48 for (let j = 0; j < se2.children.length; j++) { 49 se2.children[j].addEventListener('click', function () { 50 rstr = `<option>${this.innerHTML}</option>`; 51 r = this; 52 }) 53 } 54 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body> 9 <div style="margin-left: 500px; margin-top: 100px; background-color: #999999"> 10 <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se1"> 11 <option>添加</option> 12 <option>删除</option> 13 <option>修改</option> 14 <option>查询</option> 15 <option>打印</option> 16 </select> 17 <div style="width: 50px; float: left;"> 18 <input type="button" name="name" value=">" style="width: 50px;" id="toRight" /> 19 <input type="button" name="name" value="<" style="width: 50px;" id="toLeft" /> 20 <input type="button" name="name" value=">>" style="width: 50px;" id="toAllRight" /> 21 <input type="button" name="name" value="<<" style="width: 50px;" id="toAllLeft" /> 22 </div> 23 <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se2"> 24 25 </select> 26 </div> 27 <script src="./index.js"> 28 29 30 31 </script> 32 </body> 33 34 </html>
随机点名器
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .container { 10 width: 1600px; 11 position: absolute; 12 left: 50%; 13 transform: translate(-50%); 14 height: 643px; 15 background: url(./images.jpg) no-repeat; 16 } 17 18 .content { 19 width: 700px; 20 height: 350px; 21 position: absolute; 22 top: 50%; 23 left: 50%; 24 transform: translate(-50%, -50%); 25 text-align: center; 26 } 27 28 .content p { 29 color: #138eee; 30 font-size: 66px; 31 } 32 33 .content span { 34 color: #fff; 35 font-size: 25px; 36 font-weight: 700; 37 } 38 </style> 39 </head> 40 41 <body> 42 <div class="container"> 43 <div class="content"> 44 <p>亲，准备好点名了吗？</p> 45 <span>开始点名</span> 46 </div> 47 </div> 48 <script> 49 // 定义数据 50 var names = ["王亚亚", "康春龙", "谢仲龙", "袁旭东", "范志伟", "杜鑫博", "官呈达", "谌雯雯", "杨文林", "周子轩", "苏傲"] 51 let p = document.querySelector('p'); 52 let span = document.querySelector('span'); 53 var testNum = true; 54 span.addEventListener('click', function () { 55 if (testNum) { 56 start(); 57 testNum = false; 58 }else { 59 stop(); 60 testNum = true; 61 } 62 }) 63 64 function start() { 65 var a = 0; 66 timeid = setInterval(function () { 67 p.innerHTML = names[a]; 68 a++; 69 if (a == names.length) { 70 a = 0; 71 } 72 }, 100); 73 } 74 function stop() { 75 clearInterval(timeid); 76 } 77 </script> 78 </body> 79 80 </html>
知识点：设置定时器开关
美女时钟
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>title</title> 7 8 </head> 9 10 <body> 11 <img alt="" id="im" /> 12 <script> 13 let img = document.querySelector('img'); 14 let date = new Date(); 15 img.src = `./meimei/${date.getHours() < 10 ? '0' + date.getHours() : date.getHours()}_${date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()}.jpg`; 16 start(); 17 18 function start() { 19 timeid = setInterval(function () { 20 let date = new Date(); 21 img.src = `./meimei/${date.getHours() < 10 ? '0' + date.getHours() : date.getHours()}_${date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()}.jpg`; 22 }, 1000); 23 } 24 25 // function stop() { 26 // clearInterval(timeid); 27 // } 28 // img.addEventListener('mouseover', function () { 29 // start(); 30 // }) 31 // img.addEventListener('mouseout', function () { 32 // stop(); 33 // }) 34 </script> 35 36 </body> 37 38 </html>
知识点：三元表达式运用
键盘字母高亮
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 * { 10 padding: 0; 11 margin: 0; 12 list-style: none; 13 } 14 15 ul { 16 width: 800px; 17 margin: 100px auto; 18 } 19 20 li { 21 border: 1px solid #f00; 22 width: 80px; 23 float: left; 24 text-align: center; 25 height: 30px; 26 line-height: 30px; 27 } 28 29 .active { 30 background-color: #0F0 31 } 32 </style> 33 </head> 34 35 <body> 36 <ul class="box"> 37 38 </ul> 39 <script> 40 // - 把给定的数据渲染到页面上 41 // - 键盘按下对应的数据的哪个键，页面中对应的那个数据的就会选中，添加背景色 42 var allKey = ["1", '2', '3', '4', '5', '6', '7', '8', '9', '0', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 43 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M' 44 ]; 45 let ul = document.querySelector('ul'); 46 ul.innerHTML = allKey.map(function(item){ 47 return `<li>${item}</li>`; 48 }).join(''); 49 let index; 50 document.addEventListener('keydown',function(e){ 51 index > -1 && ul.children[index].classList.remove('active'); 52 index = allKey.indexOf(e.key.toUpperCase()); 53 console.log(e.key); 54 index > -1 && ul.children[index].classList.add('active'); 55 }) 56 </script> 57 </body> 58 59 </html>
1 index = allKey.indexOf(e.key.toUpperCase()); 2 console.log(e.key);
知识点：
- e.key键盘事件的字母
- indexof(字符串)查找位置
选择拼接字符串
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <p><input type="text" id="tt" /></p> 12 <div id="box"> 13 <label><input type="checkbox" value="a" />a</label> 14 <label><input type="checkbox" value="b" />b</label> 15 <label><input type="checkbox" value="c" />c</label> 16 <label><input type="checkbox" value="d" />d</label> 17 <label><input type="checkbox" value="e" />e</label> 18 <label><input type="checkbox" value="f" />f</label> 19 </div> 20 <script> 21 let inputs = document.querySelectorAll('input'); 22 23 for (let i = 1; i < inputs.length; i++) { 24 inputs[i].addEventListener('click', function () { 25 if (inputs[i].checked == true) { 26 inputs[0].value += ',' + inputs[i].value; 27 if (inputs[0].value[0] == ',') { 28 let between = inputs[0].value.split(''); 29 between.splice(0, 1); 30 inputs[0].value = between.join(''); 31 }//利用splice 32 } else { 33 let index = inputs[0].value.indexOf(inputs[i].value); 34 let z = inputs[0].value.split(''); 35 if (index == 0) { 36 z.splice(index, 1); 37 z.splice(index, 1); 38 inputs[0].value = z.join(''); 39 } else { 40 z.splice(index, 1); 41 z.splice(index - 1, 1); 42 inputs[0].value = z.join(''); 43 } 44 } 45 }) 46 } 47 </script> 48 </body> 49 50 </html>
思路：数组与字符串相互转换，方法的调用
表单校验（本地存储的应用）
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .error { 10 color: #c81523; 11 } 12 13 .error_icon, 14 .success_icon { 15 display: inline-block; 16 vertical-align: middle; 17 width: 20px; 18 height: 20px; 19 background: url(./images/error.png) no-repeat; 20 margin-top: -2px; 21 } 22 23 .success { 24 color: green; 25 } 26 27 .success_icon { 28 background: url(./images/success.png) no-repeat; 29 } 30 31 strong { 32 font-weight: normal; 33 } 34 </style> 35 </head> 36 37 <body> 38 <form action="http://www.baidu.com" method="get" onsubmit="return checkForm()"> 39 40 <table border="1" width="50%" align="center"> 41 <tr align="center"> 42 <td colspan="2"> 43 <font color="cadetblue">会员注册</font> 44 </td> 45 </tr> 46 47 <tr> 48 <td> 49 用户名 50 </td> 51 <td> 52 <input type="text" name="username" id="username" /> 53 <span> 54 <i></i> 55 <strong></strong> 56 </span> 57 </td> 58 </tr> 59 60 <tr> 61 <td> 62 密码 63 </td> 64 <td> 65 <input type="password" name="password" id="password" /> 66 <span> 67 <i></i> 68 <strong></strong> 69 </span> 70 </td> 71 </tr> 72 73 <tr> 74 <td> 75 确认密码 76 </td> 77 <td> 78 <input type="password" name="repassword" id="repassword" /> 79 <span> 80 <i></i> 81 <strong></strong> 82 </span> 83 </td> 84 </tr> 85 86 <tr align="center"> 87 <td colspan="2"> 88 <input type="submit" value="注册" /> 89 </td> 90 </tr> 91 </table> 92 </form> 93 <script> 94 // 获取元素 95 var uname = document.querySelector('#username') 96 var pwd = document.querySelector('#password') 97 var repwd = document.querySelector('#repassword') 98 var btn = document.querySelector('input[type=submit]') 99 100 101 //用户名校验 102 uname.onblur = function () { 103 if (this.value.trim().length == 0) { 104 this.nextElementSibling.className = "error" 105 this.nextElementSibling.children[0].className = "error_icon" 106 this.nextElementSibling.children[1].innerText = "用户名不能为空，请重新输入" 107 } else { 108 this.nextElementSibling.className = "success" 109 this.nextElementSibling.children[0].className = "success_icon" 110 this.nextElementSibling.children[1].innerText = "用户名格式正确" 111 } 112 } 113 var firstpwd; 114 // 密码校验 115 pwd.onblur = function () { 116 if (this.value.trim().length < 6 || this.value.trim().length > 10) { 117 this.nextElementSibling.className = "error" 118 this.nextElementSibling.children[0].className = "error_icon" 119 this.nextElementSibling.children[1].innerText = "密码得长度范围必须在6-10，请重新输入" 120 } else { 121 firstpwd = this.value.trim(); 122 this.nextElementSibling.className = "success" 123 this.nextElementSibling.children[0].className = "success_icon" 124 this.nextElementSibling.children[1].innerText = "密码格式正确" 125 } 126 } 127 128 // 密码校验 129 repwd.onblur = function () { 130 // 判断两个密码是否相等 131 var secondpwd = this.value.trim() 132 if (firstpwd !== secondpwd) { 133 this.nextElementSibling.className = "error" 134 this.nextElementSibling.children[0].className = "error_icon" 135 this.nextElementSibling.children[1].innerText = "两次密码输入不一样，请重新输入" 136 } else { 137 this.nextElementSibling.className = "success" 138 this.nextElementSibling.children[0].className = "success_icon" 139 this.nextElementSibling.children[1].innerText = "两次密码输入一致" 140 } 141 142 } 143 144 btn.addEventListener('click', function (e) { 145 e.preventDefault(); 146 if (uname.value.trim().length == 0 || pwd.value.trim().length == 0 || repwd.value.trim().length == 0) { 147 alert('请校验您是否输入没有问题') 148 } else { 149 location.href = "./login.html" 150 } 151 152 }) 153 </script> 154 155 </body> 156 157 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com" method="get" onsubmit="return checkForm()"> 12 13 <table border="1" width="50%" align="center"> 14 <tr align="center"> 15 <td colspan="2"> 16 <font color="cadetblue">会员登陆</font> 17 </td> 18 </tr> 19 20 <tr> 21 <td> 22 用户名 23 </td> 24 <td> 25 <input type="text" name="username" id="username" /> 26 </td> 27 </tr> 28 29 <tr> 30 <td> 31 密码 32 </td> 33 <td> 34 <input type="password" name="password" id="password" /> 35 </td> 36 </tr> 37 38 <tr align="center"> 39 <td colspan="2"> 40 <input type="submit" value="登陆" /> 41 </td> 42 </tr> 43 </table> 44 </form> 45 <script> 46 // 获取元素 47 var uname = document.querySelector('#username') 48 var pwd = document.querySelector('#password') 49 var btn = document.querySelector('input[type=submit]') 50 51 btn.addEventListener('click', function (e) { 52 e.preventDefault(); 53 if (uname.value.trim().length == 0 || pwd.value.trim().length == 0) { 54 alert('请校验您是否输入没有问题') 55 } else { 56 location.href = "./index.html" 57 } 58 59 }) 60 </script> 61 62 </body> 63 64 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 恭喜您，登陆成功，进入首页 12 </body> 13 14 </html>
