一：列表之间数据移动




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




实现功能：




  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. inoic是什么
			
    本篇只侧重框架提供的功能和能力的研究,请关注后续实际部署使用体验. 一.inoic是什么? inoic是一个可以使用Web技术以hybird方式开发移动app的前端开源框架. 二.inoic框架特点  ...
    
			
    2. 
						
  2. batch insert 1 million datas into mysql
			
    最近尝试插入1百万条数据进db,以mysql为例. 1. 顺序insert 先写了个无脑的for循环作为base-line,插1万条耗时1m53s,根本不敢插1百万. foreach(var stud ...
    
			
    3. 
						
  3. nginx查看配置文件nginx.conf路径
			
      当你执行 nginx -t 得时候,nginx会去测试你得配置文件得语法,并告诉你配置文件是否写得正确,同时也告诉了你配置文件得路径:  # nginx -t nginx: the configu ...
    
			
    4. 
						
  4. POJ 3691 AC自动机上的dp
			
    题目大意: 给定一些不合理的DNA序列,再给一段较长的dna序列,问最少修改几次可以使序列中不存在任何不合理序列,不能找到修改方法输出-1 这里你修改某一个点的DNA可能会影响后面,我们不能单纯的找匹 ...
    
			
    5. 
						
  5. 如何登录Google美国服务器
			
    Google访问须知: ① 先访问一次 https://www.google.com/ncr ,禁止“国家重定向(No country Redirect) ” ② 再点击右上角齿轮图标,选第一项“Se ...
    
			
    6. 
						
  6. MonoRail学习：可重复组件ViewComponents的使用
			
    在MonoRail中我们可以定义一些可重用的组件,在其他需要使用的页面引入这个组件就可以了.有点相当于.NET中的自定义控件,可以节约代码,方便开发,提高重用性. 在MonoRail中把这一功能叫做V ...
    
			
    7. 
						
  7. Oracle top N实现
			
    在Oracle中实现select top N:由于Oracle不支持select top 语句,所以在Oracle中经常是用order by 跟rownum的组合来实现select top n的查询. ...
    
			
    8. 
						
  8. Controller方法的返回值
			
    方法的返回值1.ModelAndView这个就不多说,这是最基础的,前面定义一个ModelAndView,中途使用addObject方法添加属性,再返回.视图解析器会自动扫描到的.2.String这个 ...
    
			
    9. 
						
  9. centos ssh 无密码登录
			
    在linux系统中,ssh是远程登录的默认工具,因为该工具的协议使用了RSA/DSA的加密算法.该工具做linux系统的远程管理是非常安全的.telnet,因为其不安全性,在linux系统中被搁置使用 ...
    
			
    10. 
						
  10. 转：gartner 2014-07 ETL工具象限排名
			
    ref:  http://www.gartner.com/technology/reprints.do?id=1-1YAXV15&ct=140728&st=sb
    
			
    11.