一、定时器

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" id="i1">

<input type="button" id="start" value="开始">

<input type="button" id="end" value="结束">

<script>

    /*

        定时器

        知识点：清除定时器后，定时器的值不会改变

     */

    var timeResh;

    function foo() {

        // 获取当前时间，并转换成字符串时间

        var now = new Date();

        nowStr = now.toLocaleString();

        // 获取标签，并填入当前时间

        var i1Ele = document.getElementById("i1");

        i1Ele.value = nowStr;

    }

    // 获取star button 并设置监听

    var starEle = document.getElementById("start");

    starEle.onclick = function () {

        foo();

        // timeResh定时器， 没赋值默认为undefined ,再次点击start 按钮时，因为 timeResh不等于undefined所以，不会生成新的定时器

        if(timeResh===undefined){

            // 每1000毫秒，刷新一次

            timeResh = setInterval(foo, 1000);

        }

    }

    var endEle = document.getElementById("end");

    endEle.onclick=function () {

        // 清除定时器后，值不会发送变化，把值重新设置成undefined

        clearInterval(timeResh);

        timeResh = undefined;

    }

</script>

</body>

</html>

二、焦点

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" id="i1" value="俄罗斯套娃">

<input type="button" value="搜索">

<script>

    /*

        获取焦点：onfocus

        失去焦点：onblur

     */

    var i1Ele = document.getElementById("i1");

    // 有焦点时，设置值为空

    i1Ele.onfocus = function () {

        i1Ele.value = ""

    }

    var i2Ele = document.getElementById("i2");

    i1Ele.onblur = function () {

        // 当input的内容为空时

        if(!i1Ele.value.trim()) {

            i1Ele.value = "俄罗斯套娃";

        }

    }

</script>

</body>

</html>

三、select联动

onchange    域的内容被改变

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<select name="" id="f1">

    <option value="0">--请选择--</option>

    <option value="1">江苏</option>

    <option value="2">北京</option>

</select>

<select name="" id="f2">

</select>

<script>

    /*

        思路：

            1、选择城市，获取数据

            2、创建option标签

            3、添加数据到option

            4、将option标签加到select标签中

            5、重新选择时，要清空之前添加的标签

     */

    var data = {1: ["徐州", "常州", "无锡"], 2: ["东城", "沙河"]}

    var f1Ele = document.getElementById("f1");

    f1Ele.onchange = function () {

        var area = data[this.value];

        var f2Ele = document.getElementById("f2");

        // 清空标签

        f2Ele.innerHTML="";

        for (var i = 0; i < area.length; i++){

            var optEle = document.createElement("option");

            optEle.innerText = area[i];

            f2Ele.appendChild(optEle);

        }

    }

</script>

</body>

</html>

javascript DOM练习的更多相关文章

  1. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  3. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  4. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  5. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  6. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  7. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  8. JavaScript DOM 编程艺术（第2版）读书笔记（1）

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

  9. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  10. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

随机推荐

  1. linux 内核协助的探测

    Linux 内核提供了一个低级设施来探测中断号. 它只为非共享中断, 但是大部分能够在共 享中断状态工作的硬件提供了更好的方法来尽量发现配置的中断号.这个设施包括 2 个函 数, 在<linux ...

  2. Hamcrest匹配器框架

    其实在之前的文章中已经使用过 Hamcrest 匹配器框架,本篇文章将系统的介绍它的使用. 为什么要用Hamcrest匹配器框架 Hamcrest是一款软件测试框架, 可以通过现有的匹配器类检查代码中 ...

  3. java.util.Date和jdk1.8新时间API比拼

    旧的时间和日期的API的缺陷 Java 的 java.util.Date 和 java.util.Calendar 类易用性差,不支持时区,而且都不是线程安全的. Date如果不格式化,打印出的日期可 ...

  4. cmd 如何跨驱动器移动文件夹

    如果在命令行或 cmd 批处理文件通过 move 移动文件夹的时候,移动的文件夹是跨驱动器的,那么将会显示拒绝访问 解决通过 move 移动文件夹到不同的驱动器需要通过先复制文件夹到另一个驱动器,然后 ...

  5. Linux 内核 启动时间

    为见到 PCI 如何工作的, 我们从系统启动开始, 因为那是设备被配置的时候. 当一个 PCI 设备上电时, 硬件保持非激活. 换句话说, 设备只响应配置交易. 在上电时, 设备没有内存并且没有 I/ ...

  6. WPF 分页控件Pager

    本文为伪原创原文为 NET未来之路的https://www.cnblogs.com/lonelyxmas/p/10641255.html 原文中,页码数量会不断增加,会将下一页的按钮顶出去 修改了一下 ...

  7. oracle解除被锁定的表的状态

      select b.owner,b.object_name,a.session_id,a.locked_mode,c.serial#,c.sid||','||c.serial# from v$loc ...

  8. 【Linux】nl笔记

    nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...

  9. Qt串行化的输入和输出（使用QDataStream读写QByteArray，对QIODevice直接起作用）

    参考https://lug.ustc.edu.cn/sites/qtguide/ 今天看了一个介绍Qt串行化的介绍,感觉很受益,就记录了下来. 串行化(Serialization)是计算机科学中的一个 ...

  10. HDU1166 敌兵布阵 BZOJ1012 最大数[树状数组]

    一.前置知识-树状数组 树状数组(binary indexed tree)是一种简洁的代码量很小的数据结构,能够高效的处理前缀区间上的问题.在很多情况下能写树状数组解决的就不用码半天线段树了. 树状数 ...