一、定时器

<!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. Mockito -- 入门篇

    Mockito是一种mock工具/框架.我理解EasyMock有点过时了,Mockito是现在比较流行的. 什么是mock?说的直白一点,大家都知道unit test应该是尽可能独立的.对一个clas ...

  2. JS 手札记

    addEventListener中的事件如果移除(removeEventListener)的话不能在事件中执行bind(this)否则会移除无效! // selectCurrent() // copy ...

  3. Java虚拟机-字节码执行引擎

    概述 Java虚拟机规范中制定了虚拟机字节码执行引擎的概念模型,成为各种虚拟机执行引擎的统一外观(Facade).不同的虚拟机引擎会包含两种执行模式,解释执行和编译执行. 运行时帧栈结构 栈帧(Sta ...

  4. 使用SuperWebSocket实现Web消息推送

    在大部分Web系统中,我们可能遇到需要向客户端推送消息的需求.SuperWebSocket第三方库能让我们轻松的完成任务.SuperWebSocket第三方库可以从网上下载,不过通过Visual St ...

  5. 关于oppo和vivo这两年强势崛起的反思

    先来谈谈配置吧(小白跳过) oppo产品线 r7 67522015年05月3g2320mAh r7 p 6795 6153g4100mAh r7s 616 67522015年10月4g 3070mAh ...

  6. MyBatis整合Spring MVC(易百教程）

    MyBatis是ibatis的升级版,作为hibernate的老对手,它是一个可以自定义SQL.存储过程和高级映射的持久层框架.与Hibernate 的主要区别就是 Mybatis 是半自动化的,而 ...

  7. background新增属性

    今天解除了几个曾经没有用到的属性,所以想总结并且复习一下. background-origin属性:有三个属性值,分别是border-box,padding-box,content-box.看到bor ...

  8. 在Linux CentOS下如何安装tar.gz和RPM软件包

    1.安装tar.gz软件包: 在Linuxr(Centos下)如何安装tar.gz软件包,该方式实质上就是源代码安装方式,具体如下: 在Linux中使用wget命令下载要安装的文件,命令格式如下:wg ...

  9. 使用spring框架创建最简单的java web程序(IDEA商业版）

    项目目录如下(IDEA社区版好像无法识别webapp目录?原因见https://www.cnblogs.com/bityinjd/p/9284378.html): 工具:  IDEA 1.首先使用ma ...

  10. C# event 事件

    事件第二篇:https://www.cnblogs.com/FavoriteMango/p/11731485.html 曾经面试碰到一道设计题: 现有一个人,一群鸟,人有一把手枪,当人开枪时,所有的鸟 ...