<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>自动增长计时器</title>

<script type="text/javascript">

  var atime;

  function clock(){

    var time=new Date();

    atime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();

    document.getElementById("clock").value = atime;

  }

 setInterval(clock,1000);

</script>

</head>

<body>

<form>

<input type="text" id="clock" size="50"  style="background:#000;color:#00ff00;width:55px"; />

</form>

</body>

</html>

效果：

显示当前时间，自动增长

添加按钮的计时器（用于开始和暂停）

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>计时器</title>

<script type="text/javascript">

  var num=0;

  var i;

  function startCount(){

    document.getElementById('count').value=num;

    num=num+1;

    i=setTimeout("startCount()",1000);

  }

  function stopCount(){

  clearTimeout(i);

  }

</script>

</head>

<body>

  <form>

    <input type="text" id="count" />

    <input type="button" value="Start" onclick="startCount()"/>

    <input type="button" value="Stop"  onclick="stopCount()" />

  </form>

</body>

</html>

效果：

点击开始按钮，从0计数，一秒加1。点击按钮停止，保持当前状态。

总结：

1、setInterval(代码,交互时间)；

参数：代码：可以是函数名或代码串；交互时间：设置交互时间

clearInterval（id_from_setInterval）;

参数：由setInterval() 返回的 ID 值。

2、setTimeout(代码,延迟时间);

参数：代码： 可以是函数名或代码串；延迟时间：设置延迟时间

clearTimeout（id_from_setTimeout）;

参数：由setTimeout()返回的ID值。

BOM学习-javascript计时器小结的更多相关文章

  1. 一步步学习javascript基础篇（7）：BOM和DOM

    一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...

  2. 《如何正确学习JavaScript》读后小结

    在segmentfault上读的一篇学习JavaScript路线的文章,做个小结. 一.简介.数据类型.表达式和操作符 (1)<JavaScript权威指南>前言1-2章&< ...

  3. 一步步学习javascript基础篇（0）:开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  4. 【转载】跟着9张思维导图学习JavaScript

    原文:跟着9张思维导图学习JavaScript 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 JavaScript相关的思维导图(非原创). 思维导图小ti ...

  5. 1、JavaScript 基础一 （从零学习JavaScript）

    1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...

  6. 使用Firebug或chrome-devToolBar深入学习javascript语言核心

    使用Firebug和chrome-devToolBar调试页面样式或脚本是前端开发每天必做之事.这个开发神器到底能给我们带来哪些更神奇的帮助呢?这几天看的一些资料中给了我启发,能不通过Firebug和 ...

  7. 初学者学习Javascript很吃力怎么办？到底该如何学习Js？

      Js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习Js的途径.在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条“轻松学习Js之路”. Js给人那种感觉的原因多半 ...

  8. 跟着9张思维导图学习Javascript js 关键字和保留字 css3中的BFC,IFC,GFC和FFC

    跟着9张思维导图学习Javascript   学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小ti ...

  9. 初学者学习JavaScript的实用技巧！

    Javascript是一种高级编程语言,通过解释执行.它是一门动态类型,面向对象(基于原型)的直译语言.它已经由欧洲电脑制造商协会通过ECMAScript实现语言标准化,它被世界上的绝大多数网站所使用 ...

随机推荐

  1. linux 一个超简单的makefile

    makefile 自动化变量:   $@ : 规则的目标文件名  例如:main:main.o test.o                    g++ -Wall -g  main.o test. ...

  2. JS判断按时间跳转到相应的页面

    <!--时间段跳转js--><script language="javaScript" type="text/javascript"> ...

  3. 一步一步学Silverlight 2系列（29）：使用Transform实现更炫的效果（上）

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  4. 通过Oracle sql developer从sqlserver迁移数据到oracle

    通过Oracle sql developer工具从sqlserver迁移数据到oracle 序言 一般情况下,sqlserver数据迁移到oracle,我们可以使用ODI来进行.但ODI的安装.配置. ...

  5. bzoj 2301 [HAOI2011]Problem b（莫比乌斯反演+分块优化）

    题意:对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 1≤n≤50000,1≤a≤b≤50000, ...

  6. windows下安装composer流程

    1.php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" 2. php -r &quo ...

  7. 并不对劲的bzoj4650:loj2083:uoj219:p1117:[NOI2016]优秀的拆分

    题目大意 "优秀的拆分"指将一个字符串拆分成AABB的形式 十次询问,每次给出一个字符串S(\(|S|\leq3*10^4\)),求它的所有子串的优秀的拆分的方案数之和 题解 此题 ...

  8. Linux系统之文件传输的几种方式

    Linux系统安装好以后以及能上网.能进行软件安装后,接下来可能就需要从其它机器复制一些文件或者把文件复制到其它机器,那么就涉及到文件的传输和共享,下面介绍一下常规的一些文件传输和共享方案. 1.传统 ...

  9. 一些好用的Linux命令组合

    1.删除0字节文件 代码如下: find -type f -size 0 -exec rm -rf {} \; 2.查看进程按内存从大到小排列 代码如下: ps -e -o "%C : %p ...

  10. Python学习之旅—生成器对象的send方法详解

    前言 在上一篇博客中,笔者带大家一起探讨了生成器与迭代器的本质原理和使用,本次博客将重点聚焦于生成器对象的send方法. 一.send方法详解  我们知道生成器对象本质上是一个迭代器.但是它比迭代器对 ...