zoukankan      html  css  js  c++  java
  • JavaScript之实例

      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>定时器</title>
      <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);
          intervalId = undefined;
        }
    
      </script>
    </head>
    <body>
    
    <input type="text" id="i1">
    <input type="button" value="开始" id="start" onclick="start();">
    <input type="button" value="结束" id="end" onclick="end();">
    </body>
    </html>
    刷新时间
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>搜索框示例</title>
    
    </head>
    <body>
        <input id="d1" type="text" value="请输入关键字" onblur="blurs()" onfocus="focus()">
        
    <script>
    function focus(){
        var inputEle=document.getElementById("d1");
        if (inputEle.value==="请输入关键字"){
            inputEle.value="";
        }
    }
    
    function blurs(){
        var inputEle=document.getElementById("d1");
        var val=inputEle.value;
        if(!val.trim()){
            inputEle.value="请输入关键字";
        }
    }
    </script>
    </body>
    </html>
    搜索框
    <!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");
    
      for (var i in data) {
        var optionP = document.createElement("option");
        optionP.innerHTML = i;
        p.appendChild(optionP);
      }
      p.onchange = function () {
        var pro = (this.options[this.selectedIndex]).innerHTML;
        var citys = data[pro];
        // 清空option
        c.options.length = 0;
    
        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>
    select联动菜单
  • 相关阅读:
    .NET 图片解密为BASE64
    IIS&ASP.NET 站点IP跳转到域名
    http转https实战教程iis7.5
    接口传参几种方式
    Python3 字符串
    ASP.Net Core WebApi几种版本控制对比
    Docker 部署NetCore 接口(三)
    Docker关键概念和基本命令(二)
    Windows平台下kafka环境的搭建以及简单使用
    CentOS7 安装 Docker-CE(一)
  • 原文地址:https://www.cnblogs.com/fu-yong/p/8561752.html
Copyright © 2011-2022 走看看