<!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. Linux Mint 17使用小结

    用过蛮多的linux系统 linux mint是我比较喜欢和常用的一个系统,装的是linux mint xfce 64位版本,在这里记录使用中遇到的一些问题及解决的方法,备忘,方便以后查看. 1.首先 ...

  2. 悟javascript ---------------20160705

    1. 首先观察页面需求 如果js要书写多个,那么一定用到循环  或者加上if判断  或者用到switch switch (表达式){ case 值1 : 语句1 break; case 值2 : 语句 ...

  3. MS SQL提示列名 'Y' 无效的原因及解决办法

    在作项目写MS SQL 存储过程时,需拼接SQL语句字符串,其中有单字符变量,如下图: 如上图执行存储过程是提示“列名‘Y’无效”.经反复测试,原因在用单字符变量连接SQL字符串是必须在引用变量前后各 ...

  4. android工程中menu的使用总结

    android的Menu使用 转自:thinkYeah的博客 1.普通的Menu 先来看看最简单的Menu怎样实现. 在主Activity中覆盖onCreateOptionsMenu(Menu men ...

  5. MVC 实体字段自定义验证

    [Remote("ActionName", "ControllerName", AdditionalFields = "ID", Error ...

  6. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  7. 云计算 云服务 hadoop

    云:是一种虚拟化的技术,重在资源管理. 云服务是云计算的一种商业模式,有三个层次: Iaas:场外服务器,存储和网络硬件:节省了维护成本和办公场地,公司可以在任何时候利用这些硬件来运行其应用 Paas ...

  8. 用DropBox分享Unity3D的Web应用

    用U3D做好游戏好想分享给亲朋好友体验怎么办?导出exe,apk都可以,只是下载始终是个门槛. 幸好还可以导出web版(虽然要安装unity3d的插件),但自己没有服务器怎么办,没关系~,现 在是云时 ...

  9. java.sql.SQLException: Incorrect string value:

    安装好MySQL一定先改字符集 如果没有,改完字符集之后,要把之前数据库重新创建一下.

  10. ray与triangle/quad求交二三事

    引擎中,ray与quad求交,算法未细看,但有求解二次方程,不解.ray与triangle求交,使用的是97年经典算法,仔细看过论文,多谢小武同学指点,用到了克拉默法则求解线性方程组.想模仿该方法,做 ...