HackMD
setInterval計時器、閃爍、跑燈效果
tags: jQuery JavaScript
jQuery與JS應用
javascript公式起手式
- $(function(){};
變數宣告
- var
常用的 - $("#id")
計時器
$(function(){
setInterval(function(){
},數字);
});
練習:製作一個2秒後會變顏色的表格
<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 -->
練習:會閃動的表格
// 自己想出來的
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>
練習:跑燈效果
// 跑燈效果
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);
});
