# setInterval計時器、閃爍、跑燈效果
###### tags: `jQuery` `JavaScript`
### jQuery與JS應用
:::info
**javascript公式起手式**
* $(function(){};
**變數宣告**
* var
**常用的**
* $("#id")
:::
### 計時器
:::success
$(function(){
setInterval(function(){
},數字);
});
:::
練習:製作一個2秒後會變顏色的表格
```htmlmixed=
<script>
$(function(){
setInterval(function(){
$("#led01").css("background-color","red");
$("#led02").css("background-color","red");
$("#led03").css("background-color","blue");
},2000);
});
</script>
</head>
<body>
<!-- HOME star -->
<div data-role="page" id="HOME">
<div data-role="header" data-theme="b">
<h1>表格</h1>
</div>
<!-- CONTENT stat -->
<div role="main" class="ui-content">
<div class="ui-grid-c">
<div class="ui-block-a block01" id="led01"><a href="#"></a></div>
<div class="ui-block-b block02" id="led02"><a href="#"></a></div>
<div class="ui-block-c block03" id="led03"><a href="#"></a></div>
<div class="ui-block-d block04"><a href="#"></a></div>
</div>
</div><!-- CONTENT end -->
```
練習:會閃動的表格
```javascript=
// 自己想出來的
var led01 = true;
if ("#led01"){
setInterval(function(){
$("#led01").css("background-color","red");
},500);
};
if ("#led01"){
setInterval(function(){
$("#led01").css("background-color","blue");
},1000);
};
// 老師的解法
var led002 = true;
$(function(){
setInterval(function(){
if (led002 == false){
$("#led02").css("background-color","orange");
led002 = true;
}else {
$("#led02").css("background-color","green");
led002 = false;
}
},500);
});
<body>
<!-- HOME star -->
<div data-role="page" id="HOME">
<div data-role="header" data-theme="b">
<h1>表格</h1>
</div>
<!-- CONTENT stat -->
<div role="main" class="ui-content">
<div class="ui-grid-c">
<div class="ui-block-a block01" id="led01"><a href="#"></a></div>
<div class="ui-block-b block02" id="led02"><a href="#"></a></div>
<div class="ui-block-c block03" id="led03"><a href="#"></a></div>
<div class="ui-block-d block04"><a href="#"></a></div>
</div>
</div><!-- CONTENT end -->
<div data-role="footer" data-theme="b" data-position="fixed">
<h6>footer</h6>
</div>
</div><!-- HOME end -->
</body>
```
練習:跑燈效果
```javascript=
// 跑燈效果
var led003 = 1;
$(function(){
setInterval(function(){
if(led003 == 1){
$("#led05").css("background-color","#0F95AD");
$("#led06").css("background-color","gray");
$("#led07").css("background-color","gray");
$("#led08").css("background-color","gray");
led003 = 2;
}else if(led003 == 2){
$("#led05").css("background-color","gray");
$("#led06").css("background-color","#0F95AD");
$("#led07").css("background-color","gray");
$("#led08").css("background-color","gray");
led003 = 3;
}else if(led003 == 3){
$("#led05").css("background-color","gray");
$("#led06").css("background-color","gray");
$("#led07").css("background-color","#0F95AD");
$("#led08").css("background-color","gray");
led003 = 4;
}else if(led003 == 4){
$("#led05").css("background-color","gray");
$("#led06").css("background-color","gray");
$("#led07").css("background-color","gray");
$("#led08").css("background-color","#0F95AD");
led003 = 1;
}
},240);
});
```
Sign in with Wallet
Connect another wallet