计时器:

<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. "sc.exe create/delete" - Create or Delete Services

    "sc.exe" can also be used to create and delete services. If you want to create a new servi ...

  2. eShopOnContainer 第一步

    运行结果截图: 操作流程: 1. git上clone 项目 windows版的docker并且安装成功,配置3核CPU,4G内存 vs 2017 (15.5)版本以上. 打开项目 eshopOnCon ...

  3. Html生成控件

    HtmlHelper:获取或设置 System.Web.Mvc.HtmlHelper 对象,该对象用于呈现 HTML 元素. 以下是Html的写法与生成的结果的对比 @Html.Label(" ...

  4. python's decorator&wrapper

    [python's decorator&wrapper] decorator A function returning another function, usually applied as ...

  5. shared_ptr&scoped_ptr&weak_ptr

    [RAII - Resource Acquisition Is Initialization] 获得一个资源的时候,不管这个资源是对象.内存.文件句柄或者其它什么,你都要在一个对象的构造函数中获得它, ...

  6. java.io.FileNotFoundException(系统找不到指定的路径。)

    报错:java.io.FileNotFoundException(系统找不到指定的路径.) 解决方法: 1.检查文件路径是否正确 2.另外,使用OutputStream时,如果文件不存在,会自动创建文 ...

  7. C语言压缩/解压缩

    一.简介 Lzlib 压缩库提供了在内存中的 LZMA 压缩和解压算法功能,包括对数据进行完整性检查.压缩格式是 lzip 参考: http://blog.csdn.net/damenhanter/a ...

  8. msdn 硬盘

    https://msdn.microsoft.com/library/windows/hardware/ff566204 Returns the ATA-2 identify data, the Se ...

  9. winnfsd 操作

    # 查看服务端输出了哪些目录,如何挂载 vagrant@homestead:~$ showmount -e 192.168.10.1 Export list for 192.168.10.1: /C/ ...

  10. 使用vim鼠标右键无法粘贴问题解决

    问题: Debian中通过终端使用vim,无法通过鼠标粘贴.这是由于一项默认的鼠标配置导致. 解决方法: vi /usr/share/vim/vim80/defaults.vim 查找set mous ...