一：列表之间数据移动
第一个列表里面有内容，第二个里面没有
实现功能：
- 点击左侧列表选中一项内容，点击按钮，复制到右侧
- 点击复制所有按钮，将左侧列表所有数据，复制到右侧
扩展功能：右侧列表实现去重复
<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>
二
二：日期选择
实现当前年份的前5后5年的日期选择
实现功能：年份和月份页面加载完成使用JS循环添加，天数根据月份的变化动态添加改变
扩展功能：天数可以根据闰年平年变化
<body><select id="nian" onclick="biantian()"></select>年
<select id="yue" onclick="biantian()"></select>月
<select id="tian"></select>日<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>";//添加<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>
三
<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:150px; height:300px;}
.list{ width:150px; height:40px; background-color:#66F; text-align:center; line-height:40px; vertical-align:middle; color:white; border:1px solid white;}
.list:hover{ cursor:pointer; background-color:#F33}
</style>
</head><body>
<br />
<div id="wai">
<div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">张三</div>
<div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">李四</div>
<div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">王五</div>
</div></body><script type="text/javascript">function xuan(d)
{
//清
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++)
{
list[i].removeAttribute("bs");
list[i].style.backgroundColor = "#66F";
}
//选
d.setAttribute("bs",1);
d.style.backgroundColor = "#F33";
}function bian(d)
{
//清
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++)
{
if(list[i].getAttribute("bs")!="1")
{
list[i].style.backgroundColor = "#66F";
}
}
//选
d.style.backgroundColor = "#F33";
}function huifu()
{
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++)
{
if(list[i].getAttribute("bs")!="1")
{
list[i].style.backgroundColor = "#66F";
}
}
}</script>
四 滑动
<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>
五 随滚动条滚动改样式
<style type="text/css">
*{ margin:0px auto; padding:0px}
</style>
</head><body><div style="width:100%; height:100px; background-color:#63F"></div>
<div id="menu" style="width:100%; height:50px; background-color:#F36;"></div><input type="button" value="滚动" onclick="gun()" /><div style="width:100%; height:1000px; background-color:#FF6"></div></body>
<script type="text/javascript">window.onscroll = function(){
var d = document.getElementById("menu");
if(window.scrollY >= 100)
{
d.style.position = "fixed";
d.style.top = "0px"; }
else
{
d.style.position = "relative";
} } function gun()
{
window.scrollTo(0,100);
}</script>
六 图片的飞入飞出效果
<style type="text/css">
*{ margin:0px auto; padding:0px}
#tp{ width:900px; height:400px; overflow:hidden}
#img{ position:relative; }
</style>
</head><body><input type="button" value="飞入" onclick="feiru()" /><input type="button" value="飞出" onclick="feichu()" /><div id="tp">
<img id="img" style="top:-400px; left:-900px" src="data:images/201610281326233959.jpg" width="900" height="400px" />
</div><script type="text/javascript">function feiru()
{
fei();
}function fei()
{
var img = document.getElementById("img");
var topstr = img.style.top;
var top = parseInt(topstr.substr(0,topstr.length-2))+4;
img.style.top=top+"px"; var leftstr = img.style.left;
var left = parseInt(leftstr.substr(0,leftstr.length-2))+9;
img.style.left = left+"px"; if(top<-100)
{
window.setTimeout("fei()",10);
}
else if(top>=-100 && top<0)
{
window.setTimeout("fei()",30);
}
}</script>
