1、下拉框实现左边移动选项到右边，右边移动选项到左边
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、下拉框实现左边移动选项到右边，右边移动选项到左边-->
</head>
<body>
<select id='sel1' name="selel" style="margin-right: 32px;">
<option value="">北京</option>
<option value="">天津</option>
<option value="">吉林</option>
</select>
<select id="sel2" name="seler" >
<option value="">成都</option>
<option value="">昆明</option>
<option value="">贵州</option>
</select>
<br />
<button id='but_1' style="display: inline-block;">向右边移动</button>
<button id='but_2' style="display: inline-block;">向左边移动</button>
</body>
</html>
<script type="text/javascript">
var oselect1=document.getElementById('sel1')
var oselect2=document.getElementById('sel2')
var obutton_1=document.getElementById('but_1')
var obutton_2=document.getElementById('but_2')
//获取所有option
var option1=null
var option2=null
oselect1.onchange=function(){
option1=oselect1.options[oselect1.selectedIndex]
}
oselect2.onchange=function(){
option2=oselect2.options[oselect2.selectedIndex]
}
obutton_1.onclick=function(){
if(option1){
oselect2.appendChild(option1)
option1=null
}
}
obutton_2.onclick=function(){
if(option2){
oselect1.appendChild(option2)
option2=null
}
}
</script>
2、飘动广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div_1" style="position: absolute;top: 20px;left: 10px;width: 100%;">
<img style="width: 200px;height: 120px;" src="img/q2.jpg"/>
</div>
</body>
</html>
<script type="text/javascript">
var odiv=document.getElementById('div_1')
odiv.style.width=odiv.firstElementChild.style.width
odiv.style.height=odiv.firstElementChild.style.height
var x=Math.round(Math.random()*5+5)*(-1)**Math.round(Math.random()+1)
var y=Math.round(Math.random()*5+5)*(-1)**Math.round(Math.random()+1)
setInterval(function(){
if((parseInt(odiv.style.top)+y)<0){
odiv.style.top=0
y=-1*y
}
if((parseInt(odiv.style.top)+parseInt(odiv.style.height))>document.documentElement.clientHeight){
odiv.style.top=document.documentElement.clientHeight-parseInt(odiv.style.height)+'px'
y=-1*y
}
if((parseInt(odiv.style.left)+x)<0){
odiv.style.left=0
x=-1*x
}
if((parseInt(odiv.style.left)+parseInt(odiv.style.width))>document.documentElement.clientWidth){
odiv.style.left=document.documentElement.clientWidth-parseInt(odiv.style.width)+'px'
x=-1*x
}
odiv.style.top=parseInt(odiv.style.top)+y+'px'
odiv.style.left=parseInt(odiv.style.left)+x+'px'
},50)
</script>
1.JPG
2.JPG
3、倒计时，距离国庆节还有多少天、小时、分钟、秒
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3、倒计时，距离国庆节还有多少天、小时、分钟、秒</title>
</head>
<body>
<div id="div_2">
距离国庆节还有:000天00小时00分00秒
</div>
</body>
</html>
<script type="text/javascript">
var odiv=document.getElementById('div_2')
time1=new Date(2018,10,1,0,0,0)
time_data1=time1.getTime()
setInterval(function(){
var time2=new Date()
time_data2=time2.getTime()
sum=time_data1-time_data2
var da=0
var ho=0
var mu=0
var se=0
if(sum/60*60*24){
da=Math.floor(sum/(60*60*24*1000))
ho=Math.floor(sum%(60*60*24*1000)/(60*60*1000))
mu=Math.floor(sum%(60*60*1000)/(60*1000))
se=Math.floor(sum%(60*1000)/1000)
}else if(sum/60*60){
ho=Math.floor(sum%(60*60*24*1000)/(60*60*1000))
mu=Math.floor(sum%(60*60*1000)/(60*1000))
se=Math.floor(sum%(60*1000)/1000)
}else if(sum/60){
mu=Math.floor(sum%(60*60*1000)/(60*1000))
se=Math.floor(sum%(60*1000)/1000)
}else{
se=Math.floor(sum%(60*1000)/1000)
}
if(da<10){
da='00'+da
}else if(da<100){
da='0'+da
}
if(ho<10){
ho='0'+ho
}
if(mu<10){
mu='0'+mu
}
if(se<10){
se='0'+se
}
odiv.innerHTML='距离国庆还有:'+da+'天'+ho+'小时'+mu+'分'+se+'秒'
},1000)
</script>
4、实现全选、全不选、反选
obj.checked = true 选中
obj.checked = false 取消
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="but_4">全选</button>
<button id="but_5">全不选</button>
<button id="but_6">反选</button>
<form action="" method="post" name="form_more">
<input type="checkbox" name="box_check" value="" checked="true"/> 内容1<br />
<input type="checkbox" name="box_check" value="" /> 内容2<br />
<input type="checkbox" name="box_check" value="" /> 内容3<br />
<input type="checkbox" name="box_check" value="" /> 内容4<br />
<input type="checkbox" name="box_check" value="" /> 内容5<br />
<input type="checkbox" name="box_check" value="" /> 内容6<br />
<input type="checkbox" name="box_check" value="" /> 内容7
</form>
</body>
</html>
<script type="text/javascript">
var odiv1=document.getElementById('but_4')
var odiv2=document.getElementById('but_5')
var odiv3=document.getElementById('but_6')
odiv1.onclick=function(){
for(var i=0;i<document.form_more.length;i++){
document.form_more[i].checked=true
}
}
odiv2.onclick=function(){
for(var i=0;i<document.form_more.length;i++){
document.form_more[i].checked=false
}
}
odiv3.onclick=function(){
for(var i=0;i<document.form_more.length;i++){
if(document.form_more[i].checked==false){
document.form_more[i].checked=true
}
else{
document.form_more[i].checked=false
}
}
}
</script>
1.JPG
2.JPG
3.JPG
4.JPG
5、按住div可以实现div跟随鼠标移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div3" style="width: 200px;height: 200px;background-color: red;position: absolute;top: 10px;left: 10px;">
</div>
</body>
</html>
<script type="text/javascript">
var odiv=document.getElementById('div3')
var x1=0
var y1=0
var x2=0
var y2=0
odiv.onmousedown=function(ev){
var flag1=true
oevent=ev||event
x1=oevent.clientX
y1=oevent.clientY
document.onmousemove=function move(ev){
oevent=ev||event
x2=oevent.clientX
y2=oevent.clientY
if(flag1){
if(x2>x1){
odiv.style.left=parseInt(odiv.style.left)+x2-x1+'px'
x1=x2
}
else{
odiv.style.left=parseInt(odiv.style.left)+x2-x1+'px'
x1=x2
}
if(y2>y1){
odiv.style.top=parseInt(odiv.style.top)+y2-y1+'px'
y1=y2
}
else{
odiv.style.top=parseInt(odiv.style.top)+y2-y1+'px'
y1=y2
}
}
odiv.onmouseup=function(ev){
flag1=false
}
}
}
</script>
网友评论