zoukankan html css js c++ java

JavaScript的Dom操作

两个练习：

1.两个表单里面的数据相互移动：

    <style type="text/css">
            select {
                width: 100px;
                position: relative;
                float: left;
            }
            
            #div-out {
                width: 100px;
                position: relative;
                float: left;
                height: 113px;
                /*border: 1px solid black;*/
            }
            
            #div-in {
                width: 50px;
                /*border: 1px solid red;*/
                margin: 0px auto;
            }
            
            input {
                margin-top: 22px;
                width: 50px;
            }
        </style>
    </head>

    <body>
        <select id="s1" size="7" multiple="multiple">
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
            <option>DDD</option>
            <option>EEE</option>
        </select>
        <div id="div-out">
            <div id="div-in">
                <input type="button" value=">>>" onclick="toright()" />
                <input type="button" value="<<<" onclick="toleft()" />
            </div>
        </div>
        <select id="s2" size="7" multiple="multiple"></select>
    </body>

</html>
<script type="text/javascript">
    var opt = document.getElementById("s1").options;

    function toright() {
        for(var i = 0; i < opt.length; i++) {
            if(opt[i].selected){
        document.getElementById("s2").appendChild(opt[i]);
                i--;
            }
        }
    }
</script>

2.时间日期选择（注意闰年的区别）：

        <style type="text/css">
            select {
                width: 100px;
            }
        </style>
    </head>

    <body>
        <select id="year"></select><br /><br />
        <select id="month"></select><br /><br />
        <select id="day"></select>
        
    </body>

</html>
<script type="text/javascript">
    var time = new Date();
    year_now = time.getFullYear();
    month_now = time.getMonth() + 1;
    for(var i = year_now - 5; i <= year_now + 5; i++) {
        if(i == year_now) {
            document.getElementById("year").innerHTML += '<option selected="selected">' + i + '</option>';
        } else {
            document.getElementById("year").innerHTML += '<option>' + i + '</option>';
        }
    }
    for(var i = 1; i <= 12; i++) {
        if(i == month_now) {
            document.getElementById("month").innerHTML += '<option selected="selected">' + i + '</option>';
        } else {
            document.getElementById("month").innerHTML += '<option>' + i + '</option>';
        }

    }

    document.getElementById("month").onchange = function() {
        var month = document.getElementById("month");
        var day = document.getElementById("day");
        for(var i = 1; i <= 12; i++) {
            if(month.options[i - 1].selected) {
                if(i == 1 || i == 3 || i == 5 || i == 7 || i == 8 || i == 10 || i == 12) {
                    day.innerHTML ="";
                    for(var j = 1; j <= 31; j++) {
                        day.innerHTML += '<option>' + j + '</option>';
                    }
                } else if(i == 4 || i == 6 || i == 9 || i == 11) {
                    day.innerHTML ="";
                    for(var j = 1; j <= 30; j++) {
                        day.innerHTML += '<option>' + j + '</option>';
                    }
                } else {
                    var year = document.getElementById("year");
                    for(var i = 0; i < year.options.length; i++) {
                        if(year.options[i].selected) {
                            var yy = year.options[i].innerText;
                            if(yy % 4 == 0 && yy % 100 != 0 || yy % 400 == 0) {
                                day.innerHTML ="";
                                for(var j = 1; j <= 29; j++) {
                                    day.innerHTML += '<option>' + j + '</option>';
                                }
                            } else {
                                day.innerHTML ="";
                                for(var j = 1; j <= 28; j++) {
                                    day.innerHTML += '<option>' + j + '</option>';
                                }
                            }

                        }
                    }
                }
            }
        }

    }
</script>

注意代码编写过程中的排版问题。

查看全文

相关阅读:
探索c#之Async、Await剖析
 探索C#之布隆过滤器(Bloom filter)
探索C#之虚拟桶分片
 刷新本地的DNS缓存数据
 php取整函数ceil，floor，round，intval函数的区别
 这样顶级人生规划，想不成功都难
 全篇干货，10分钟带你读透《参与感》
iOS审核秘籍】提审资源检查大法
 php如何遍历多维的stdClass Object 对象，php的转换成数组的函数只能转换外面一丛数组
 RDS MySQL 连接数满情况的处理

原文地址：https://www.cnblogs.com/axj1993/p/6248688.html