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 ...
随机推荐
- Listview中显示不同的视图布局
import java.util.ArrayList; import android.app.Activity;import android.content.Context;import androi ...
- Fair Scheduler中的Delay Schedule分析
延迟调度的主要目的是提高数据本地性(data locality),减少数据在网络中的传输.对于那些输入数据不在本地的MapTask,调度器将会延迟调度他们,而把slot分配给那些具备本地性的MapTa ...
- python网络编程【一】
TCP/IP 是标准的协议,它可以使用世界范围内的计算机通过Internet或本地的网络通信 1.编写一个TCP客户端程序 #!/usr/bin/env python import socket, s ...
- ng-Enter指令
app.directive('ngEnter', function() { return function(scope, element, attrs) { element.bind("ke ...
- linux输出 /dev/null
在学习Linux的过程中,常会看到一些终端命令或者程序中有">/dev/null 2>&1 "出现,由于已经遇到了好几次了,为了理解清楚,不妨花点时间百度或者g ...
- tail 显示文件最后若干行内容
功能:tail命令可以输出文件的尾部内容,默认情况下它显示文件的最后十行.显示每个指定文件的最后10 行到标准输出.若指定了多于一个文件,程序会在每段输出的开始添加相应文件名作为头.如果不指定文件或文 ...
- Http的Get/Post请求区别
1.HTTP请求格式: <request line> <headers> <blank line> [<request-body>] 在HTTP请求中, ...
- android 代码优化
http://android.tgbus.com/Android/androidnews/200812/172247.shtml http://blog.163.com/jzq_520/blog/st ...
- dedecms购物车商品添加删除数量改变方式变成ajax
简单的做了一下修改,模板用的它默认的模板,感觉之前全是表单提交很不爽用的 修改的相关文件:/plus/posttocar.php, /plus/car.php,/templets/plus/car.h ...
- DOM扩展之 专有扩展
11.4.3 contains() 方法 用来确定某个节点是不是另一个节点的后代. 注:a.contains(a) 也是返回true.说明contains方法搜索是从自身开始的. DOM Level ...