一、定时器

<!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. margin为负值的几种情况

    1.margin-top为负值像素 margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: 1 <!DOCTYPE html> 2 <html lang=&q ...

  2. CF1151FSonya and Informatics

    CF1151FSonya and Informatics 给一个长度为 n$ (n\leq 100)$的 \(0/1\) 串,进行 k\((k \leq 10^9)\)次操作,每次操作选择两个位置 \ ...

  3. dotnet core 隐藏控制台

    如果写一个控制台程序,需要隐藏这个控制台程序,可以使用本文的方法 如果是在 Windows 下运行, 可以使用一些系统提供的方法隐藏控制台.如果是 Linux 下,都是控制台,就不用隐藏了 复制下面的 ...

  4. C++ 图片格式转化和压缩

    在做人脸识别底库图片导入的时候,需要支持主流的图片的格式,如jpeg.bmp.png等格式.所以需要对图片进行格式转化.图片过大的话,还有进行缩放等.本文介绍的是利用cximage开源库,来进行对图片 ...

  5. 【Linux】centos查看防火墙是否关闭

    查看防火墙的状态的命令为: sudo systemctl status firewalld 打开防火墙的方式有两种,一种是打开后重启会恢复回原来的状态,命令为: sudo systemctl star ...

  6. 使用struts2进行登录功能的开发

    使用struts2进行登录功能的开发 一. 设计需求 使用idea和maven开发具有登录功能的web应用,java语言,使用struts2框架. 二. 设计步骤 1.使用idea创建maven应用, ...

  7. CPP 设计模式学习

    源地址 https://www.ev0l.art/index.php/archives/20/ 备忘录模式 在一个类内部记录另一个类的快照状态的模式.可以再合适的时候跳回复用 设计备忘录的三大步骤: ...

  8. 20191121-10 Scrum立会报告+燃尽图 06

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/10070 一:组名: 组长组 组长:杨天宇 组员:魏新  罗杨美慧  王歆 ...

  9. 1064 朋友数 (20 分)C语言

    如果两个整数各位数字的和是一样的,则被称为是"朋友数",而那个公共的和就是它们的"朋友证号".例如 123 和 51 就是朋友数,因为 1+2+3 = 5+1 ...

  10. iscsi,nfs

    存储概述 存储的目标 存储是根据不同的应用环境通过采取合理.安全.有效的方式将数据保存到某些介质上并能保证有效的访问. 一方面它是数据临时或长期驻留的物理媒介. 另一方面,它是保证数据完整安全存放的方 ...