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

一：列表之间数据移动

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

实现功能：

点击左侧列表选中一项内容，点击按钮，复制到右侧
点击复制所有按钮，将左侧列表所有数据，复制到右侧

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

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

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

随机推荐

CSS 水平居中
一.水平居中:行内元素解决方案居中元素:文字.链接以及其它行内元素(inline或inline-*类型的元素,如inline-block,inline-table,inline-flex)解决方案: ...
自定义cursor
cursor: url('绝对路径/big.cur'),auto; //通用方式
iOS程序进入后台后仍运行定时器NSTimer
由于本应用需要在应用进入后台后还要进行定时的检测功能,因此对于我来说怎样让APP在进入后台后保持运行状态是比较大的需求.然后在iOS系统中是很难实现的,不管是通过音频还是定位系统,我查找了一些 ...
mine layer(2008 World Final C)
类似于扫雷游戏,在一些格子中散布着一些地雷,具体的埋藏位置并不清楚,但知道每个格子及其周围八个格子的地雷总数.请问此时正中间那一行最多可能有多少地雷(题目假定所有的输入都是奇数行的)? 输入: 第一行 ...
droidbox官网
droidbox官网,droidbox已经移植到github上了 https://github.com/pjlantz/droidbox
c#多线程(UI线程,控件显示更新) Invoke和BeginInvoke 区别
如果只是直接使用子线程访问UI控件,直接看内容三,如果想深入了解从内容一看起. 一.Control.Invoke和BeginInvoke方法的区别先上总结: Control.Invoke 方法 (D ...
unity3d基础01
Unity3d 五大视图: 1 Scene:存放hierarchy中创建的游戏对象,但实际只能看到一部分 *Scene浏览: ①右键进入“飞行模式”,方便查看整个场景 ②选中摄像机,按ALT进入浏览的 ...
从决策树学习谈到贝叶斯分类算法、EM、HMM --别人的，拷来看看
从决策树学习谈到贝叶斯分类算法.EM.HMM 引言最近在面试中,除了基础 & 算法 & 项目之外,经常被问到或被要求介绍和描述下自己所知道的几种分类或聚类算法(当然,这完全 ...
在php中需要用到的mysql数据库的简单操作
1.数据库连接 1.1用windows命令行链接数据库服务器几个DOS命令在DOS环境下命令后面没有分号,在MySQL环境下,命令后面有分号进入盘符: 语法:盘符: 进入盘符下的某个文件夹语法 ...
Linux iptables重启后失效
解决办法如下: 输入完iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080 后执行iptables-s ...

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

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

随机推荐

热门专题