一&＃xff1a;列表之间数据移动
第一个列表里面有内容&＃xff0c;第二个里面没有
实现功能&＃xff1a;
- 点击左侧列表选中一项内容&＃xff0c;点击按钮&＃xff0c;复制到右侧
- 点击复制所有按钮&＃xff0c;将左侧列表所有数据&＃xff0c;复制到右侧
扩展功能&＃xff1a;右侧列表实现去重复
<style type&＃61;"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&＃61;"wai"><div id&＃61;"left"><select style&＃61;"width:200px; height:300px" id&＃61;"selleft" multiple&＃61;"multiple"><option value&＃61;"山东">山东option><option value&＃61;"淄博">淄博option><option value&＃61;"张店">张店option>select>div><div id&＃61;"zhong"><div style&＃61;"margin-left:10px; margin-top:20px"><input style&＃61;"width:60px; height:30px" type&＃61;"button" value&＃61;">>" onclick&＃61;"moveall()" />div><div style&＃61;"margin-left:10px; margin-top:30px"><input style&＃61;"width:60px; height:30px" type&＃61;"button" value&＃61;">" onclick&＃61;"moveone()" />div>div><div id&＃61;"right"><select id&＃61;"selright" multiple&＃61;"multiple" style&＃61;"width:200px; height:300px">select>div>
div><script type&＃61;"text/Javascript">function moveone()
{var left &＃61; document.getElementById("selleft");var right &＃61; document.getElementById("selright");var xz &＃61; left.value;var str &＃61; "";//判断//alert(right.childNodes.item(0));var bs &＃61; 0;for(var i&＃61;0;i<right.childNodes.length;i&＃43;&＃43;){if(right.childNodes.item(i).text&＃61;&＃61;xz){bs &＃61; 1;}}if(bs&＃61;&＃61;0){//追加
right.innerHTML &＃61; right.innerHTML&＃43;str;}
}function moveall()
{var left &＃61; document.getElementById("selleft");var right &＃61; document.getElementById("selright");right.innerHTML &＃61; left.innerHTML;
}script>
二
二&＃xff1a;日期选择
实现当前年份的前5后5年的日期选择
实现功能&＃xff1a;年份和月份页面加载完成使用JS循环添加&＃xff0c;天数根据月份的变化动态添加改变
扩展功能&＃xff1a;天数可以根据闰年平年变化
<body><select id&＃61;"nian" onclick&＃61;"biantian()">select>年
<select id&＃61;"yue" onclick&＃61;"biantian()">select>月
<select id&＃61;"tian">select>日<script type&＃61;"text/Javascript">
FillNian();
FillYue();
FillTian();
function FillNian()
{var b &＃61; new Date(); //获取当前时间var nian &＃61; parseInt(b.getFullYear());var str &＃61; "";for(var i&＃61;nian-5;i<nian&＃43;6;i&＃43;&＃43;){str &＃61; str&＃43;"";//添加"nian").innerHTML &＃61; str;}function FillYue()
{var str &＃61; "";for(var i&＃61;1;i<13;i&＃43;&＃43;){str &＃61; str&＃43;"";}document.getElementById("yue").innerHTML &＃61; str;
}function FillTian()
{var yue &＃61; document.getElementById("yue").value;var nian &＃61; document.getElementById("nian").value;var ts &＃61; 31;if(yue&＃61;&＃61;4 || yue&＃61;&＃61;6 || yue&＃61;&＃61;9 || yue&＃61;&＃61;11){ts&＃61;30;}if(yue&＃61;&＃61;2){if((nian%4&＃61;&＃61;0 && nian%100 !&＃61; 0) || nian%400&＃61;&＃61;0){ts &＃61; 29;}else{ts &＃61; 28;}}var str &＃61; "";for(var i&＃61;1;i<ts&＃43;1;i&＃43;&＃43;){str &＃61; str&＃43;"";}document.getElementById("tian").innerHTML &＃61; str;}function biantian()
{FillTian();
}
script>
body>
三
<style type&＃61;"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&＃61;"wai"><div class&＃61;"list" onclick&＃61;"xuan(this)" onmouseover&＃61;"bian(this)" onmouseout&＃61;"huifu()">张三div><div class&＃61;"list" onclick&＃61;"xuan(this)" onmouseover&＃61;"bian(this)" onmouseout&＃61;"huifu()">李四div><div class&＃61;"list" onclick&＃61;"xuan(this)" onmouseover&＃61;"bian(this)" onmouseout&＃61;"huifu()">王五div>
div>body><script type&＃61;"text/Javascript">function xuan(d)
{//清var list &＃61; document.getElementsByClassName("list");for(var i&＃61;0;i<list.length;i&＃43;&＃43;){list[i].removeAttribute("bs");list[i].style.backgroundColor &＃61; "#66F";}//选
d.setAttribute("bs",1);d.style.backgroundColor &＃61; "#F33";
}function bian(d)
{//清var list &＃61; document.getElementsByClassName("list");for(var i&＃61;0;i<list.length;i&＃43;&＃43;){if(list[i].getAttribute("bs")!&＃61;"1"){list[i].style.backgroundColor &＃61; "#66F";}}//选
d.style.backgroundColor &＃61; "#F33";
}function huifu()
{var list &＃61; document.getElementsByClassName("list");for(var i&＃61;0;i<list.length;i&＃43;&＃43;){if(list[i].getAttribute("bs")!&＃61;"1"){list[i].style.backgroundColor &＃61; "#66F";}}
}script>
四 滑动
<style type&＃61;"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&＃61;"wai"><div id&＃61;"left" style&＃61;"width:200px">div><div id&＃61;"right" style&＃61;"width:800px">div>
div><div id&＃61;"anniu" style&＃61;"left:175px" onclick&＃61;"hua()">div><script type&＃61;"text/Javascript">var id;function hua()
{id &＃61; window.setInterval("dong()",10);
}//滑动的方法&＃xff0c;调一次滑动3px
function dong()
{//改蓝色的宽度 200pxvar zuo &＃61; document.getElementById("left");kd &＃61; zuo.style.width;if(parseInt(kd.substr(0,kd.length-2))>&＃61;800){window.clearInterval(id);return;}kd &＃61; parseInt(kd.substr(0,kd.length-2))&＃43;3;zuo.style.width &＃61; kd&＃43;"px";//改黄色的宽度var you &＃61; document.getElementById("right");ykd &＃61; you.style.width;ykd &＃61; parseInt(ykd.substr(0,ykd.length-2))-3;you.style.width &＃61; ykd&＃43;"px";//改红色的leftvar hong &＃61; document.getElementById("anniu");hleft &＃61; hong.style.left;hleft &＃61; parseInt(hleft.substr(0,hleft.length-2))&＃43;3;hong.style.left &＃61; hleft&＃43;"px";}script>
五 随滚动条滚动改样式
<style type&＃61;"text/css">
*{ margin:0px auto; padding:0px}
style>
head><body><div style&＃61;"width:100%; height:100px; background-color:#63F">div>
<div id&＃61;"menu" style&＃61;"width:100%; height:50px; background-color:#F36;">div><input type&＃61;"button" value&＃61;"滚动" onclick&＃61;"gun()" /><div style&＃61;"width:100%; height:1000px; background-color:#FF6">div>body>
<script type&＃61;"text/Javascript">window.onscroll &＃61; function(){var d &＃61; document.getElementById("menu");if(window.scrollY >&＃61; 100){d.style.position &＃61; "fixed";d.style.top &＃61; "0px";}else{d.style.position &＃61; "relative";}}function gun(){window.scrollTo(0,100);}script>
六 图片的飞入飞出效果
<style type&＃61;"text/css">
*{ margin:0px auto; padding:0px}
#tp{ width:900px; height:400px; overflow:hidden}
#img{ position:relative; }
style>
head><body><input type&＃61;"button" value&＃61;"飞入" onclick&＃61;"feiru()" /><input type&＃61;"button" value&＃61;"飞出" onclick&＃61;"feichu()" /><div id&＃61;"tp"><img id&＃61;"img" style&＃61;"top:-400px; left:-900px" src&＃61;"images/201610281326233959.jpg" width&＃61;"900" height&＃61;"400px" />
div><script type&＃61;"text/Javascript">function feiru()
{fei();
}function fei()
{var img &＃61; document.getElementById("img");var topstr &＃61; img.style.top;var top &＃61; parseInt(topstr.substr(0,topstr.length-2))&＃43;4;img.style.top&＃61;top&＃43;"px";var leftstr &＃61; img.style.left;var left &＃61; parseInt(leftstr.substr(0,leftstr.length-2))&＃43;9;img.style.left &＃61; left&＃43;"px";if(top<-100){window.setTimeout("fei()",10);}else if(top>&＃61;-100 && top<0){window.setTimeout("fei()",30);}
}script>
京公网安备 11010802041100号