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



一：列表之间数据移动




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




实现功能：




    

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

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





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



<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="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="60px; height:30px" type="button" value=">>" onclick="moveall()" />
        </div>
      
        <div style="margin-left:10px; margin-top:30px">
        <input style="60px; height:30px" type="button" value=">" onclick="moveone()" />
        </div>
    </div>
    <div id="right">
        <select id="selright" multiple="multiple" style="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="200px"></div>
    <div id="right" style="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="100%; height:100px; background-color:#63F"></div>
<div id="menu" style="100%; height:50px; background-color:#F36;"></div>

<input type="button" value="滚动" onclick="gun()" />

<div style="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>








        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/xingyue1988/p/6060942.html