两个练习：

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>

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

JavaScript的Dom操作的更多相关文章

  1. 第一百一十六节，JavaScript，DOM操作样式

    JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  2. 第一百一十五节，JavaScript，DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  3. Python之路day13 web 前端（JavaScript，DOM操作）

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  4. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  5. JavaScript入门⑦-DOM操作大全

    JavaScript入门系列目录 JavaScript入门①-基础知识筑基 JavaScript入门②-函数(1)基础{浅出} JavaScript入门③-函数(2)原理{深入}执行上下文 JavaS ...

  6. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  7. （转）Javascript的DOM操作 - 性能优化

    转载:https://my.oschina.net/blogshi/blog/198910 摘要: 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维 ...

  8. JavaScript：DOM操作

    一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某 ...

  9. JavaScript之DOM操作，事件操作，节点操作

    1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...

  10. JavaScript 的DOM操作详解

    内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...

随机推荐

  1. Unable to simultaneously satisfy constraints.

    在进行版本的迭代更新时,新功能需求需要对主页面的UI进行重新的布局,但是,报了错误,出了好多约束方面的问题: Unable to simultaneously satisfy constraints. ...

  2. xml文件解析(解析以后在RootTableViewController输出)

    这是从美团弄得xml文件,地区和经纬度. 你点了地区以后 ,  就可以查看经纬度 ,因为笔者懒, 有现成的文本框 , 所有偷懒了. 下面是一些枯燥的代码了 . #import <UIKit/UI ...

  3. 学习sql中的排列组合，在园子里搜着看于是。。。

    学习sql中的排列组合,在园子里搜着看,看到篇文章,于是自己(新手)用了最最原始的sql去写出来: --需求----B, C, F, M and S住在一座房子的不同楼层.--B 不住顶层.C 不住底 ...

  4. Linux基础练习题

    1.列出当前系统上所有已经登录的用户名,注意:同一个用户登录多次,则只显示一次即可. [root@bj-1-160-enzhi ~]# who|cut -d ' ' -f 1|uniq -c 2 ro ...

  5. iOS 浅复制和深复制的深层理解，含示例

    转载:https://www.zybuluo.com/MicroCai/note/50592 版权归 @MicroCai 所有 以下是正文: 浅复制就是指针拷贝:深复制就是内容拷贝. 集合的浅复制 ( ...

  6. getopt,getoptlong学习

         getopt和getoptlong被用来解析命令行参数.   一.getopt #include <unistd.h> extern char *optarg; extern i ...

  7. WPF 自定义的窗口拖动

    WPF原有的窗口样式太丑,当我们重新定义窗口时,则需要添加一些额外的功能,如拖动~ 1.在界面上对布局元素如Grid,添加委托事件: MouseLeftButtonDown="UIEleme ...

  8. 怎么在GitHub上寻找开源项目呢

    find projects GitHub Explore: Popular and trending projects. GitHub Stars: Projects starred by other ...

  9. 1597: [Usaco2008 Mar]土地购买

    1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4023  Solved: 1470[Submit] ...

  10. [LeetCode] Maximal Rectangle 最大矩形

    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and ...