创建某一下拉菜单的项:
str = str+"<option value='"+i+"'>"+i+"</option>";
提取从i到j之间的字符串:
kd.substr(i,j)
right的第i个子节点的内容:
right.childNodes.item(i)
实例
Div滚动:
<style type="text/css"> *{ margin:0px auto; padding:0px} #wai{ width:100%; height:500px;} #left{height:500px; background-color:#63C; float:left} #right{ height:500px; background-color:#FC3; float:left} #anniu{ width:50px; height:50px; background-color:#F30; position:absolute; top:225px; z-index:10; } #anniu:hover{ cursor:pointer} </style> </head> <body> <div id="wai"> <div id="left" style="width:200px"></div> <div id="right" style="width:800px"></div> </div> <div id="anniu" style="left:175px" onclick="hua()"></div> <script type="text/javascript"> var id; function hua() { id = window.setInterval("dong()",10); } //滑动的方法,调一次滑动3px function dong() { //改蓝色的宽度 200px var zuo = document.getElementById("left"); kd = zuo.style.width; if(parseInt(kd.substr(0,kd.length-2))>=800) { window.clearInterval(id); return; } kd = parseInt(kd.substr(0,kd.length-2))+3; zuo.style.width = kd+"px"; //改黄色的宽度 var you = document.getElementById("right"); ykd = you.style.width; ykd = parseInt(ykd.substr(0,ykd.length-2))-3; you.style.width = ykd+"px"; //改红色的left var hong = document.getElementById("anniu"); hleft = hong.style.left; hleft = parseInt(hleft.substr(0,hleft.length-2))+3; hong.style.left = hleft+"px"; } </script> </body>
下拉框添加属性:
<style type="text/css"> *{ margin:0px auto; padding:0px} #wai{ width:500px; height:500px} #left{ width:200px; height:500px; float:left} #zhong{ width:100px; height:500px; float:left} #right{ width:200px; height:500px; float:left} </style> </head> <body> <br /> <div id="wai"> <div id="left"> <select style="width:200px; height:300px" id="selleft" multiple="multiple"> <option value="山东">山东</option> <option value="淄博">淄博</option> <option value="张店">张店</option> </select> </div> <div id="zhong"> <div style="margin-left:10px; margin-top:20px"> <input style="width:60px; height:30px" type="button" value=">>" onclick="moveall()" /> </div> <div style="margin-left:10px; margin-top:30px"> <input style="width:60px; height:30px" type="button" value=">" onclick="moveone()" /> </div> </div> <div id="right"> <select id="selright" multiple="multiple" style="width:200px; height:300px"></select> </div> </div> <script type="text/javascript"> function moveone() { var left = document.getElementById("selleft"); var right = document.getElementById("selright"); var xz = left.value; var str = "<option value='"+xz+"'>"+xz+"</option>"; //判断 //alert(right.childNodes.item(0));} var bs = 0; for(var i=0;i<right.childNodes.length;i++) { if(right.childNodes.item(i).text==xz) { bs = 1; } } if(bs==0) { //追加 right.innerHTML = right.innerHTML+str; } } function moveall() { var left = document.getElementById("selleft"); var right = document.getElementById("selright"); right.innerHTML = left.innerHTML; } </script> </body>
年月日下拉条:
<script type="text/javascript"> FillNian(); FillYue(); FillTian(); function FillNian() { var b = new Date(); //获取当前时间 var nian = parseInt(b.getFullYear()); var str = ""; for(var i=nian-5;i<nian+6;i++) { str = str+"<option value='"+i+"'>"+i+"</option>"; } document.getElementById("nian").innerHTML = str; } function FillYue() { var str = ""; for(var i=1;i<13;i++) { str = str+"<option value='"+i+"'>"+i+"</option>"; } document.getElementById("yue").innerHTML = str; } function FillTian() { var yue = document.getElementById("yue").value; var nian = document.getElementById("nian").value; var ts = 31; if(yue==4 || yue==6 || yue==9 || yue==11) { ts=30; } if(yue==2) { if((nian%4==0 && nian%100 != 0) || nian%400==0) { ts = 29; } else { ts = 28; } } var str = ""; for(var i=1;i<ts+1;i++) { str = str+"<option value='"+i+"'>"+i+"</option>"; } document.getElementById("tian").innerHTML = str; } function biantian() { FillTian(); } </script> </body>