Javascript实例 -- 计时器, 搜索框,selected联动

计时器:

<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>

 

posted @ 2019-02-14 17:09  robertx  阅读(200)  评论(0)  编辑  收藏  举报