setInterval和clearInterval
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#main {
width: 608px;
border: solid 1px red;
margin: auto;
} #main .block {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: solid 1px blue;
margin: 5px 25px;
float: left;
} .blue {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: solid 1px blue;
background-color: blue;
margin: 5px 25px;
color: white;
float: left;
} </style>
<script type="text/javascript" src="../../js/system.js"></script>
</head>
<body>
<div id="main">
<div class="block" id="a1">a</div>
<div class="block" id="a2">b</div>
<div class="block" id="a3">c</div>
<div class="block" id="a4">d</div>
<div class="block" id="a8">e</div>
<div class="block" id="a7">f</div>
<div class="block" id="a6">g</div>
<div class="block" id="a5">h</div>
<div style="clear: both"></div>
</div>
<input type="button" id="btnStop" value="停止">
<input type="button" id="btnBegin" value="开始">
<script type="text/javascript">
var index = 0;
var bojGame = null;
$$("btnBegin").onclick = function () {
clearInterval(bojGame);
bojGame = setInterval(function () { //按照指定的周期来调用好函数或表达式,以毫秒计算1000毫秒=1秒,,循环的
for (var i = 1; i <= 8; i++) {
var n = "a" + i;
comm.setAttr($$(n), "class", "block");
}
index++;
var n = "a" + index;
comm.setAttr($$(n), "class", "blue");
if (index >= 8) {
index = 0;
}
}, 100)
} $$("btnStop").onclick = function () {
clearInterval(bojGame); //退出循环
}
</script>
</body>
</html>
setInterval和clearInterval的更多相关文章
- JavaScript--定时器setTimeout()、clearTimeout(var param)和setInterval()、clearInterval(var param)
1.setTimeout().clearTimeout(var param) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,只调用一次 clearTimeout() 方法可取 ...
- setInterval 与 clearInterval详解
首先注意,setInterval与clearInterval都是直属于window对象的. 1.直接调用setInterval(即不通过函数调用) <div id="oDiv_show ...
- JS不间断向上滚动 setInterval和clearInterval
<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><d ...
- 用javascript编写的小游戏(getElementById , setInterval , clearInterval , window.onload , innerText 和页面跳转, 标签的使用)
(1)图片轮转 <script type="text/javascript" > ; setInterval(function(){ var dom=document. ...
- setInterval setTimeout clearInterval
setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). //第一次load的时候就先刷新一次 ...
- (二)学习JavaScript之setInterval和clearInterval方法
参考:http://www.w3school.com.cn/jsref/met_win_setinterval.asp HTML DOM Window 对象 定义和用法 setInterval() 方 ...
- js setInterval和clearInterval 的使用
setInterval(函数名, 时间); 函数名:不需要加括号: 时间:单位是毫秒: 例子: var inter= setInterval(searchTasksByCnd, 10 * 100 ...
- setInterval()、clearInterval()、setTimeout()和clearTimeout()js计数器方法
原文地址:http://caibaojian.com/setinterval-settimeout.html window.setInterval()方法 介绍 周期性地调用一个函数(function ...
- setInterval()与clearInterval()的用法
setInterval() 方法可按照指定的周期来调用函数或计算表达式. --简单地说就是过一段时间调用一次该函数 setInterval() 方法会不停地调用函数,直到 clearInterval ...
随机推荐
- Android中View的事件分发机制
简介 事件也称MotionEvent,事件分发机制就是对MotionEvent事件的分发过程,即当一个MotionEvent发生之后,系统需要把这个事件传递给一个具体的View. 点击事件的分发过程由 ...
- 1、WIN2D学习记录(win2d实现JS雨天效果)
一.Win2D Win2D是微软开源的项目 它的github地址是 https://github.com/Microsoft/Win2D 里面有详细的文档 http://microsoft.githu ...
- RASPBERRY PI 外设学习资源
参考: http://www.siongboon.com/projects/2013-07-08_raspberry_pi/index.html Raspberry Pi Get st ...
- CFD计算
47 求解器为flunet5/6在设置边界条件时,specify boundary types下的types中有三项关于interior,interface,internal设置,在什么情况下设置相应 ...
- Win Form程序线程点点
消息循环 Win32窗体程序基于消息驱动的,程序的模型就是一个用户触发事件消息->系统分发事件消息->程序处理事件的循环过程. .NET Win Form程序对消息循环进行了封装,可以看到 ...
- windows 开机启动 CassiniDev(IIS替代软件)
CassiniDev(IIS替代软件) 使用asp.net的时候,要部署一个iis,或者部署iis express,有时候你嫌麻烦, 这是一个替代品. 功能完全的. 下载地址:http://cassi ...
- 安全协议系列(五)---- IKE 与 IPSec(上)
IKE/IPSec 属于网络层安全协议,保护 IP 及上层的协议安全.自上个世纪末面世以来,关于这两个协议的研究.应用,已经非常成熟.协议本身,也在不断地进化.仅以 IKE 为例,其对应的 RFC 编 ...
- 2016 - 3 - 12 SQLite的学习之SQL语言入门
1.SQL语句的特点: 1.1 不区分大小写 1.2 每条语句以;结尾 2.SQL语句中常用关键字: select,insert,update,from,create,where,desc,order ...
- 入住cnblogs第一篇随笔 Hello, world!
在网上搜索计算机参考资料时经常看到各位大神的博客,甚是神往.今天我也在这里安家,记录自己的学习过程,也同各位共勉. 第一篇随笔,就用来测试一下这里的文本编辑器吧. //The C language # ...
- 使用Excel 2007绘制甘特图
本文将教大家如何使用Excel 2007制作甘特图.Excel并未提供甘特图类型,但还是可以绘制甘特图的,方法就是通过对堆积条形图类型进行自定义,使之显示任务.任务工期和层次结构. 下面的过程可帮助创 ...