一些自学htm/javascipt代码（setTimeout函数使用，背景音乐的加载）

最新推荐文章于 2021-10-24 09:39:12 发布

xiaoout

最新推荐文章于 2021-10-24 09:39:12 发布

阅读量476

点赞数

分类专栏：杂学文章标签： setTimeout函数使用 html背景音乐的加载 html

本文链接：https://blog.csdn.net/u010398265/article/details/46318513

版权

杂学专栏收录该内容

6 篇文章 0 订阅

订阅专栏

把图片路径和音乐路径改下可以看到效果。

none.jpg

seed.jpg

faya.jpg

flower.png

harvest.png

这里做的是一个模拟简易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="播种" οnclick="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>