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()
{//改蓝色的宽度 200pxvar 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";//改红色的leftvar 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>

转载于:https://www.cnblogs.com/xingyue1988/p/6060942.html

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

微信小程序日历(酒店入住日期选择)
微信小程序日历(酒店入住日期选择) wxml代码.   <wxs src="../.. ...
Android所有小部件列表页面,伟大的Android时钟小部件列表，以帮助您了解时间 | MOS86...
在上周的文章中,我提供了一些Android小部件的示例,可帮助用户监视和切换其设置(包括WiFi,电池,亮度,数据,GPS等).).在本周的Android小部件中,我将强调一些有用的时钟小部件,帮助您 ...
vxe-input vue 日期选择组件带农历节日、小圆点提醒
vxe-table vxe-input vue 日期选择组件带农历节日.小圆点提醒默认的日期选择是没有节日信息的可以通过 festival-method 方法自定义节日信息,接收一个对象,用于渲染 ...
初级练手的小项目列表
分享从伯乐在线看到的一篇好文章 http://blog.jobbole.com/49762/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_so ...
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
题目44：监护室每小时测量一次病人的血压，若收缩压在90 - 140之间并且舒张压在60 - 90之间（包含端点值）则称之为正常，现给出某病人若干次测量的血压值，计算病人保持正常血压的最长小时数。
题目转载:http://python.wzms.com/s/1/37 题目描述: 监护室每小时测量一次病人的血压,若收缩压在90 - 140之间并且舒张压在60 - 90之间(包含端点值)则称之为正常 ...
JS每日一题: 小程序页面之间如何通信?
20190227 小程序页面之间如何通信? 首先将通信的模型列举出来, 分为以下几种兄弟页面间通信父路径页面向子路径页面通信子路径页面向父路径页面通信通信的方式 localStorage 本地 ...
如何查找两个列表之间的差异?
1. 概述查找相同数据类型的对象集合之间的差异是一项常见的编程任务.举个例子,假设我们有一份申请考试的学生名单和另一份通过考试的学生名单.这两张名单的区别会告诉我们那些没有通过考试的学生. 在Jav ...
小程序引用其他页面js_来聊聊小程序页面之间如何通信
小程序页面之间如何通信? 首先将通信的模型列举出来, 分为以下几种兄弟页面间通信父路径页面向子路径页面通信子路径页面向父路径页面通信通信的方式 localStorage 本地存储 global ...

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

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

最新文章

热门文章