一、定时器

<!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. QuartusII 13.0的完美破解

    网络上破解QuartusII 13.0软件的方法都不行,最后经过本人总结测试(独创),最终实现了QuartusII 13.0的破解,破解方法如下: 网上常规操作之后,会得到一个“license.dat ...

  2. 2019-9-24-dotnet-remoting-抛出异常

    title author date CreateTime categories dotnet remoting 抛出异常 lindexi 2019-09-24 15:39:50 +0800 2018- ...

  3. Command failed: git -c core.longpaths=true config --get remote.origin.url

    「Unable to Connect to GitHub.com For Cloning」 Error: Command failed: git -c core.longpaths=true conf ...

  4. java反射小实例

    利用反射实现 对配置文件的更改达到更改方法的目的 文件夹目录 首先Student类中有个sleep方法 pro.properties定义了参数 最后是RelectTestMain. package c ...

  5. 【15.93%】【codeforces 672D】Robin Hood

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  6. Java 学习笔记(6)——继承

    之前说过了Java中面向对象的第一个特征--封装,这篇来讲它的第二个特征--继承.一般在程序设计中,继承是为了减少重复代码. 继承的基本介绍 public class Child extends Pa ...

  7. 解决win10台式机插入耳机没有声音或者音量不大

    没有声音 如果是插入机箱的前面板,尝试切换到后面板,因为有些组装机箱的前面板是不能用的 有声音,单音量不大(注意:并不一定适用于所有情况,但是可以尝试一下) 原因:缺少驱动,可以确定下控制面板是否有这 ...

  8. IDEA环境使用Git

    推送到Github 在设置中登录github账户 点击OK 将项目交给Git管理 之后项目文件就会变成红色 添加文件到暂存区 点击Add之后,项目文件会变成绿色 添加文件到本地仓库 点击Commit ...

  9. DOCKER学习_008:Docker容器的运行最佳实践

    一 容器分类 容器按用途大致可分为两类: 服务类容器,如 web server. database等 工具类容器,如cur容器, Iredis-cli容器 通常而言,服务类容器需要长期运行,所以使用 ...

  10. context:component-scan 和 mvc:annotation-driven

    前言 Spring MVC 框架提供了几种不同的配置元素来帮助和指示 Spring 容器管理以及注入 bean . 常用的几个 XML 配置是 context:component-scan mvc:a ...