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

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

作者: 跟我念一遍 | 来源:发表于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

相关文章

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

    01下拉互换 02国庆节倒计时

  • Day8-作业

    1、下拉框实现左边移动选项到右边,右边移动选项到左边 2、飘动广告 3、倒计时,距离国庆节还有多少天、小时、分钟、...

  • js -- 操作练习

    1、下拉框实现左边移动选项到右边,右边移动选项到左边 2、飘动广告 参考3、倒计时,距离国庆节还有多少天、小时、分...

  • js应用

    1、下拉框实现左边移动选项到右边,右边移动选项到左边 这个可以实现多选 2、飘动广告 3、倒计时,距离国庆节还有多...

  • 左右手互换

    工作中打字、写字等,右手用的多,经常是一天下来,右手比左手要累的多。就想着,生活中就多用用左手吧。 于是,刷牙用左...

  • UITableView下拉刷新上下/左右颤抖问题

    tableView下拉刷新颤抖bug 1. 用MJRefresh下拉刷新UIcollectionview 左右颤抖...

  • 倒计时

    文/木子 开学倒计时了 爸妈回去倒计时了 教师节倒计时了 国庆节倒计时了 小儿12岁倒计时了 寒假倒计时了 元旦倒...

  • 切记!国庆8天假,安全出游必备Tips

    倒计时3天!倒计时3天!大家期待的8天国庆节假日马上就要来了~历年来国庆节都是家人外出旅游的最佳时机,可是因为今年...

  • 0609练习内容

    热身内容 椭圆机10分钟 俯身下拉30次 弓步下拉左右20次 练习内容 弓步前后跳20次*3 上举单腿前屈后展左右...

  • JQuery学习(三)

    1.使用jQuery完成下拉列表左右选择 (1)步骤<1>确定事件(鼠标单击click)<2>获取左侧下拉列表选中...

网友评论

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

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