HTMO DOM部分---小练习；列表之间移动、日期选择、好友选中、滑动效果、滚动条效果、飞入飞出效果。
2016-11-14 10:34
489 查看
一：列表之间数据移动
第一个列表里面有内容，第二个里面没有
实现功能：
点击左侧列表选中一项内容，点击按钮，复制到右侧
点击复制所有按钮，将左侧列表所有数据，复制到右侧
扩展功能：右侧列表实现去重复
<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="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
- 手势检测实现相册的左右滑动（并加上移动与旋转的特效） 首先，activity_main.xml里，使用ViewFlipper组件（可使用动画控制多个组件之间的切换效果） <?xml version="
- 仿StickyListHeaders 实现listview的header滑动效果(类似QQ好友列表)
- DOM的小练习，两个表格之间数据的移动
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
- Eric的日期选择下拉列表小控件
- Girdview实现滚动条效果，并且Head部分不滚动
- 日期选择下拉列表小控件
- 腾讯QQ网页在线客服，随网页滚动条上下移动的效果一
- Eric的日期选择下拉列表小控件
- jQuery日期弹出选择框Datepicker效果
- 下拉列表自动选中当前日期
- Eric的日期选择下拉列表小控件
- [练习]菜单滑动效果 兼容 ie ff opera
- css+js的排行、滑动切换新闻列表效果
- 随网页滚动条上下移动的效果 浮动QQ在线客服&网站QQ在线咨询
- 极品推荐输入框日期选择效果
- 打造完美SWT日期选择控件：（四）下拉列表的整体设计
- 弹出式日期选择组件日历显示VS2005重写部分
- 按下按钮后页面的滚动条向下（或向上）滑动，松开之后便停留在当前位置的效果如何实现？