下载文档原格式
利⽤⾼德地图javascriptAPI做⼀个⾃⼰的地图 最近由于项⽬中需要制作⼀个地图，⽤来选择活动地点，我就花了两天利⽤⾼德地图的javascriptAPI⾃制了⼀个地图的demo。
在这了记录⼀下我学习的过程。
⼀、进⼊官⽹，再找到⾼德地图的开放平台，我是做前端的，所以使⽤的是。
地图的功能很多，使⽤API可以⾃⼰定制⾃⼰想要的功能。
在使⽤前需要⾃⼰申请⼀个Key，引⼊API的时候会⽤到这个key。
⼆、详细看⼀下左边的那⼀列各个⾥⾯的内容，看完了基本就知道怎么回事了，它提供的javascriptAPI其实就是⼀个接⼝，调⽤它的相应的接⼝就可以得到⾃⼰需要的数据。
⾄于怎么调⽤接⼝，⾥⾯都讲的很清楚。
三、我觉得最有⽤，上⼿最快的位置还是那个实例中⼼，⾥⾯有很多不同的例⼦。
基本能满⾜各种简单需求，我把其中的三个综合了⼀下，就实现了我想要的基本功能。
下⾯是完整的代码页⾯，复制下来保存为html就可以看到我的那个效果了。
（代码后⾯有张截图，可以看下效果）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>输⼊提⽰后查询</title><style type="text/css">/************************* Just Reset Browser Default CSS : BEGIN ***************************/html {background-color: #fff;}body, div, h1, h2, h3, h4, ul, li, form, input, dl, dt, dd, p {margin: 0;padding: 0;font-family: "微软雅⿊";}h3 {+ font-size : 14 px;_font-size: 14px;}img {border: none;}.c {clear: both;}ul, ol, li {list-style: none;}/*清除浮动*/.clearfix:after {content: ".";visibility: hidden;display: block;height: 0;overflow: hidden;clear: both;}/* no ie mac \*/* html .clearfix {height: 1%;}/* end */* + html .clearfix {height: 1%;}body {font: 12px / 1.5em 微软雅⿊, Arial, Verdana, Helvetica, sans-serif;color: #333;}button, input, select, textarea {color: #999;}input[type="button"] {padding: 0 5px;color: #333;}.demo_box {float: left;width: 620px;height: 500px;}/* map style */#iCenter {float: left;width: 650px;height: 500px;margin-left: 5px;margin-right: 10px;border: 1px solid #F6F6F6;}#r_title {line-height: 28px;padding-left: 5px;background-color: #D1EEEE;font-weight: bold;}#result {overflow: auto;margin-bottom: 5px;/* width:661px;height: 255px;*/}/* 结果项 */#result .sub_result {font-size: 12px;/*padding:0px 0 4px 2px;*/border-bottom: 1px solid #C1FFC1;}#result .sub_result .detail {}#result .sub_result .detail h3 {color: #00A6AC;}a {color: #067EC0;text-decoration: none;}a:hover {text-decoration: underline;}.note {color: #999;}/*** layerout stylesheet ***//* 修改背景URL */div.change {background-image: url(/20110909/img/map/marker-h.png); }div.change div {background-image: url(/20110909/img/map/marker-h-l.gif); }/*** copied from demo #39 添加⾃定义点覆盖物 ***//* 定义⾃定义点样式 */.markerContentStyle {position: relative;}.markerContentStyle span {background-color: #FFFFFF;color: #FF1493;width: 120px;heigth: 80px;border: 2px solid #D8BFD8;FONT-FAMILY:华⽂⾏楷;position: absolute;top: -10px;left: 25px;white-space: nowrap -webkit-border-radius : 5 px;border-radius: 5px;}/*** copied from demo #43 添加⾃定义信息窗体 ***//* 定义⾃定义信息窗体样式 */ {position: relative;z-index: 100;border: 1px solid #BCBCBC;box-shadow: 0 0 10px #B7B6B6;border-radius: 8px;background-color: rgba(255, 255, 255, 0.9);transition-duration: 0.25s;}:hover {box-shadow: 0px 0px 15px #0CF;}-top {position: relative;background: none repeat scroll 0 0 #F9F9F9;border-bottom: 1px solid #CCC;border-radius: 5px 5px 0 0;}-top div {display: inline-block;color: #333333;font-size: 14px;font-weight: bold;line-height: 31px;padding: 0 10px;}-top img {position: absolute;top: 10px;right: 10px;transition-duration: 0.25s;}-top img:hover {box-shadow: 0px 0px 5px #000;}-middle {font-size: 12px;padding: 10px;line-height: 21px;}-bottom {height: 0px;width: 100%;clear: both;text-align: center;}-bottom img {position: relative;z-index: 104;}input.inputTextStyle{width: 400px;height: 24px;font-size: 16px;margin: 5px;padding: 2px;input.btn{color: #000000;height: 30px;font-size: 16px;margin: 5px;padding: 2px;display:inline;}b.b_text{font-size: 16px;margin: 5px 0px 5px 10px;_padding-bottom:2px;_margin-left: 20px;_margin-bottom: 10px;*padding-bottom:2px;*margin-bottom: 10px;display:inline;*width:1;width: auto;overflow: auto;*overflow:visible;zoom:1;}/*** -------------------------***/</style></head><body><div><b class="b_text">活动地点：</b><input id="aim" class="inputTextStyle" type="text"/><input class="btn" type="button" value="在地图上选择" onclick="showMap();"/></div><div id="mapBg" style="position: absolute;display: none;"><div id="iCenter"></div><div class="demo_box"><div><b class="b_text">请输⼊搜索关键字：</b><input id="keyword" onkeyup="keydown();" class="inputTextStyle" type="text"/><div id="result1" name="result1" style="overflow: auto; width: 95%; border: 1px solid gray;display: none;"></div> </div><div id="r_title"><b>查询结果:</b></div><div id="result"></div></div></div><script language="javascript" src="/maps?v=1.3&key=608d75903d29ad471362f8c58c550daf"></script> <script language="javascript">var mapObj; //地图对象var lnglatXY; //当前对象坐标var aimAddress; //当前对象地址var geocoderMarker = undefined; //逆编码跟随⿏标移动视图var searchMarker = []; //搜索结果信息标记var windowsArr = []; //搜索结果地图信息var addressArr = []; //搜索结果地址集合function showMap(){ //显⽰地图var self = this;var mapEle = document.getElementById("mapBg");mapEle.style.display = "block";self.mapInit();}function makeSure(){ //点击确认var self = this;var aim = document.getElementById("aim");aim.value = aimAddress || "";}function mapInit() { //创建地图并绑定监听事件var self = this;mapObj = new AMap.Map("iCenter", {view: new AMap.View2D({//center:new AMap.LngLat(116.397428,39.90923),//地图中⼼点zoom: 12 //地图显⽰的缩放级别})});var listener = AMap.event.addListener(mapObj, "click", function (e) {mapObj.clearMap(); // 清楚所有覆盖物lnglatXY = e.lnglat;var listenMarker = new AMap.Marker({map: mapObj,position: e.lnglat,icon: "/images/0.png",offset: new AMap.Pixel(-10, -34)});mapObj.setCenter(lnglatXY);self.geocoder();});}function geocoder() { //通过坐标找到具体地址var MGeocoder;//加载地理编码插件mapObj.plugin(["AMap.Geocoder"], function () {MGeocoder = new AMap.Geocoder({radius: 1000,extensions: "all"});//返回地理编码结果AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);//逆地理编码MGeocoder.getAddress(lnglatXY);});//加点var marker = new AMap.Marker({map: mapObj,icon: new AMap.Icon({image: "/Public/images/js/mark.png",size: new AMap.Size(58, 30),imageOffset: new AMap.Pixel(-32, -0)}),position: lnglatXY,offset: new AMap.Pixel(-5, -30)});mapObj.setFitView();function onMouseOver(e) {var coor = e.split(',');var lnglat = new AMap.LngLat(coor[0], coor[1]);if (!geocoderMarker) {geocoderMarker = new AMap.Marker({map: mapObj,icon: "/images/0.png",position: lnglat,offset: new AMap.Pixel(-10, -34)});} else {geocoderMarker.setPosition(lnglat);}mapObj.setFitView();}//回调函数function geocoder_CallBack(data) {geocoderMarker = undefined;var resultStr = "";var roadinfo = "";var poiinfo = "";var address;//返回地址描述address = data.regeocode.formattedAddress;aimAddress = address;makeSure(); //把当前地址赋值给⽂本框//返回周边道路信息roadinfo += "<table style='width:600px'>";for (var i = 0; i < data.regeocode.roads.length; i++) {var color = (i % 2 === 0 ? '#fff' : '#eee');roadinfo += "<tr style='background-color:" + color + "; margin:0; padding:0;'><td>道路：" + data.regeocode.roads[i].name + "</td><td>⽅向：" + data.regeocode.roads[i].direction + "</td><td>距离：" + data.regeocode.roads[i].distance }roadinfo += "</table>";//返回周边兴趣点信息poiinfo += "<table style='width:600px;cursor:pointer;'>";for (var j = 0; j < data.regeocode.pois.length; j++) {var color = j % 2 === 0 ? '#fff' : '#eee';poiinfo += "<tr onmouseover='onMouseOver(\"" + data.regeocode.pois[j].location.toString() + "\")' style='background-color:" + color + "; margin:0; padding:0;'><td>兴趣点：" + data.regeocode.pois[j].name + "</td><td>类型：}poiinfo += "</table>";//返回结果拼接输出resultStr = "<div style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">" + "<b>地址</b>：" + address + "<hr/><b>周边道路信息</b>：<br/>" + roadinfo + "<hr/><b>周边兴趣点信息</b>：<br/>"document.getElementById("result").innerHTML = resultStr;}//输⼊提⽰function autoSearch() {var keywords = document.getElementById("keyword").value;var auto;//加载输⼊提⽰插件mapObj.plugin(["AMap.Autocomplete"], function() {var autoOptions = {city: "" //城市，默认全国};auto = new AMap.Autocomplete(autoOptions);//查询成功时返回查询结果if ( keywords.length > 0) {AMap.event.addListener(auto,"complete",autocomplete_CallBack);auto.search(keywords);}else {document.getElementById("result1").style.display = "none";}});}//输出输⼊提⽰结果的回调函数function autocomplete_CallBack(data) {var resultStr = "";var tipArr = data.tips;if (tipArr&&tipArr.length>0) {for (var i = 0; i < tipArr.length; i++) {resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1)+ ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1)+ ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>";}}else {resultStr = " π__π亲,⼈家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字";}document.getElementById("result1").curSelect = -1;document.getElementById("result1").tipArr = tipArr;document.getElementById("result1").innerHTML = resultStr;document.getElementById("result1").style.display = "block";}//输⼊提⽰框⿏标滑过时的样式function openMarkerTipById(pointid, thiss) { //根据id打开搜索结果点tipthiss.style.background = '#CAE1FF';}//输⼊提⽰框⿏标移出时的样式function onmouseout_MarkerStyle(pointid, thiss) { //⿏标移开后点样式恢复thiss.style.background = "";}//从输⼊提⽰框中选择关键字并查询function selectResult(index) {if(index<0){return;}if (erAgent.indexOf("MSIE") > 0) {document.getElementById("keyword").onpropertychange = null;document.getElementById("keyword").onfocus = focus_callback;}//截取输⼊提⽰的关键字部分var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g,"");var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');document.getElementById("keyword").value = text;document.getElementById("result1").style.display = "none";//根据选择的输⼊提⽰关键字查询mapObj.plugin(["AMap.PlaceSearch"], function() {var msearch = new AMap.PlaceSearch(); //构造地点查询类AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数msearch.setCity(cityCode);msearch.search(text); //关键字查询查询});function focus_callback() {if (erAgent.indexOf("MSIE") > 0) {document.getElementById("keyword").onpropertychange = autoSearch;}}//输出关键字查询结果的回调函数function placeSearch_CallBack(data) {//清空地图上的InfoWindow和MarkerwindowsArr = [];searchMarker = [];addressArr = [];mapObj.clearMap();var resultStr1 = "";var poiArr = data.poiList.pois;var resultCount = poiArr.length;for (var i = 0; i < resultCount; i++) {addressArr[i] = poiArr[i].location;resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onclick='autoClickMap(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0 resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";addmarker(i, poiArr[i]);}mapObj.setFitView();document.getElementById("result").innerHTML = resultStr1;document.getElementById("result").style.display = "block";}function autoClickMap(pointid, thiss){mapObj.clearMap();lnglatXY = addressArr[pointid];mapObj.setCenter(lnglatXY);geocoder();}//⿏标滑过查询结果改变背景样式，根据id打开信息窗体function openMarkerTipById1(pointid, thiss) {thiss.style.background = '#CAE1FF';windowsArr[pointid].open(mapObj, searchMarker[pointid]);}//添加查询结果的marker&infowindowfunction addmarker(i, d) {var lngX = d.location.getLng();var latY = d.location.getLat();var markerOption = {map:mapObj,icon:"/images/" + (i + 1) + ".png",position:new AMap.LngLat(lngX, latY)};var mar = new AMap.Marker(markerOption);searchMarker.push(new AMap.LngLat(lngX, latY));var infoWindow = new Window({content:"<h3><font color=\"#00a6ac\"> " + (i + 1) + ". " + + "</font></h3>" + TipContents(d.type, d.address, d.tel),size:new AMap.Size(300, 0),autoMove:true,offset:new AMap.Pixel(0,-30)});windowsArr.push(infoWindow);var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};AMap.event.addListener(mar, "click", aa);}//infowindow显⽰内容function TipContents(type, address, tel) { //窗体内容if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {type = "暂⽆";}if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {address = "暂⽆";}if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {tel = "暂⽆";}var str = " 地址：" + address + "<br /> 电话：" + tel + " <br /> 类型：" + type;return str;}function keydown(event){var key = (event||window.event).keyCode;var result = document.getElementById("result1")var cur = result.curSelect;if(key===40){//downif(cur + 1 < result.childNodes.length){if(result.childNodes[cur]){result.childNodes[cur].style.background='';}result.curSelect=cur+1;result.childNodes[cur+1].style.background='#CAE1FF';document.getElementById("keyword").value = result.tipArr[cur+1].name;}}else if(key===38){//upif(cur-1>=0){if(result.childNodes[cur]){result.childNodes[cur].style.background='';}result.curSelect=cur-1;result.childNodes[cur-1].style.background='#CAE1FF';document.getElementById("keyword").value = result.tipArr[cur-1].name;}}else if(key === 13){var res = document.getElementById("result1");if(res && res['curSelect'] !== -1){selectResult(document.getElementById("result1").curSelect);}}else{autoSearch();}}</script></body></html>。
JS实现导航菜单中的⼆级下拉菜单的⼏种⽅式最近整理了， JS 实现导航菜单中的⼆级下拉菜单的三种⽅式，便于项⽬中应⽤。
如何实现导航菜单栏中的⼆级下拉菜单？ 我们在淘宝、搜狐等⼤型⽹站上都可以看到使⽤的⼀些⼆级下拉菜单，⽐如下⾯这张图⽚。
但是如何实现类似的图⽚呢？实际上，我们有⾄少三种⽅式来实现，下⾯，我附上代码供⼤家参考。
1.仅使⽤html和css<meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding: 0;list-style: none;text-decoration: none;}#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}ul{background: #aaa}ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}ul li:hover{background: #cea;}ul li ul li{float: none;}/*关键⼀：将⼆级菜单设置为display：none;*/ul li ul{position: absolute;top:40px;left: 0; display: none;}ul li ul li:hover{background: red;}/*关键⼆：在划过⼆级菜单从属的⼀级菜单时，设置为display:block;*/ul li:hover ul{display: block;}</style><div id="nav"><ul><li><a href="">⾸页</a></li><li><a href="">汽车</a><ul><li><a href="#">奥迪</a> </li><li><a href="#">道奇</a> </li></ul></li><li><a href="">⼿机</a><ul><li><a href="#">⼩⽶</a> </li><li><a href="#">华为</a> </li></ul></li><li><a href="">联系我们</a></li></ul></div> 我们可以看到，这种⽅法是⽐较好的，它保证了结构与表现的完全分离。
⼀步步教⼤家编写酷炫的导航栏js+css实现⼀步⼀步的学习制作导航栏，⽂章末尾再做个综合页⾯，分享给⼤家⼀个炫酷的导航栏供⼤家参考，具体内容如下1.当前页⾯⾼亮显⽰的导航栏⾸先是HTML代码,很简单,ul+li实现菜单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>导航栏⼀</title></head><body><header class="header"><div class="nva"><ul class="list"><li><a href="Android.html">Android</a></li><li><a href="C++.html">C++</a></li><li><a href="IOS.html">IOS</a></li><li><a href="Java.html">Java</a></li><li><a href="Ruby.html">Ruby</a></li></ul></div></header><h1>⾸页</h1></body></html>基本效果:接下来设置CSS属性,这⾥要注意标签a是⾏级元素,所以需要⽤display转成块级元素,这个很常⽤,还有就是line-height的常见⽤法*{ margin:0; padding: 0; }a{ text-decoration: none; }.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; }.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }.list li{ float: left; }.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; }.list li a:hover{ background:#333; color:#fff; }.list li a.on{ background:#333; color:#fff; }h1{ margin: 20px auto; text-align: center; }实现的效果:最后就是JS动态添加定位效果了js⾥⾯这样考虑,页⾯跳转就会有链接,根据链接的后缀来匹配属性,匹配则更改样式即可达到想要的效果需要注意的就是如何获取URL,如何从URL⾥⾯查找出href信息$(function(){//当前链接以/分割后最后⼀个元素索引var index = window.location.href.split("/").length-1;//最后⼀个元素前四个字母,防⽌后⾯带参数var href = window.location.href.split("/")[index].substr(0,4);if(href.length>0){//如果匹配开头成功则更改样式$(".list li a[href^='"+href+"']").addClass("on");//[attribute^=value]：匹配给定的属性是以某些值开始的元素。
elementui el-tabs 用法elementui el-tabs 是一个基于 Vue.js 的标签页组件，它提供了一种简单、易用的方式来创建多个标签页并进行切换。
使用el-tabs，我们可以方便地实现页面的切换、导航和内容展示。
el-tabs 提供了两种常用的标签页模式：标签页和导航模式。
在标签页模式下，标签页以选项卡的形式展示在页面的顶部，内容区域则根据当前选中的标签页进行切换显示。
而在导航模式下，标签页以水平导航栏的形式展示在页面的顶部，内容区域则以垂直的列方式显示在导航栏的下方。
在开始使用 el-tabs 之前，我们需要先导入 Element UI 并引入el-tabs 组件：```javascriptimport Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';e(ElementUI);```接下来，我们可以使用 el-tabs 来创建标签页组件。
在 el-tabs 中，我们需要使用 el-tab-pane 标签来定义每个标签页的内容，同时我们也可以使用 el-tab-pane 标签的 label 属性来定义每个标签页的标题。
```html<template><div><el-tabs v-model="activeTab"><el-tab-pane label="标签页1">标签页1的内容</el-tab-pane> <el-tab-pane label="标签页2">标签页2的内容</el-tab-pane> <el-tab-pane label="标签页3">标签页3的内容</el-tab-pane> </el-tabs></div></template>```在上面的示例中，我们使用 v-model 绑定了 activeTab 属性来表示当前选中的标签页。
使用前端框架实现分页导航的方法在现代的网页设计中，分页导航被广泛应用于展示大量内容的页面，为用户提供方便快捷的浏览方式。
使用前端框架可以轻松地实现分页导航，并且提供了丰富的功能和样式定制选项。
本文将介绍常用的前端框架中实现分页导航的方法，并提供一些最佳实践。
一、Bootstrap框架Bootstrap是一款开源的前端框架，提供了丰富的组件和样式，广泛应用于网页设计和开发中。
要使用Bootstrap实现分页导航，首先需要引入Bootstrap的CSS和JS文件。
然后，在HTML中使用Navbar组件来创建导航栏，并使用Pagination组件来创建分页器。
Navbar组件可以通过简单的HTML代码创建一个固定的页眉导航栏，其中可以包含Logo、链接、表单等元素。
通过定制样式和布局，可以实现个性化的导航栏设计。
Pagination组件可以通过添加ul和li元素来创建一个分页器。
使用class="pagination"可以确保样式和功能的一致性。
通过调整样式和使用JavaScript来处理点击事件，可以实现分页导航的各种效果，例如ajax加载更多内容、跳转到指定页等。
二、Vue.js框架Vue.js是一款轻量级、灵活且易于上手的JavaScript框架，用于构建用户界面。
要使用Vue.js实现分页导航，首先需要引入Vue.js的文件。
然后，在HTML中定义一个Vue实例，并使用v-for指令来循环生成分页导航的链接。
在Vue实例中，可以使用v-model指令来绑定当前页数的数据，并通过计算属性来获得总页数。
然后，可以使用v-bind指令来动态绑定分页导航链接的样式和是否可点击的状态。
最后，通过使用v-on指令来绑定点击事件，以实现分页导航的功能。
Vue.js还提供了许多可用于扩展和定制的插件，如Vue Router用于处理路由导航，Vuex用于管理应用程序的状态等。
这些工具可以进一步增强分页导航的功能和性能。
题目：20个JavaScript开发案例在当今数字化和信息化的时代，JavaScript已经成为了前端开发的主流语言之一。
它可以帮助开发者实现网页的动态交互效果，为用户带来更加流畅和丰富的网页体验。
下面将介绍20个优秀的JavaScript 开发案例，展示了JavaScript在不同领域的应用和潜力。
一、基础开发案例1. 轮播图实现在网页设计中，轮播图是非常常见的元素，它可以吸引用户的注意力，增加网页的互动性。
使用JavaScript编写轮播图实现的案例可以展示其在网页交互方面的强大功能。
2. 视频播放器JavaScript也可以用于实现网页上的视频播放功能。
通过调用浏览器的API接口，开发者可以设计出功能完善的视频播放器，实现视频的加载、播放、暂停和控制等功能。
3. 表单验证在网页开发中，表单是常见的用户交互元素。
通过JavaScript开发表单验证功能，可以在用户输入信息时进行实时的验证，提高用户的输入准确性和网页的友好性。
4. 下拉菜单下拉菜单是网页导航和内容选择中的常见组件，使用JavaScript可以实现下拉菜单的动态展开和收缩效果，增加网页的交互性和美观性。
5. 弹窗效果JavaScript可以实现各种形式的弹窗效果，如提示框、确认框、模态框等，为用户提供更好的提示和交互体验。
二、数据可视化案例6. 图表库JavaScript拥有成熟的图表库，如Echarts、Highcharts等，可以快速实现各种类型的数据可视化，满足各种复杂的图表需求。
7. WebGL应用JavaScript也可以结合WebGL技术实现3D数据可视化应用，如三维地图、虚拟现实场景等，展现出JavaScript在数据可视化方面的强大潜力。
8. 大屏数据展示使用JavaScript编写大屏数据展示应用，可以实现数据的实时更新和动态展示，为企业、政府等提供直观的数据展示和分析功能。
9. 实时监控系统JavaScript在实时监控系统中的应用也很广泛，通过实时更新数据和动态图表展示，可以实现对各种设备、系统和环境的监控和分析。
Bootstrap4导航菜单及下拉菜单制作Bootstrap是一个开源的前端框架，为我们提供了丰富的组件和工具，可以帮助我们快速构建现代化的网页设计。
其中，导航菜单和下拉菜单是网页中常见的元素，本文将介绍如何利用Bootstrap4来制作导航菜单及下拉菜单。
一、创建基础导航菜单在使用Bootstrap4制作导航菜单之前，我们需要先引入Bootstrap的相关资源文件，包括bootstrap.min.css和bootstrap.min.js。
接下来，我们可以利用以下代码创建一个简单的导航菜单：<div class="navbar"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">关于我们</a></li><li class="nav-item"><a class="nav-link" href="#">产品展示</a></li><li class="nav-item"><a class="nav-link" href="#">联系我们</a></li></ul></div>以上代码中，我们使用了Bootstrap提供的.navbar和.navbar-nav类来设置导航菜单的基本样式，每个菜单项使用.nav-item类，链接文字使用.nav-link类。
Vue实现tab导航栏并⽀持左右滑动功能本⽂主要介绍：利⽤Vue实现tab导航栏，并且通过flex布局实现左右滑动，计算按钮的位置，当点击第⼀屏展⽰的最后⼀个且还有元素未展⽰时，⾃动滑动显⽰出未显⽰的元素。
tab导航栏布局：<section class="theme-list"><div class="fixed-nav" ref="fixednav"><div class="fixed-nav-content"><pv-for="(item, index) in theme":key="index":class="['tab-title', activeId === index && 'select-tab']"@click="changeTab(index, $event)">{{ item }}</p></div></div></section>theme: ['CSDN博客', '博客园', '⾼考加油', '中考加油', '⼩欢喜', '七⼗周年'],activeId: 0导航栏样式代码：.theme-list {margin-top: 12px;}.fixed-nav {overflow-x: scroll;-webkit-overflow-scrolling: touch;}.fixed-nav-content {display: flex;}.tab-title {padding: 0 13px;margin-right: 12px;color: #141414;border-radius: 13px;font-size: 12px;flex-shrink: 0;height: 0.52rem;line-height: 0.52rem;}此时我们可以实现下⾯的样式，并且可以左右滑动tab：需要注意的是，在样式代码中需要添加flex-shrink : 0，这样才会当tab宽度⼤于外部容器宽度时不会收缩。
【原创】js实现⼀个可随意拖拽排序的菜单导航栏1.想做这个效果的原因主要是⽤在UC上看新闻发现他们的导航菜单很有趣。
⽆聊的时候在哪划着玩了很久。
所以就⼲脆⾃⼰写⼀个。
原效果如下2.整体效果如下，在已推荐和未添加⾥⾯每个⼩⽅块可以触摸移动位置互换。
未添加和已添加⾥⾯的⼩⽅块位置可以拖放。
3.结构分析。
整体结构⽤红线框标出。
可以分为三个部分。
关注底部拖拽部分。
⼀个div⾥⾯嵌套两个div.定位关系如图。
本次教程之作⼀个拖拽框1.好了，基本情况已经分析清楚先实现页⾯样式。
<div class="wrap"><div class="menu ">财经</div><div class="menu ">时尚</div><div class="menu ">国际</div><div class="menu ">娱乐</div><div class="menu ">军事</div><div class="menu ">搞笑</div><div class="menu ">科技</div><div class="menu ">游戏</div><div class="menu ">体育</div><div class="menu ">美图</div><div class="menu ">推荐</div><div class="menu ">社会</div><div class="menu ">微信</div><div class="menu ">健康</div><div class="menu ">军事</div><div class="clear"></div></div>css<style type="text/css">*{margin: 0;padding: 0;}.clear{clear: both;}.wrap{width: 380px;height: auto;zoom: 1;overflow: hidden;border: 1px solid #8E8E8E;margin-top:100px ;margin-left: 400px;padding-bottom: 20px;position: relative;}.menu{width: 70px;height: 30px;background-color: cornflowerblue;color: #FFFFFF;font-size: 16px;text-align: center;line-height: 30px;float: left;margin-left: 20px;margin-top: 10px;} .active{height: 28px;width: 68px;border: 1px dashed #8E8E8E;float: left;margin-left: 20px;margin-top: 10px;}.onclick{transform: scale(1.2);position: absolute;background-color:cornflowerblue ;line-height: 30px;height: 30px;width: 70px;text-align: center;color: #FFFFFF;}</style>界⾯如下样式完成了现在开始写js。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>我的导航我作主</title>
<style type="text/css">
body {
font: 12px Arial, Helvetica, sans-serif, "新宋体";
}
#tb1 {
width: 401px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
margin: 50px auto 0px auto;
}
.menu {
height: 28px;
border-right: 1px solid #cccccc;
}
ul {
margin: 0px;
padding: 0px;
}
ul li {
list-style-type: none;
float: left;
width: 99px;
height: 28px;
line-height: 28px;
text-align: center;
border-left: 1px solid #cccccc;
cursor: pointer;
color: #666;
font-size: 14px;
overflow: hidden;
background: #e0e2eb;
}
.menu li.off {
background: #ffffff;
color: #336699;
font-weight: bold;
}
.menudiv {
height: 200px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-top: 0px;
background: #fefefe;
}
.menudiv div {
padding: 15px;
margin: 0px auto 0px auto;
height: 28px;
line-height: 28px;
}
</style>
</head>
<body>
<div id="tb1" class="tb1">
<div class="menu">
<ul>
<li id="one1" onclick="setli('one',1)">第一句</li>
<li id="one2" onclick="setli('one',2)">第二句</li>
<li id="one3" onclick="setli('one',3)">第三句</li>
<li id="one4" onclick="setli('one',4)">第四句</li>
</ul>
</div>
<div class="menudiv">
<div id="con_one_1">春眠不觉晓，</div>
<div id="con_one_2" style="display: none">处处闻啼鸟。
</div>
<div id="con_one_3" style="display: none">夜来风雨声，</div>
<div id="con_one_4" style="display: none">花落知多少。
</div> </div>
</div>
<script type="text/javascript">
function setli(name, cursel) {
cursel_0 = cursel;
for (var i = 1; i <=ulli_len; i++) {
var menu = document.getElementById(name + i);
var menudiv = document.getElementById("con_" + name + "_" + i);
if (i == cursel) {
menu.className ="off";
menudiv.style.display = "block";
}
else {
menu.className="";
menudiv.style.display = "none";
}
}
}
function next() {
cursel_0++;
if (cursel_0 > ulli_len) {
cursel_0 = 1;
}
setli(name_0,cursel_0);
}
var name_0 = 'one';
var cursel_0 = 1;
var ulli_len,iIntervalId;
onload = function () {
var ulli = document.getElementById("tb1").getElementsByTagName("li");
ulli_len = ulli.length;
for(var j=0;j<ulli_len;j++){
ulli[j].onmouseover=function(){
clearInterval(iIntervalId);
this.onmouseout=function(){
iIntervalId=setInterval(next,1000);
}
}
}
document.getElementById("con_"+name_0+"_"+ulli_len).parentNode.onmouseover=function(){ clearInterval(iIntervalId);
this.onmouseout=function(){
iIntervalId=setInterval(next,1000);
}
}
setli(name_0, cursel_0);
iIntervalId=setInterval(next, 1000);
}
</script>
</body>
</html>。
