一：列表之间数据移动




第一个列表里面有内容，第二个里面没有




实现功能：




  1. 点击左侧列表选中一项内容，点击按钮，复制到右侧
    2. 

  2. 点击复制所有按钮，将左侧列表所有数据，复制到右侧




扩展功能：右侧列表实现去重复


<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>


												


											
HTMO DOM部分---小练习；列表之间移动、日期选择、好友选中、滑动效果、滚动条效果、飞入飞出效果。的更多相关文章
	

    
								
  1. SHAREPOINT 2013 列表之间相互关联
		
    修改内容 1.增加列表设置,隐藏Aid字段操作 SharePoint 列表之间相互关联 例如两张列表之间的父子关系. 思路如下: 列表中新增列表项后会有一个唯一的ID,我们获取到该ID赋予子表即可将两 ...
    
		
    2. 
						
  2. 9月23日JavaScript作业----两个列表之间移动数据
		
    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...
    
		
    3. 
						
  3. 微信小程序-列表渲染多层嵌套循环
		
    微信小程序-列表渲染多层嵌套循环 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for= ...
    
		
    4. 
						
  4. 【微信小程序】手写索引选择器（城市列表，汽车品牌选择列表）
		
    摘要: 小程序索引选择器,点击跳转相应条目,索引可滑动,滑动也可跳转 场景:城市选择列表, 汽车品牌选择列表 所用组件: scroll-view(小程序原生) https://developers.w ...
    
		
    5. 
						
  5. jQuery对象和Dom对象的区分以及之间转换
		
    刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 一,什么是jQuer ...
    
		
    6. 
						
  6. Axure的中继器如何实现两个列表之间的交互
		
    Axure RP 8安装包+注册码+中文语言包下载地址如下: 链接: https://pan.baidu.com/s/1nwRnCUl 密码: yy36 将中文语言包下的lang文件夹直接放在安装Ax ...
    
		
    7. 
						
  7. Java 获取两个日期之间的日期
		
    1.前期需求,两个日期,我们叫他startDate和endDate,然后获取到两个日期之间的日期 /** * 获取两个日期之间的日期 * @param start 开始日期 * @param end  ...
    
		
    8. 
						
  8. Android UI（五）云通讯录项目之联系人列表，带侧滑选择，带搜索框
		
    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]h ...
    
		
    9. 
						
  9. SHELL打印两个日期之间的日期
		
    SHELL打印两个日期之间的日期 [root@umout shell]# cat date_to_date.sh THIS_PATH=$(cd `dirname $0`;) cd $THIS_PATH ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ECMAScript 6新特性（1）数组篇
			
    数组现有的方法: .concat():连接两个或更多的数组,并返回结果. .join():把数组的所有元素放入一个字符串.元素通过指定的分隔符进行分隔. .pop():删除并返回数组的最后一个元素 . ...
    
			
    2. 
						
  2. Matlab与C/C++联合编程之Matlab以MEX方式调用C/C++代码（四）
			
    利用Matlab与VC++联合编程,既可在C语言程序中打开Matlab引擎,调用Matlab的ToolBox函数和作图函数,也可在Matlab中调用C代码生成的动态链接库文件,用以加快执行速度.缩短开 ...
    
			
    3. 
						
  3. SharePoint 2013 Nintex Workflow 工作流帮助（五）
			
    博客地址 http://blog.csdn.net/foxdave 工作流动作 4. Assign To-Do Task(User interaction分组) 直观理解,指派待办任务给一个或多个用户 ...
    
			
    4. 
						
  4. python版恶俗古风自动生成器.py
			
    python版恶俗古风自动生成器.py """ python版恶俗古风自动生成器.py 模仿自: http://www.jianshu.com/p/f893291674c ...
    
			
    5. 
						
  5. 摘自：java夜未眠之java学习之道
			
    目前Java可以说是产业界和学术界最热门的语言,许多读者都很急切想把Java学好.除非是武侠小说中的运功传送内力的方式,否则花上一段时间苦学是免不了的.花时间,不打紧,就是怕方法错误,事倍功半.我认为 ...
    
			
    6. 
						
  6. python随笔
			
    1. 使用iter实现接收用户多行输入 stopword = '' str = '' print('请将要添加的内容输入下方,输入空白行按回车退出程序:') for line in iter(inpu ...
    
			
    7. 
						
  7. Spring反射机制
			
    Spring是分层的Java SE/EE应用一站式的轻量级开源框架,以IoC(Inverse of Control)和AOP(Aspect Oriented Programming)为内核,提供了展现 ...
    
			
    8. 
						
  8. Objective-C determine data network type of the iOS device
			
    Im on an application that receive data from server, the problem is when user connect to cellular dat ...
    
			
    9. 
						
  9. Android点击View显示PopupWindow，再次重复点击View关闭PopupWindow
			
     Android点击View显示PopupWindow,再次重复点击View关闭PopupWindow 这本身是一个看似很简单的问题,但是如果设置不当,就可能导致莫名其妙失效问题.通常在Andro ...
    
			
    10. 
						
  10. Spring Boot交流平台
			
    可以关注微信公众号springboot或者可以加入 Spring Boot QQ交流群1:193341332 (群已满) Spring Boot QQ交流群2:193341364 微信公众号搜索spr ...
    
			
    11.