BOM学习-javascript计时器小结
<!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计时器小结的更多相关文章
- 一步步学习javascript基础篇(7):BOM和DOM
一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...
- 《如何正确学习JavaScript》读后小结
在segmentfault上读的一篇学习JavaScript路线的文章,做个小结. 一.简介.数据类型.表达式和操作符 (1)<JavaScript权威指南>前言1-2章&< ...
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 【转载】跟着9张思维导图学习JavaScript
原文:跟着9张思维导图学习JavaScript 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 JavaScript相关的思维导图(非原创). 思维导图小ti ...
- 1、JavaScript 基础一 (从零学习JavaScript)
1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...
- 使用Firebug或chrome-devToolBar深入学习javascript语言核心
使用Firebug和chrome-devToolBar调试页面样式或脚本是前端开发每天必做之事.这个开发神器到底能给我们带来哪些更神奇的帮助呢?这几天看的一些资料中给了我启发,能不通过Firebug和 ...
- 初学者学习Javascript很吃力怎么办?到底该如何学习Js?
Js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习Js的途径.在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条“轻松学习Js之路”. Js给人那种感觉的原因多半 ...
- 跟着9张思维导图学习Javascript js 关键字和保留字 css3中的BFC,IFC,GFC和FFC
跟着9张思维导图学习Javascript 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小ti ...
- 初学者学习JavaScript的实用技巧!
Javascript是一种高级编程语言,通过解释执行.它是一门动态类型,面向对象(基于原型)的直译语言.它已经由欧洲电脑制造商协会通过ECMAScript实现语言标准化,它被世界上的绝大多数网站所使用 ...
随机推荐
- CoreData兼容iOS9和iOS10
由于iOS10之后CoreData Stack的更改无法在iOS9的系统中运行,所以我们需要对上一小节中封装的工具类进行系统版本的兼容 iOS9和iOS10中CoreData最本质的区别其实就是管理对 ...
- c#-关于自动属性的思考
参考:c#-关于自动属性的思考 我的理解:自动属性跟 公有字段 一模一样,编程习惯而已.目前是这么认为的. 自动属性:public string Name{ get; set } 公有字段:pub ...
- POJ-3352 Redundant Paths
In order to get from one of the F (1 <= F <= 5,000) grazing fields (which are numbered 1..F) t ...
- Apache Maven的下载、安装、测试
Apache Maven是个软件项目管理工具,基于项目对象模型(Project Object Model,POM)的概念,Maven可用来管理项目的依赖.编译.文档等信息. 使用Maven管理项目时, ...
- IOCP编程小结(中)
上一篇主要谈了一些基本理念,本篇将谈谈我个人总结的一些IOCP编程技巧. 网络游戏前端服务器的需求和设计 首先介绍一下这个服务器的技术背景.在分布式网络游戏服务器中,前端连接服务器是一种很常见的设计. ...
- 【旧文章搬运】Windows内核常见数据结构(驱动相关)
原文发表于百度空间,2008-7-24========================================================================== 这些是驱动中 ...
- Javaweb中利用kaptcha生成验证码
引入kaptcha-2.3-jdk15.jar包 在web.xml中进行配置 <servlet> <servlet-name>Kaptcha</servlet-name& ...
- Java中手动提交事务
项目中遇到一个问题,就是在程序的执行过程中需要不断地更新某个信息,但是在springmvc中好像是默认不可以的,那么就需要手动提交 // 从spring容器对象中获取DataSourceTransac ...
- Codeforces - 702A - Maximum Increase - 简单dp
DP的学习计划,刷 https://codeforces.com/problemset?order=BY_RATING_ASC&tags=dp 遇到了这道题 https://codeforce ...
- 51nod 1004 【快速幂】
思路: 掐住最后一位,快速幂一发就好了 #include<cstdio> #include <map> #include<iostream> #include< ...