两个练习：

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. android ImageLoader 混淆加载drawable出现黑色图片的解决方案

    在网上找了很久,没有找到.后来看了源码才知道... 多线程异步加载和显示图片(图片来源于网络.sd卡.assets文件夹,drawable文件夹(不能加载9patch),新增加载视频缩略图) Stri ...

  2. 【代码笔记】iOS-页面调的时候隐藏工具条

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...

  3. Appfuse：记录操作日志

    appfuse的数据维护操作都发生在***form页面,与之对应的是***FormController,在Controller中处理数据的操作是onSubmit方法,既然所有的操作都通过onSubmi ...

  4. zend studio 快捷键

    复制当前行:ctrl+alt+↓ 删除当前行:Ctrl+d 行注释:Ctrl+/ 快注释(先选中要注释的代码):Ctrl+shift+/ 提示助手(方便函数等补全):alt+/ 代码格式化:Ctrl+ ...

  5. 架构从最简单的数据访问框架(ORM)到资源调度和治理中心(SOA)说起

    随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构当网站流量很小时,只需一个应用,将 ...

  6. C#Winform连接Oracle数据库

    转载▼ http://blog.sina.com.cn/s/blog_900ca29d0102vn3r.html 一.连接方法 (1)System.Data.OracleClient 注意1:此方法在 ...

  7. Java线程并发：知识点

    Java线程并发:知识点   发布:一个对象是使它能够被当前范围之外的代码所引用: 常见形式:将对象的的引用存储到公共静态域:非私有方法中返回引用:发布内部类实例,包含引用.   逃逸:在对象尚未准备 ...

  8. Java NIO (转)

    Java NIO提供了与标准IO不同的IO工作方式: Channels and Buffers(通道和缓冲区):标准的IO基于字节流和字符流进行操作的,而NIO是基于通道(Channel)和缓冲区(B ...

  9. U3D 打包时找不到tag的问题

    在公司改完一个功能,把工程拷回家打开后,编辑器模式下运行正常,打包PC平台和安卓平台时都报错,找不到chatContent这个tag,察看了下下拉列表中明明有这个tag,并且勾选上了,但是点击add ...

  10. [LeetCode] Construct Binary Tree from Preorder and Inorder Traversal 由先序和中序遍历建立二叉树

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...