javaScript-practice2019-0603

Posted 2021-12-18 chengxiaofeng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript-practice2019-0603相关的知识，希望对你有一定的参考价值。

1.搜索框示例

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <!--onfocus        元素获得焦点。               // 练习：输入框-->
    <!--onblur         元素失去焦点。 -->
    <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">
<script>
function focus()
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="请输入关键字")
        inputEle.value="";
    


function blur()
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim())            //去掉元素两端的空格
        inputEle.value="请输入关键字";
    

</script>
</body>
</html>

View Code

2. 城市联动

技术图片

1.定义data数据
2.通过ID获取标签
3.定义onchange()函数，先获取省名，再得到市名

<!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");  //1.通过ID获取标签
    var c = document.getElementById("city");
  
  for (var i in data) 
    var optionP = document.createElement("option");     //a 创建节点，通过标签名创建节点
    optionP.innerHTML = i;      //b XX.innerHTML 获取文本节点的值：
    p.appendChild(optionP);     //c 将optionP的值追加一个子节点（作为最后的子节点）
  

  p.onchange = function () 
    var pro = (this.options[this.selectedIndex]).innerHTML; //a 选择不同的省份
    var citys = data[pro];                  //b  通过省份，获取市名
    c.innerHTML = "";               //c 清空option，下面的for循环添加城市内容

    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>

View Code

以上是关于javaScript-practice2019-0603的主要内容，如果未能解决你的问题，请参考以下文章

intel

bat 命令屏幕截图并保存至sql数据库

intel2018编译器安装