把圖片路徑 和音樂路徑改下 可以看到效果。
這裏做的是一個模擬簡易qq農場，用到setTimeout函數來顯示動畫。
主要還是學下加載背景音樂，有很多種方法，我是這樣做的。
先用<embed>標籤 加載音樂路徑，這時候可以有個播放器放音樂了，我竟然想做背景音樂，想去掉邊框這樣好看點，那麼我就用<div style="display:none">.，這樣可以了。
那麼如果不想放想暫停，那麼調用函數function fun_start()， 通過id獲取操作信息，document.getElementById('ebd1').play(); 暫停是pause(),停止是stop()。
還有一種加載背景音樂的方式，在頁面代碼中的<head></head>之間加入<bgsound src="音樂url" loop="-1"> 這段代碼，loop的正值是循環的次數，-1是無限循環。
<html>
<head>
<title>qqDemo</title>
<meta
http-equiv = "Content-Type"
content = "text/html;
charset = GB2312"
>
<script language="javascript">
var vflag = 0 ;
function fun_changestate(btnvalue){
if(btnvalue == '播種'){
vflag = 1 ;
}
if(btnvalue == '採摘'){
vflag = 6 ;
}
if(btnvalue == '翻地'){
vflag = 9 ;
}
}
function fun_changepic(iid){
if(vflag == 1){
document.getElementById(iid).src='imags/seed.jpg';
setTimeout('fun_changebud('+iid+')',3000);
}
if(vflag == 6){
document.getElementById(iid).src='imags/harvest.png';
}
if(vflag == 9){
document.getElementById(iid).src='imags/none.jpg';
}
}
function fun_changebud(iid2){
document.getElementById(iid2).src='imags/faya.jpg';
setTimeout('fun_changeflower('+iid2+')',4000);
}
function fun_changeflower(iid3){
document.getElementById(iid3).src='imags/flower.png';
//setTimeout('fun_changebud('+iid3+')',5000);
}
function fun_start(){
document.getElementById('ebd1').play();
}
function fun_stopmic(){
document.getElementById('ebd1').pause();
}
</script>
</head>
<body>
<input type="button" name="btn1" value="播種" onclick="fun_changestate(this.value)"/>
<input type="button" name="btn2" value="採摘" onClick="fun_changestate(this.value)"/>
<input type="button" name="btn3" value="翻地" onClick="fun_changestate(this.value)"/>
<input type="button" name="btn4" value="change" onClick="fun_changepic()" >
<br><hr>
<table>
<tr>
<td>
<img id="0" src="./imags/none.jpg" onClick="fun_changepic(0)">
</td>
<td>
<img id="1" src="./imags/none.jpg" onClick="fun_changepic(1)">
</td>
<td>
<img id="2" src="./imags/none.jpg" onClick="fun_changepic(2)">
</td>
<td>
<img id="3" src="./imags/none.jpg" onClick="fun_changepic(3)">
</td>
<td>
<img id="4" src="./imags/none.jpg" onClick="fun_changepic(4)">
</td>
</tr>
<tr>
<td>
<img id="5" src="./imags/none.jpg" onClick="fun_changepic(5)">
</td>
<td>
<img id="6" src="./imags/none.jpg" onClick="fun_changepic(6)">
</td>
<td>
<img id="7" src="./imags/none.jpg" onClick="fun_changepic(7)">
</td>
<td>
<img id="8" src="./imags/none.jpg" onClick="fun_changepic(8)">
</td>
<td>
<img id="9" src="./imags/none.jpg" onClick="fun_changepic(9)">
</td>
</tr>
<tr>
<td>
<img id="10" src="./imags/none.jpg" onClick="fun_changepic(10)">
</td>
<td>
<img id="11" src="./imags/none.jpg" onClick="fun_changepic(11)">
</td>
<td>
<img id="12" src="./imags/none.jpg" onClick="fun_changepic(12)">
</td>
<td>
<img id="13" src="./imags/none.jpg" onClick="fun_changepic(13)">
</td>
<td>
<img id="14" src="./imags/none.jpg" onClick="fun_changepic(14)">
</td>
</tr>
</table>
<hr>
<span id="sp1">
<div style="display:none">
<embed id="ebd1" src="music/汪峯-北京北京.mp3" ></embed>
</div>
<a href="javascript:fun_start()">播放</a>
<a href="javascript:fun_stopmic()">暫停播放</a>
</span>
<hr>
</body>