两个练习：

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. APP级别处理未捕获异常

    前言: 项目APP有时候会出现Crash,然后就是弹出系统强制退出的对话框,点击关闭APP. 有的APP进行了处理,会发现,当程序出现异常的时候,会Toast一个提示"程序出现异常,3秒后将 ...

  2. Node.js学习——基本模块之fs

    基本模块之fs 异步读文件 异步读取一个文本文件的代码如下: 'use strict'; var fs = require('fs'); fs.readFile('sample.txt', 'utf- ...

  3. （四）Spark集群搭建-Java&Python版Spark

    Spark集群搭建 视频教程 1.优酷 2.YouTube 安装scala环境 下载地址http://www.scala-lang.org/download/ 上传scala-2.10.5.tgz到m ...

  4. java 线程池——异步任务

    一.简单粗暴的线程 最原始的方式,当我们要并行的或者异步的执行一个任务的时候,我们会直接使用启动一个线程的方式,如下面所示: new Thread(new Runnable() { @Override ...

  5. Ajax语法浅析

    Ajax是目前很普遍的一门技术,也是很值得探讨和研究的一门技术.本文将针对Ajax的发展过程并结合其在不同库框架中的使用方式来和大家分享下Ajax的那些新老语法. Ajax简介 Ajax全称为“Asy ...

  6. HTML 学习笔记 JavaScript（面向对象）

    现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...

  7. Python基本数据结构

    第一部分: #列表a = [11,22,24,29,30,32] #1 把28插入到列表的末端 >>> a.append(28) >>> a [11, 22, 24 ...

  8. IT培训行业揭秘（五）

    前面说了一大堆,简单揭露了一些目前培训行业鱼龙混在的情况,那么今天我就站在一个即将毕业的大学生角度来谈谈如何选择一个靠谱的培训机构. 你即将大学毕业了,在大学里面浑浑噩噩的混了几年,马上就要离开校园, ...

  9. 浅谈javascript面向对象

    我们常用的两种编程模式 POP--面向过程编程(Process-oriented programming) 面向过程编程是以功能为中心来进行思考和组织的一种编程方法,它强调的是系统的数据被加工和处理的 ...

  10. JavaEE学习文章汇总-并发，集群，分布式

    以下文章来自博客 http://blog.csdn.net/FX_SKY/article/category/6203839 其中包括 集群Zookeeper 环境搭建 http://blog.csdn ...