Day8-作业

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>