<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, );

      }

    }

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

    for (var i=;i<citys.length;i++) {

      var option_city = document.createElement("option");

      option_city.innerHTML = citys[i];

      c.appendChild(option_city);

    }

  }

</script>

</body>

</html>

select联动菜单

 
 
 

JavaScript之实例的更多相关文章

  1. JavaScript小实例：拖拽应用（二）

    经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...

  2. javascript小实例，拖拽应用（一）

    前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...

  3. JavaScript 小实例 - 表单输入内容检测，对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

  4. 10种JavaScript特效实例让你的网站更吸引人

    我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...

  5. JavaScript图形实例：线段构图

    在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...

  6. JavaScript动画实例：李萨如曲线

    在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以 ...

  7. JavaScript动画实例：递归分形图动态展示

    在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的 ...

  8. JavaScript图形实例：再谈IFS生成图形

    在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...

  9. JavaScript图形实例：随机SierPinski三角形

    在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...

  10. JavaScript动画实例：曲线的绘制

    在“JavaScript图形实例:曲线方程”一文中,我们给出了15个曲线方程绘制图形的实例.这些曲线都是根据其曲线方程,在[0,2π]区间取一系列角度值,根据给定角度值计算对应的各点坐标,然后在计算出 ...

随机推荐

  1. HDU - 1248 寒冰王座 数学or暴力枚举

    思路: 1.暴力枚举每种面值的张数,将可以花光的钱记录下来.每次判断n是否能够用光,能则输出0,不能则向更少金额寻找是否有能够花光的.时间复杂度O(n) 2.350 = 200 + 150,买350的 ...

  2. POJ1459 - Power Network

    原题链接 题意简述 原题看了好几遍才看懂- 给出一个个点,条边的有向图.个点中有个源点,个汇点,每个源点和汇点都有流出上限和流入上限.求最大流. 题解 建一个真 · 源点和一个真 · 汇点.真 · 源 ...

  3. <CEPH中国-深圳站-技术交流会演讲PPT> YY云平台Ceph Block应用实践 & 我写的书 《CEPH实战》

    YY云平台Ceph Block应用实践 http://s3.yyclouds.com/public/YY%E4%BA%91%E5%B9%B3%E5%8F%B0Ceph%E5%AE%9E%E8%B7%B ...

  4. apue.h头文件（UNIX环境高级编程）

    在看UNIX环境高级编程是,碰到一个头文件"apue.h",搜一下别人的帖子,其实apue.h是作者自己写的一个文件,包含了常用的头文件,系统不自带.其中包含了常用的头文件,以及出 ...

  5. Struts2(五)常量的配置

    Struts2 常量大多在 默认的配置文件中已经配置好,但根据用户的需求不同,开发的要求不同,需要修改这些常量值,修改的方法就是在配置的文件对常量进行重新配置 在struts.xml 文件中使用< ...

  6. Linux集群问题~浅谈

    系统扩展的方式 # scale up 向上扩展 # scale out 向外扩展 集群类型 LB 负载均衡集群 Load Balancing HA 高可用集群 High Availability HP ...

  7. C++遍历二维数组的四种方法

    #include <iostream> using std::cin; using std::cout; using std::endl; using std::string; using ...

  8. iOS - UIImageView 动画

    1.UIImageView 动画 1.1 播放图片集 播放图片集 @property (nonatomic, strong) UIImageView *playImageView; self.play ...

  9. ASP.NET登录记住用户名

    案例如下: 1:首先在登录的控制器中定义一个全局变量 public const string LonginName = "sessName"; 2:在登陆的方法中 public A ...

  10. 生成report由Eamil定時寄出

    Blat 是一个命令行发邮件的小工具,仅支持简单的SMTP协议,需要SMTP服务器的支持. 官网:http://www.blat.net/    下载地址:https://sourceforge.ne ...