JavaScript+node实现三级联动菜单_javascript技巧_

export default class Select{     //添加css样式     static  addCSS(selector,style,title){         if(title===undefined) title="xietian";         var arr=Array.from(document.styleSheets);         var  styleSheet=arr.reduce(function(value,item){             if(item.title===title)return item;             return value;         },null);         if(!styleSheet){             var s=document.createElement("style");             s.title=title;             document.head.appendChild(s);             styleSheet=document.styleSheets[document.styleSheets.length-1];         }         var str="";         for(var prop in style){             str+=prop.replace(/[A-Z]/g,function(value){                 return "-"+value.toLowerCase();             })+":"+(typeof style[prop]==="number" ? style[prop]+"px" : style[prop])+";";         }         if(styleSheet.addRule){             styleSheet.addRule(selector,str,styleSheet.cssRules.length);         }else{             styleSheet.insertRule(selector+"{ "+str+" }",styleSheet.cssRules.length);         }     } //定义全局变量     button;     ul;     class;     constructor(parent,_class) {         // this.id = _id;         this.class = _class;         this.elem = this.createEle();         this.appendTo(parent);     }     //创建元素     createEle() {         const div = document.createElement('div');         div.className = "dropdown " + this.class;         this.button = document.createElement('button');         this.button.className = "btn btn-default dropdown-toggle";         this.button.addEventListener('click',e=>this.clickHander(e))         this.content = document.createElement('span');         this.content.innerText = "请选择";         const carte = document.createElement('span');         this.content.className = 'content';         carte.className = 'carte';         this.button.appendChild(this.content);         this.button.appendChild(carte);         this.ul = document.createElement('ul');         this.ul.className = "dropdown-menu";         this.button.appendChild(this.ul);         div.appendChild(this.button)         return div;     }     //添加点击事件     clickHander(e) {         this.ul.classList.toggle('on');     }    //增加li     addli(list) {         if(!list) return;         const frg = document.createDocumentFragment();         list.forEach(item=>{             const li = document.createElement('li');             li.innerHTML = item;             li.addEventListener('click',e=>this.liHandler(e));             frg.appendChild(li);         })         this.ul.appendChild(frg);     }     //给li添加的点击事件     liHandler(e) {         this.content.innerHTML = e.target.innerText;     }     //添加css样式     addCSS() {         Select.addCSS(".dropdown",{             position: "relative",             boxSizing: "border-box",             width: "8.33333333%",             display:"inline-block",             minHeight: "1px",             paddingRight: "15px",             paddingLeft: "15px",             fontSize: "14px",             lineHeight: "1.42857143",             color: "#333333",         })         Select.addCSS(".btn",{             display:'inlineBlock',             marginBottom:'0',             outline:"none",             fontWeight:'normal',             textAlign:'center',             whiteSpace:'nowrap',             verticalAlign:'middle',             touchAction:'manipulation',             cursor:'pointer',             backgroundImage:'none',             border:'1px solid transparent',             padding:'6px 12px',             fontSize:'14px',             lineHeight:'1.42857143',             borderRadius:'4px',             userSelect:'none',         })         Select.addCSS(".btn-default",{            color:'#333',             backgroundColor:'#fff',             borderColor:'#ccc',         })         Select.addCSS(".btn-default:hover",{             color:'#333',             backgroundColor:'#e6e6e6',             borderColor:'#adadad',         })         Select.addCSS(".carte",{             display:'inline-block',             width:'0',             marginLeft: "0",             height:'0',             verticalAlign:'middle',             borderTop:'4px dashed',             borderRight:'4px solid transparent',             borderLeft:'4px solid transparent',         })         Select.addCSS(".dropdown-menu",{             position:'absolute',             top:'100%',             left:'15px',             height:'200px',             overflowY:'scroll',             zIndex:'1000',             display:'none',             float:'left',             minWidth:'83px',             padding:'5px 0',             margin:'2px 0 0',             fontSize:'14px',             textAlign:'left',             listStyle:'none',             backgroundColor:'#fff',             backgroundClip:'paddingBox',             border:'1px solid #ccc',             border:'1px solid rgba(0, 0, 0, 0.15)',             borderRadius:'4px',             boxShadow:'0 6px 12px rgba(0, 0, 0, 0.175)',                  })         Select.addCSS(".on", {             display:"block!important",         })         Select.addCSS('li',{             textAlign:"center",         })         Select.addCSS('li:hover',{             backgroundColor:'#e6e6e6',         })     }     //添加到html结构中的位置     appendTo(parent) {         if(typeof parent == 'string') parent=document.querySelector(parent);         parent.appendChild(this.elem);         this.addCSS();     } }

const http = require('http'); const querystring= require('querystring'); const city = require("../city.json"); const server = http.createServer(function(req, res) {     res.writeHead(200,{         "content-type":"text/html;charset=utf-8",         "Access-Control-Allow-Origin":"*",         "Access-Control-Allow-Headers":"*",         //请求头跨域 如果请求头发生修改并且非同源，就需要申请请求头跨域     });     req.on('data',function(_data) {         data=_data     })     req.on('end',function () {         // type是接口名称         console.log(req.url);         var type=req.url.trim().split("?")[0].replace(/\//g,"");         console.log(type);         if(req.method.toLowerCase()==="get"){             if(req.url.includes("favicon.ico")) return res.end();//如果get请求的是图标直接返回空跳出             // 如果是get请求，就从url中重新获取数据存入data变量             data=req.url.includes("?") ? req.url.split("?")[1] : "";         }         // 首先判断是否可以通过JSON解析，如果通过JSON直接转换，如果不能就是querystring解析         try{             data=JSON.parse(data);         }catch(e){          
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：Vue3中使用setup通过ref获取子组件的属性_vue.js_
                                                                
下一篇：vue3中通过ref获取元素节点的实现_vue.js_