美文网首页
下拉左右互换,国庆节倒计时

下拉左右互换,国庆节倒计时

作者: 跟我念一遍 | 来源:发表于2018-08-22 20:43 被阅读0次

    01下拉互换

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <button id="btn1">过去</button>
            <select name="好迪真好" id="s1">
                <option>你好</option>
                <option>我好</option>
                <option value="">大家好</option>
                <option value="">好迪</option>
                <option value="">真好</option>
            </select>
            <button id="btn2">过去</button>
            <select name="老司机" id="s2">
                <option value="">陈冠希</option>
                <option value="">费玉清</option>
                <option value="">岳云鹏</option>
                <option value="">郭德纲</option>
                <option value="">崔永元</option>
            </select>
        </body>
    </html>
    <script>
        var obtn1 = document.getElementById('btn1')
        var obtn2 = document.getElementById('btn2')
        var slc1 = document.getElementById('s1')
        var slc2 = document.getElementById('s2')
    
        
        obtn1.onclick = function(){
            //拿到选项中的索引
            var index = slc1.selectedIndex
            //拿到选项中的内容
            content = slc1.options[index].innerHTML
    //      console.log(content)
            //添加一个option并将内容赋给它
            var oopt1 = document.createElement('option') 
            oopt1.innerHTML = content
            slc2.appendChild(oopt1)
            //拿到当前option并删除
            var oopt2 = slc1.options[index]
    
            slc1.removeChild(oopt2)
        
        }
        
        obtn2.onclick = function(){
            //拿到选项中的索引
            var index = slc2.selectedIndex
            //拿到选项中的内容
            content = slc2.options[index].innerHTML
            //添加一个option并将内容赋给它
            var oopt3 = document.createElement('option')
            oopt3.innerHTML = content
            slc1.appendChild(oopt3)
            //拿到当前option并删除
            var oopt4 = slc2.options[index]
            slc2.removeChild(oopt4)
        }
    </script>
    
    

    02国庆节倒计时

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>倒计时</title>
            <style type="text/css">
                #d1{
                    width: 100%;
                    height: 300px;
                    line-height: 300px;
                    text-align: center;
                    background-color: red;
                    font-size: 50px;
                }
            </style>
        </head>
        <body>
            <div id="d1"></div>
        </body>
    </html>
    <script type="text/javascript">
    
    
    var odiv = document.getElementById('d1')
    
        var timer = setInterval(function(){
            //结束时间
            var endtime = new Date('2018/10/1 00:00:00')
        //  console.log(endtime)
            var end = endtime.getTime()
        //  console.log(end)
            //当前时间
            var date = new Date()
            var nowtime = date.getTime()
        //  console.log(nowtime)
            
            remain_time = end - nowtime
            
            if (remain_time > 0){
                day = parseInt(remain_time/1000/60/60/24)
                hour =parseInt(remain_time/1000/60/60%24)
                minute =parseInt(remain_time/1000/60%60)
                second =parseInt(remain_time/1000%60)
            }
    
            str = '距离国庆节还有'+'\n'+day+'天'+hour+'小时'+minute+'分钟'+second+'秒'
    //      console.log(str)
    
            odiv.innerHTML = str
            },1000)
    
    
    </script>
    
    国庆节倒计时.gif

    相关文章

      网友评论

          本文标题:下拉左右互换,国庆节倒计时

          本文链接:https://www.haomeiwen.com/subject/nqquiftx.html