<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. 【Learning】 动态树分治

    简介 动态树分治整体上由点分治发展而来. 点分治是统计树上路径,而动态树分治用来统计与点有关的树上路径,比如多次询问某一些点到询问点的距离和. 前置知识就是点分治. 做法 众所周知,点分树(点分治中重 ...

  2. tox环境安装

    ubuntu 下安装tox环境 1.apt-get install pip 2.pip install tox 3.git git clone https://github.com/openstack ...

  3. c# 委托（Func、Action）

    以前自己写委托都用 delegate, 最近看组里的大佬们都用 Func , 以及 Action 来实现, 代码简洁了不少, 但是看得我晕晕乎乎. 花点时间研究一下,记录一下,以便后期的查阅. 1.F ...

  4. swap分区的扩展

    Linux中Swap(即:交换分区),类似于Windows的虚拟内存,就是当内存不足的时候,把一部分硬盘空间虚拟成内存使用,从而解决内存容量不足的情况.swap分区在非高内存的服务器上必不可少,但是s ...

  5. 获得某个月的天数（java, mysql, oracle）

    java方式: Calendar   cal   =   Calendar.getInstance(); cal.set(Calendar.YEAR,year); cal.set(Calendar.M ...

  6. openstack-ocata-镜像服务3

    一. 镜像服务概述 镜像服务(glance)使用户能够发现.登记,并检索虚拟机镜像.它提供了一个REST API,使您可以查询虚拟机镜像元数据和检索一个实际的形象.可以存储虚拟机镜像通过镜像服务在不同 ...

  7. redis内存数据库C客户端hiredis API 中文说明

    A)编译安装 make make install (/usr/local) make install PREFIX=$HOME/progs(可以自由指定安装路径) B)同步的API接口 redisCo ...

  8. NLP+VS︱深度学习数据集标注工具、方法摘录，欢迎补充~~

    ~~因为不太会使用opencv.matlab工具,所以在找一些比较简单的工具. . . 一.NLP标注工具BRAT BRAT是一个基于web的文本标注工具,主要用于对文本的结构化标注,用BRAT生成的 ...

  9. 1.1 PCI总线的组成结构

    如上文所述,PCI总线作为处理器系统的局部总线,是处理器系统的一个组成部件,讲述PCI总线的组成结构不能离开处理器系统这个大环境.在一个处理器系统中,与PCI总线相关的模块如图1?1所示. 如图1?1 ...

  10. linux 时间和日期的设置

    Linux机器上的时间比较复杂,有各式各样的时钟和选项等等.机器里有两个时钟,硬件时钟从根本上讲是CMOS时钟,而系统时钟是由内核维护的. 1. 修改硬件时钟 (1)更新机器的硬件时间.命令为:hwc ...