两个练习：

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界面架构(Activity,PhoneWiondow,DecorView)简介

    在一个Android应用程序中,用户界面通过View和ViewGroup对象构建.所有View的子类成为"Widget",所有ViewGroup的子类成为"Layout& ...

  2. iOS面试题 -总结 ，你的基础扎实吗？

    1.#import和#include的区别,@class代表什么? (1)#import指令是Object-C针对#include的改进版本,#import确保引用的文件只会被引用一次,这样你就不会陷 ...

  3. 浅谈Android编码规范及命名规范

    前言: 目前工作负责两个医疗APP项目的开发,同时使用LeanCloud进行云端配合开发,完全单挑. 现大框架已经完成,正在进行细节模块上的开发 抽空总结一下Android项目的开发规范:1.编码规范 ...

  4. luke使用

    Luke介绍 Luke是一个方便的索引查看和诊断工具,可以访问Lucene构建的索引文件,显示和修改某些索引内容.能提供: 通过document编号或term浏览索引 查看document内容,可复制 ...

  5. css之定位

    定位有三种,分别是相对定位 position:relative; .绝对定位 position:absolute; .固定定位 position:fixed; 相对定位 相对定位,就是微调元素位置的, ...

  6. 对C#泛型实例化对像

    public class A { } public class B<T> { public static T Get() { //在这一块如何实例化T这个对象呢?如果用default(T) ...

  7. AC日记——忠诚 洛谷 P1816

    题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨,财主还是对管家产生了 ...

  8. redis学习笔记

    Redis 命令 Redis 命令用于在 redis 服务上执行操作. 要在 redis 服务上执行命令需要一个 redis 客户端.Redis 客户端在我们之前下载的的 redis 的安装包中. 语 ...

  9. Android系统中应用的安装和卸载的监听

    一.创建一个类继承BroadcastReceiver并且复写onReceive的方法 public class AppStateReceiver extends BroadcastReceiver { ...

  10. 【IT】公司FTP服务器使用说明

    FTP服务器的作用:----------------------------------------------1.员工个人或者部门资料临时备份(而不是永久归档): 2.部门或员工间交换巨大资料: 3 ...