计时器:

<body>

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

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

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

<script>

    var intervalId;

    function f() {

        var timeStr = (new Date()).toLocaleString();

        var inputEle = document.getElementById('i1');

        inputEle.value = timeStr;

    }

    function start() {

        f();

        if(intervalId === undefined){

            intervalId = setInterval(f,1000)

        }

        function end() {

            clearInterval(intervalId);

            interval = undefined;

        }

    }

</script>

</body>

搜索框:

 

　　这个搜索框默认会在里面提示搜索内容,当鼠标点击时,内容会变空. 鼠标焦点离开时,又会恢复提示,如果输入框内有输入内容,则不会恢复提示

<input type="text" id="username" value="请输入内容" >

<script>

    var inpEle = document.getElementById('username');

    inpEle.onfocus = function () {

      if(this.value === '请输入内容'){

          this.value='';

      }else{

      }

    };

    inpEle.onblur = function () {

        if(this.value.trim().length === 0){

            this.value = '请输入内容';

        }

//这里也可以有另一种方式,(判断内容的长度,为0就是空)

//  if (this.value.trim().length === 0){

//            this.value='请输入内容';

//        }

    };

</script>

selected联动:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>select联动</title>

</head>

<body>

<select id="province">

  <option>请选择省:</option>

</select>

<select id="city">

  <option>请选择市:</option>

</select>

<script>

  data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

  var p = document.getElementById("province");

  var c = document.getElementById("city");

  //页面一刷新就将所有的省份都添加到select标签中

  for (var i in data) {

    var optionP = document.createElement("option"); //创建option标签

    optionP.innerHTML = i; //将省份的数据添加到option标签中

    p.appendChild(optionP);//将option标签添加到select标签中

  }

  //只要select中选择的值发生变化的时候，就可以触发一个onchange事件，那么我们就可以通过这个事件来完成select标签联动

  p.onchange = function () {

    //1.获取省的值

    var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是当前选择的option标签的索引位置，
    //this.options是获取所有的option标签，通过索引拿到当前选择的option标签对象，然后.innerHTML获取对象中的内容，也就是省份

    //还可以这样获取省：var pro = this.value;

    var citys = data[pro]; //2. 通过上面获得的省份去data里面取出该省对应的所有的市

    // 3. 清空option

    c.innerHTML = ""; //清空显示市的那个select标签里面的内容

　　

    //4.循环所有的市，然后添加到显示市的那个select标签中

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

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

      option_city.innerHTML = citys[i];

      c.appendChild(option_city);

    }

  }

</script>

</body>

</html>

Javascript实例 -- 计时器, 搜索框,selected联动的更多相关文章

  1. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  2. 原生JavaScript实战之搜索框筛选功能

    成品图如下所示: 先搭建HTML结构: <div class="wrapper"> <div class="sWrapper"> < ...

  3. 前端基础之BOM和DOM(响应式布局、计时器、搜索框、select联动)

    一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...

  4. 前端基础之BOM和DOM和三个小示例(计时器、搜索框、select联动)

    一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...

  5. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

  6. Dom实例：数据自增、搜索框及跑马灯

    数据自增 功能:当点击add按扭后,div标签中的数据自动+1,实现网页的动态化 <!DOCTYPE html> <html lang="en"> < ...

  7. iOS8之后搜索框的常规实例

    1.在一个二级导航控制器中添加一个UITableviewController作为子控制器 2.UITableviewController.tableView 作为展示结果 3.利用iOS之后的UISe ...

  8. ArcGIS API for javascript中搜索框的使用问题

    我们在开发中常常需要用搜索框去搜索地图上的某个数据,然后在地图上显示出来.这个时候我们要用到esri.dijit.Search().在设置里面的sources的时候,需要注意一点:必须要使用在线的fe ...

  9. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

随机推荐

  1. window 10 下解压缩版MySQL5.7.24的安装

    安装步骤: 1.下载mysql-5.6.40-winx64.zip https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.24-winx64.zip ...

  2. 【python 】装饰器 （多个参数的函数，带参数的装饰器）【转】

    最简单的模板是这样的 #-*-coding:utf-8-*- def outer(func): def inner(): print 'before' func() print 'after' # r ...

  3. Jboss:The LogManager was not properly installed (you must set the "java.util.logging.manager" system prop

    可能是jboss的服务器版本选择不对 ,比如我本地的Jboss服务器版本是  jboss-as-web-7.0.2.Final,选择的服务器版本是JBOOS  V7.1  Runtime ,就会报上面 ...

  4. 7.25 7figting！

    TEXT 82 Proton 马来西亚宝腾汽车 A fork in the road 何去何从?(陈继龙编译) Nov 30th 2006 | HONG KONG From The Economist ...

  5. OGNL概述

    -------------------siwuxie095 OGNL 概述 1.OGNL 即 Object-Graph Navigation Language,对象图导航语言, 它是一个应用于 Jav ...

  6. 外层div高度不随内层div高度改变的解决办法

    当b1和b2都是float=left时候,a1层的高度不会被b1和b2的高度撑开. <div id=“div1″> <div id=”div2″ style="float: ...

  7. SqlMapConfig.xml配置文件的配置内容

    SqlMapConfig.xml中配置的内容和顺序如下: * properties(属性) * settings(全局配置参数) * typeAliases(类型别名) * typeHandlers( ...

  8. select获取下拉框的值 下拉框默认选中

    本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值 例如:  <select class="form-control" id=" ...

  9. Excel中保留有效数字的问题

    在工作表界面中按 <alt>+<F11>,进入代码页面,然后再 WORKBOOK中插入模块,把以下代码COPY入模块中.就可以在工作表中使用 =YXSZ(数值,保留位数). 如 ...

  10. AES加解密

    AES加密类 <?php //php aes加密类 class AESMcrypt { public $iv = null; public $key = null; ; private $cip ...