<!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. (C)inline关键字

      背景(C&C++中) 一.inline关键字用来定义一个类的内联函数,引入它的主要原因是用它替代C中表达式形式的宏定义. 表达式形式的宏定义一例:#define ExpressionNam ...

  2. 启动vmware中的虚拟机的时候,提示Failed to lock the file

    http://www.vixual.net/blog/archives/842 VMware Server 當掉後重新啟動 Guest OS 時,出現 cannot open the disk '*. ...

  3. web开发中的mysql使用

    一.单机mysql与mysql集群 1. 单机mysql很好理解,在一台物理机上安装好mysql服务端程序,使用这一台机器的硬件(cpu,内存,硬盘)进行数据的处理. 2.mysql集群 MySQL集 ...

  4. Digit(湘潭大学比赛)

    题目链接: 点击打开链接 中文问题目就不解释了. 思路,找到这个数对应的的数字是多少,然后对这个数取对应的位置. 步骤:先打表打出一位数字对应字符串的长度,两位数的,到8,9就差不多了. 先确定给定的 ...

  5. C#参数数组的用法1

    C# 参数数组 有时,当声明一个方法时,您不能确定要传递给函数作为参数的参数数目.C# 参数数组解决了这个问题,参数数组通常用于传递未知数量的参数给函数. params 关键字 在使用数组作为形参时, ...

  6. MFC之document与view实践总结

    Document/View是MFC的基石,负责程序数据的管理和显示,Doculent和Viewd的关系有一档一视,一档多视和多档多视,下面将分别对实现过程中的重点知识进行总结. 1. 视图的同步更新 ...

  7. bzoj4557 [JLoi2016]侦察守卫——DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4557 见这位的博客:https://www.cnblogs.com/Narh/p/91403 ...

  8. 洛谷P2473奖励关——状压DP

    题目:https://www.luogu.org/problemnew/show/P2473 还是对DP套路不熟悉... 像这种前面影响后面,而后面不影响前面的问题就应该考虑倒序递推: 看n只有15那 ...

  9. 浅谈getAttribute兼容性

    最近终于证实tag.setAttribute("style", "color:#000;");在IE7中不起作用.于是百度了一些解决办法. IE的setAttr ...

  10. HashSet重复元素判断

    HashSet不能添加重复的元素,当调用add(Object)方法时候,首先会调用Object的hashCode方法判hashCode是否已经存在,如不存在则直接插入元素:如果已存在则调用Object ...