计时器:

<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. Spring启动时获取自定义注解的属性值

    1.自定义注解 @Target({ElementType.TYPE, ElementType.METHOD}) @Retention(RetentionPolicy.RUNTIME) @Documen ...

  2. 创建标签的两种方法insertAdjacentHTML 和 createElement 创建标签 setAttribute 赋予标签类型 appendChild 插入标签

    1. 建立字符串和insertAdjacentHTML('beforeEnd', ) 2. 通过createElement 创建标签  setAttribute 赋予标签类型 appendChild ...

  3. 关于directshow的SmartTee

    可以通过CLSID_SmartTee创建: CComPtr<IBaseFilter> pSmartTee; // Create the Smart Tee (CLSID_SmartTee) ...

  4. 图片上传 纯js编码

    ie8测试始终不支持,非ie方法一.二都正常 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  5. Redis 基础操作

    [Redis 基础操作] 1.ECHO message. Returns message. 2.PHING Returns PONG if no argument is provided, other ...

  6. 在cmd中显示mysql -uroot-proot 不是命令

    这个代码的意思是打开mysql,用户名为root,密码也是root 解决办法:方法一:首先要进入mysql的bin目录下,再执行. 密码错了,重新输入密码,没有密码嘛

  7. static变量和static函数

    在C语言编程中,static的一个作用是信息屏蔽! 比方说,你自己定义了一个文件 -- 该文件中有一系列的函数以及变量的声明和定义! 你希望该文件中的一些函数和变量只能被该文件中的函数使用,那么,你可 ...

  8. Linux内核分析 - 网络[十四]：IP选项

    Linux内核分析 - 网络[十四]:IP选项 标签: linux内核网络structsocketdst 2012-04-25 17:14 5639人阅读 评论(1) 收藏 举报  分类: 内核协议栈 ...

  9. mybatis总结回顾

    1.mybatis的介绍 轻量级数据持久层框架,替代hibernate 2.mybatis的入门 导包-->配置文件(类名.xml.SqlMapConfig.xml) 类名.xml:放映射.sq ...

  10. code1135 选择客栈

    首先,预处理三个数组. pre[x]表示在此之前颜色为x的客栈有多少个. f[x]表示在此之前的客栈中,某个点c,c的颜色为x,并且从c点到已经读入的点之间有费用小于p的客栈,这样的c点的个数 las ...