<!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的更多相关文章

  1. JavaScript--定时器setTimeout()、clearTimeout(var param)和setInterval()、clearInterval(var param)

    1.setTimeout().clearTimeout(var param) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,只调用一次 clearTimeout() 方法可取 ...

  2. setInterval 与 clearInterval详解

    首先注意,setInterval与clearInterval都是直属于window对象的. 1.直接调用setInterval(即不通过函数调用) <div id="oDiv_show ...

  3. JS不间断向上滚动 setInterval和clearInterval

    <div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><d ...

  4. 用javascript编写的小游戏（getElementById ， setInterval ， clearInterval ， window.onload ， innerText 和页面跳转， 标签的使用）

    (1)图片轮转 <script type="text/javascript" > ; setInterval(function(){ var dom=document. ...

  5. setInterval setTimeout clearInterval

    setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). //第一次load的时候就先刷新一次 ...

  6. (二)学习JavaScript之setInterval和clearInterval方法

    参考:http://www.w3school.com.cn/jsref/met_win_setinterval.asp HTML DOM Window 对象 定义和用法 setInterval() 方 ...

  7. js setInterval和clearInterval 的使用

    setInterval(函数名, 时间);   函数名:不需要加括号:  时间:单位是毫秒: 例子: var inter= setInterval(searchTasksByCnd, 10 * 100 ...

  8. setInterval()、clearInterval()、setTimeout()和clearTimeout()js计数器方法

    原文地址:http://caibaojian.com/setinterval-settimeout.html window.setInterval()方法 介绍 周期性地调用一个函数(function ...

  9. setInterval()与clearInterval()的用法

    setInterval() 方法可按照指定的周期来调用函数或计算表达式.  --简单地说就是过一段时间调用一次该函数 setInterval() 方法会不停地调用函数,直到 clearInterval ...

随机推荐

  1. Codeforces Round #383 (Div. 1)

    A: 题目大意:给出一个有向图(n<=100),每个点的出度都为1,求最小的t,使得任意两点x,y,如果x走t步后能到y,那么y走t步后到x. 题解: 首先每个点应该都在一个环上,否则无解. 对 ...

  2. html5 audio的暂停与播放

    在html5里,audio是新增的功能.它方便了用户. 大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频 ...

  3. Android中的多线程编程

    问题 Android的UI也是线程不安全的,如果要更新应用程序里的UI元素,必须在主线程中进行,否则就会抛异常.比如用一个Button的onClick函数去更新界面上的元素,就会得到一个CalledF ...

  4. ROS笔记——创建简单的主题发布节点和主题订阅节点

    在安装好ROS后,接着学习如何创建节点和节点之间的通信方式,以一个简单的主题发布节点和主题订阅节点说明. 节点是连接ROS网络等可执行文件,是实现某些功能的软件包,也是一个主要计算执行的进程. 一.创 ...

  5. C# 数据类型

    1.整数类型:  int    只能 存储证书,不能存储小数. 2.小数类型: doubie 机能存储整数,也能存储小数,小数点后面的额 15-16位. 3.金钱类型: decimal:用来存储金钱, ...

  6. C# 大小写转换，方便index of

    ToUpper:小写转大写ToLower:大写转小写 例: string str=120cm*150g/m2;从中取出120和150,但是又要规避大小写问题,这时候就需要将str转换为大写,然后ind ...

  7. USB协议规范学习（一）

    什么是USB OHCI规范? OHCI(Open HCI)是目前使用比较广泛的三种USB主机控制器规范之一.USB体系结构是由四个主要部分组成:客户软件/USB驱动,主机控制器驱动(HCD),主机控制 ...

  8. the king of fighter

    wim 学习部分摘自coolshell http://coolshell.cn/articles/5426.html 基本式 i → Insert 模式,按 ESC 回到 Normal 模式. x → ...

  9. 802.11MAC基础

    做无线网络测试已经大半年了,在这过程中发现<802.11权威指南>真是以本好书,在这里分享一下学习到的知识,也帮助我记忆. 1.MAC: mac(媒介访问控制层),它位于物理层之上,控制着 ...

  10. Alpha版使用说明书

     游戏规则:             玩家是黑色的小煤球哦!             通过方向键或者ASDW,来控制小球移动(上.下.左.右).             累计时间,直到碰到了红色的小球 ...