计时器:

<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. 496. Next Greater Element I + 503. Next Greater Element II + 556. Next Greater Element III

    ▶ 给定一个数组与它的一个子列,对于数组中的一个元素,定义它右边第一个比他大的元素称为他的后继,求所给子列的后继构成的数组 ▶ 第 496 题,规定数组最后一个元素即数组最大元素的后继均为 -1 ● ...

  2. come on！

    团队选题与评审(团队作业 2) 队名 Rookie 团队成员的姓名与学号 211606377 覃一霸(队长) 211606346 张江波 211606371 刘治江 211606384 夏培华 211 ...

  3. delphi Firemonkey ListView 使用参考

    delphi Firemonkey ListView 使用参考 Tokyo版本 http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Customizin ...

  4. ORA-01157:无法标识/锁定数据文件，ORA-01110：数据文件。。。

  5. 2015年传智播客JavaEE 第168期就业班视频教程16-框架结构测试（加载全spring配置文件）+struts2属性驱动测试

    模块的规范化我们已经做完了,下面我们要做我们的功能了. 如果是模型驱动就是name="对应model的name" 如果用属性驱动的话,必须得把表现层(Action类)里面映射的用于 ...

  6. sqlserver 必须声明标量变量 "***"。

    发现在navicat premium上执行报这个异常,在sqlserver上不报,想到我之前的文章用存储过程时mysql里有个分割符,去掉“:”果然执行成功. DECLARE @countlmc IN ...

  7. Add Strings大整数加法十进制求和 & Add Binary二进制求和

    ［抄题］: 以字符串的形式给出两个非负整数 num1 和 num2,返回 num1和 num2 的和. 比如一个50位+一个100位. 给定 num1 = "123",num2 = ...

  8. windows下使用redis

    一.下载windows版本的Redis 官网只提供linux版本的下载 官网下载地址:http://redis.io/download Redis 没有官方的Windows版本,但是微软开源技术团队( ...

  9. Android Studio真机测试失败-----''No target device found"

    手机成功连接电脑,并且手机已经设置了开发者模式,但是启动真机还是失败,最后发现居然自己没有配置android sdk的环境变量,配置之后 如果还是不能启动,点击android studio上的tool ...

  10. centos中如何查看tomcat的版本

    centos中如何查看tomcat的版本 如果使用的rpm安装的tomcat,则使用如下命令查看 rpm -q tomcat 如果不是使用rpm安装的tomcat ./catalina.sh vers ...