首页 > 代码库 > JS实例
JS实例
创建某一下拉菜单的项：str = str+"<option value=http://www.mamicode.com/‘"+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="http://www.mamicode.com/山东">山东</option>
<option value="http://www.mamicode.com/淄博">淄博</option>
<option value="http://www.mamicode.com/张店">张店</option>
</select>
</div>
<div id="zhong">
<div style="margin-left:10px; margin-top:20px">
<input style="width:60px; height:30px" type="button" value="http://www.mamicode.com/>>" onclick="moveall()" />
</div>
<div style="margin-left:10px; margin-top:30px">
<input style="width:60px; height:30px" type="button" value="http://www.mamicode.com/>" 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=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+i+"‘>"+i+"</option>";
}
document.getElementById("nian").innerHTML = str;
}
function FillYue()
{
var str = "";
for(var i=1;i<13;i++)
{
str = str+"<option value=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+i+"‘>"+i+"</option>";
}
document.getElementById("tian").innerHTML = str;
}
function biantian()
{
FillTian();
}
</script>
</body>
JS实例