Learn Javascript
相關語法和函數

大綱和目的

主要是介紹甚麼是變數範圍(當然就是會牽扯到函數)還有簡單的陣列,但是運用到DOM相關的元素存取、事件。

節省時間

陣列

❌

x[1]=3 //🏷

⭕

x=[] //var x=[]
x[1]=3

每隔幾秒執行某個函數:setInterval()

var ahandle = setInterval( () => console.log("Hello!") , 1000);
clearInterval(ahandle); //🏷

開發順序

基本1

每隔一段時間顯示圖:

原始碼(ex_punk.html) 
<html>

<head>
<style>
img{
  width:50px;
  height:50px;
  background-color:black;
}
</style>
<script>
 
 var headImgs=[];
 headImgs[0]="black.png";
 headImgs[1]="smile.png";
 function changeImg(){
   if(Math.random()>0.5)
     img1.src=headImgs[0];
   else
     img1.src=headImgs[1];
      
 }

 setInterval(changeImg,100)
</script>
</head>
<body>
<img id="img1">
</body>

</html>

測試2

手動開始,手動結束

原始碼(ex_punk1a.html) 
<html>

<head>
<style>
img{
  width:50px;
  height:50px;
  background-color:black;
}
</style>
<script>
 
 var headImgs=[];
 headImgs[0]="black.png";
 headImgs[1]="smile.png";
 function changeImg(){
   if(Math.random()>0.5)
     img1.src=headImgs[0];
   else
     img1.src=headImgs[1];
      
 }
var id;
function game(){
 id=setInterval(changeImg,800)
 }
 function over(){
  clearInterval(id)
 }
</script>
</head>
<body>
<img id="img1">
<input type="button" onclick="game()" value="game">
<input type="button" onclick="over()" value="over">
</body>

</html>

測試3

手動開始,一段時間後自動結束

原始碼(ex_punk1b.html) 
<html>

<head>
<style>
img{
  width:50px;
  height:50px;
  background-color:black;
}
</style>
<script>
 
 var headImgs=[];
 headImgs[0]="black.png";
 headImgs[1]="smile.png";
 function changeImg(){
   if(Math.random()>0.5)
     img1.src=headImgs[0];
   else
     img1.src=headImgs[1];
      
 }
var id;
var total;
var hnum;
 function hitCount(e){
   total=total+1;
   if (e.src.indexOf(headImgs[1])>=0){ //e.src=="smile.png"
     hnum=hnum+1;//hnum++;
   } 
 }
function over(){
  clearInterval(id)  
  alert(hnum/total)//寫到其他地方?
  
} 
function game(){
 total=0;
hnum=0; 
 id=setTimeout(over,2000)
 id=setInterval(changeImg,400)
 }
 
</script>
</head>
<body>
<img id="img1" onclick="hitCount(this)">
<input type="button" onclick="game()" value="game">

</body>

</html>

測試4

解決上面的問題:

利用CSS解決是否擊中
原始碼(ex_punk1c.html) 
<html>

<head>
<style>
img.hit{
 background-color:red;
 border:red 5px solid;
}
img{
  width:50px;
  height:50px;
  background-color:black;
}
</style>
<script>
 
 var headImgs=[];
 headImgs[0]="black.png";
 headImgs[1]="smile.png";
 function changeImg(){
   if(Math.random()>0.5)
     img1.src=headImgs[0];
   else
     img1.src=headImgs[1];
   img1.className=""; 
 }
var id;
var total;
var hnum;
 function hitCount(e){
   total=total+1;
   if (e.src.indexOf(headImgs[1])>=0){
      hnum=hnum+1;//hnum++;
	  e.className="hit"; //加邊框
	  //e.classList.toggle("hit");
   }else
   e.className="";   //清除邊框
 }
 
function over(){
  clearInterval(id)  
  report.innerHTML="total hit" +total + "; hit on smile: "+hnum;
  
} 
function game(){
 total=0;
hnum=0; 
 id=setTimeout(over,4000)
 id=setInterval(changeImg,400)
 }
 
</script>
</head>
設定時間內,打擊笑臉次數<br>

<body>
<img id="img1" onclick="hitCount(this)">
<input type="button" onclick="game()" value="game">
<textarea" id="report"></textarea">
</body>

</html>

測試5

多個笑臉的測試

原始碼(ex_punk2a.html) 
<html>

<head>
<style>
img{
  width:50px;
  height:50px;
  background-color:black;
}
</style>
<script>
 
 var headImgs=[];
 headImgs[0]="black.png";
 headImgs[1]="smile.png";
 var newIdx;
 function changeImg(){
   function imgIdx(){//產生隨機image tag 的號碼
     return Math.trunc(Math.random()*document.images.length)
   }
   
 
   newIdx=imgIdx();   
  // console.log(newIdx)   ;
   if(Math.random()>0.5)
     document.images[newIdx].src=headImgs[0];
   else
     document.images[newIdx].src=headImgs[1];
     
 }

 setInterval(changeImg,500)
</script>
</head>
<body>
<img id="img1"><img>
<br>
<p>問題:這裡會同時出現兩個笑臉</p>
<p>提出解決辦法:</p>
</body>

</html>

測試6

把前一次的號碼,設定為不出現(黑色)。 新號碼設定為出現。
原始碼(ex_punk2b.html) 
<html>

<head>
<style>
img{
  width:50px;
  height:50px;
  background-color:black;
}
</style>
<script>
 
 var headImgs=[];
 headImgs[0]="black.png";
 headImgs[1]="smile.png";
 var oldIdx,newIdx;
 function changeImg(){
   function imgIdx(){//產生隨機image tag 的號碼
     return Math.trunc(Math.random()*document.images.length)
   }
   //2個中只要出現一個笑臉;沒有這行,會同時出現笑臉
   if (oldIdx!=undefined)
      document.images[oldIdx].src=headImgs[0];
   newIdx=imgIdx();   
  // console.log(newIdx)   ;
   if(Math.random()>0.5)
     document.images[newIdx].src=headImgs[0];
   else
     document.images[newIdx].src=headImgs[1];
   oldIdx=newIdx;      
 }

 setInterval(changeImg,500)
</script>
</head>
<body>
<img id="img1"><img>
</body>

</html>

版本1

手動開始,一段時間後自動結束

原始碼(ex_punk3.html) 
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style>
img.hit{
 background-color:red;
 border:red 5px solid;
}

img{
  width:50px;
  height:50px;
  background-color:black;
  border:white 5px solid;
}
div {
 border:1px solid green;
 width: 300px;
}
</style>
<script>
 
 var headImgs=[];
 headImgs[0]="black.png";
 headImgs[1]="smile.png";
 var oldIdx=0;
 
 function changeImg(){
   function imgIdx(){
     return Math.trunc(Math.random()*document.images.length)
   }
   var newIdx;
    
   //which smile   
   newIdx=imgIdx();   
   document.images[newIdx].src=headImgs[1];
   //reset
   document.images[oldIdx].src=headImgs[0];   
   document.images[oldIdx].className="";
   
   
   oldIdx=newIdx;
 }
 function hitCount(e){
   if (e.src.indexOf(headImgs[1])>=0){
     rst.value=parseFloat(rst.value)+1 ;
	 e.className="hit";
   }else
   e.className="";   
 }

 setInterval(changeImg,800)
 
</script>
</head>
<body>
<img onclick="hitCount(this);">
<img onclick="hitCount(this);">
<img onclick="hitCount(this);">
<img onclick="hitCount(this);">
<img onclick="hitCount(this);">
<img onclick="hitCount(this);">

<hr>
<input type="textarea" value="0" id="rst">
<div class="hint">
<ul>問題列表
<li> 結束遊戲
<li> 調整遊戲速度</li>
<li> 擊中率</li>
</ul>
</div>
</body>

</html>