一、定时器

<!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进程互斥等待

    我们已经见到当一个进程调用 wake_up 在等待队列上, 所有的在这个队列上等待的进程 被置为可运行的. 在许多情况下, 这是正确的做法. 但是, 在别的情况下, 可能提前知道 只有一个被唤醒的进程 ...

  2. js算法（1）

    数组排序 arr.sort(function compare(a,b){return b.value-a.value}); json 排序 $.getJSON('URl',function(data) ...

  3. 研发环境容器化实施过程（docker + docker-compose + jenkins）

    目录 背景介绍 改造思路 容器构建 基础准备 中间件容器 外部依赖容器 业务应用容器 容器整合 自动构建容器 Maven相关 非Maven项目 总结 背景介绍 目前公司内部系统(代号GMS)研发团队, ...

  4. 第二阶段：4.商业需求文档MRD：3.PRD-页面结构图

    这也是功能结构以及优先级 这是页面层级 页面结构图 再细分某一个频道或者子页面 层层细分 用mind做的页面结构图 里面也包含了功能

  5. java中发送http请求的方法

    package org.jeecgframework.test.demo; import java.io.BufferedReader; import java.io.FileOutputStream ...

  6. Mysql基本配置以及常见问题

    以下是MYSQL的基本配置以及常见问题的解决方式 1.获取客户端 https://dev.mysql.com/downloads/ 有两种方式获取到MYSQL,一种是通过MySQL Community ...

  7. appium启动app(ios)

    Appium启动APP至少需要7个参数 ​ 'platformVersion','deviceName'.'udid'.'bundleId'.'platformName'.'automationNam ...

  8. Redo与Undo的理解

    本文概要本文的原意是一篇个人学习笔记,为了避免成为草草记录一下的流水账,尝试从给人介绍的角度开写.但在整理的过程中,越来越感觉力不从心,一是细节太多了,原以为足够了解的一个小知识点下可能隐藏了很多细节 ...

  9. Java函数式接口与Lambda表达式

    什么是函数式接口? 函数式接口是一种特殊的接口,接口中只有一个抽象方法. 函数式接口与Lambda表达式有什么关系? 当需要一个函数式接口的对象时,可以提供一个lambda表达式. package l ...

  10. Nginx 究竟如何处理事件？

    在了解了网络事件以及事件分发收集器以后,让我们来了解 Nginx 是怎么样处理事件的? Nginx 事件循环 当 Nginx 刚刚启动时,在等待事件部分,也就是打开了 80 或 443 端口,这个时候 ...