jQuery随机选择音乐试题代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery随机选择音乐试题代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta name="renderer" content="webkit">
<!--国产浏览器高速模式-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Yao Longfei" />
<!-- 作者 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
<title>jQuery随机选择音乐试题代码</title>
<!-- 基础样式文件 开始 -->
<link href="css/sjxzst.css" rel="stylesheet" type="text/css">
<!-- 基础样式文件结束 -->
<!-- 基础JS文件 开始 -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/sjxzst.js"></script>
</head>

<body>
<center>
<input type="checkbox" name="type" value="qy" />器乐
<input type="checkbox" name="type" value="sy" />声乐
<input type="checkbox" name="type" value="sc" />试唱

<input type="button" value="出题" onclick="sjxzst()">

<!-- 随机选取试题 开始 -->
<div class="sjxzst" style="display: none;">
	<div class="sjxzst_title">
		<font>随机选择试题</font><a href="javascript:sjxzst_close()"><img src="images/sjxzst_close.png" /></a>
	</div>
	<div class="sjxzst_list" style="display: none;">
		<div class="qy">
			<p><input type="hidden" value="TEST0B001">独角戏</p>
			<p><input type="hidden" value="TEST0B002">往事随风</p>
			<p><input type="hidden" value="TEST0B003">Song From A Secret Garden</p>
			<p><input type="hidden" value="TEST0B004">如果云知道</p>
			<p><input type="hidden" value="TEST0B005">又见炊烟</p>
			<p><input type="hidden" value="TEST0B006">来生缘</p>
			<p><input type="hidden" value="TEST0B007">但愿人长久</p>
		</div>
		<div class="sy">
			<p><input type="hidden" value="TEST0B001">独角戏1</p>
			<p><input type="hidden" value="TEST0B002">往事随风1</p>
			<p><input type="hidden" value="TEST0B003">Song From A Secret Garden1</p>
			<p><input type="hidden" value="TEST0B004">如果云知道1</p>
			<p><input type="hidden" value="TEST0B005">又见炊烟1</p>
			<p><input type="hidden" value="TEST0B006">来生缘1</p>
			<p><input type="hidden" value="TEST0B007">但愿人长久1</p>
		</div>
		<div class="sc">
			<p><input type="hidden" value="TEST0B001">独角戏2</p>
			<p><input type="hidden" value="TEST0B002">往事随风2</p>
			<p><input type="hidden" value="TEST0B003">Song From A Secret Garden2</p>
			<p><input type="hidden" value="TEST0B004">如果云知道2</p>
			<p><input type="hidden" value="TEST0B005">又见炊烟2</p>
			<p><input type="hidden" value="TEST0B006">来生缘2</p>
			<p><input type="hidden" value="TEST0B007">但愿人长久2</p>
		</div>
	</div>
	<div class="sjxzst_content">
		<div class="qy">
			<img src="images/sjxzst_qy.png" />
			<input id="qy_ID" type="hidden" value="">
			<p></p>
		</div>
		<div class="sy">
			<img src="images/sjxzst_sy.png" />
			<input id="sy_ID" type="hidden" value="">
			<p></p>
		</div>
		<div class="sc">
			<img src="images/sjxzst_sc.png" />
			<input id="sc_ID" type="hidden" value="">
			<p></p>
		</div>
	</div>
	<div class="sjxzst_but">
		<input class="stop" type="button" value="停" onclick="stop_music()">
		<input class="close" type="button" value="关闭" onclick="sjxzst_close()" />
	</div>
</div>
<!-- 随机选取试题 结束 -->
</center>
</body>
</html>

JS代码(sjxzst.js):

$(document).ready(function(){
}
);
	var type_nums = 0;
	//璁板綍閫夋嫨浜嗗嚑閬撻var timer = [];
	//璁℃椂鍣?var tag = 0;
	/**闅忔満閫夊彇璇曢 - 寮€濮嬮€夋嫨**/
function sjxzst(){
	$("input:checkbox[name='type']:checked").each(function(){
	var type = $(this).val();
	$(".sjxzst_content ."+type).show();
	type_nums++;
}
);
	if(type_nums == 0){
	alert("鏈€灏戦€夋嫨涓€绉嶈€冭瘯绫诲瀷");
}
else{
	//鏀瑰彉闅忔満div鐨勫锛屽苟灞呬腑$(".sjxzst").width(200*type_nums +"px").css("margin-left",(200*type_nums)/2*(-1) + "px");
	$(".sjxzst").show();
	$("input:checkbox[name='type']:checked").each(function(){
	var type = $(this).val();
	if(type == "qy"){
	tag = 0;
	choose_music(type);
}
if(type == "sy"){
	tag = 1;
	choose_music(type);
}
if(type == "sc"){
	tag = 2;
	choose_music(type);
}
}
);
}
}
/**闅忔満閫夊彇璇曢 - 閫氳繃闅忔満鏁伴€夋嫨**/
function stop_music(){
	clearInterval(timer[0]);
	clearInterval(timer[1]);
	clearInterval(timer[2]);
}
/**闅忔満閫夊彇璇曢 - 閫氳繃闅忔満鏁伴€夋嫨**/
function choose_music(type){
	var startTime = new Date().getTime();
	var nums = $(".sjxzst_list ."+type+" p").length;
	timer[tag] = setInterval(function(){
	$(".sjxzst_content ."+type+" input").val($(".sjxzst_list ."+type).children().eq(parseInt(Math.random()*nums)).find("input").val());
	$(".sjxzst_content ."+type+" p").html($(".sjxzst_list ."+type).children().eq(parseInt(Math.random()*nums)).html());
	//if(new Date().getTime() - startTime > 5000){
	//clearInterval(timer);
	//return;
	//}
}
,100);
}
/**闅忔満閫夊彇璇曢 - 鍏抽棴**/
function sjxzst_close(){
	$("input:checkbox[name='type']").each(function(){
	var type = $(this).val();
	$(".sjxzst_content ."+type).hide();
}
);
	type_nums = 0;
	$(".sjxzst").hide();
}

CSS代码(sjxzst.css):

li,ul,img,p{list-style-type:none;margin:0px;padding:0px;border:0px;}
input{outline:none;}
.sjxzst{position:fixed;top:50%;left:50%;margin-left:-300px;margin-top:-175px;z-index:1001;width:600px;height:350px;border:1px solid #015198;border-radius:6px;background-color:#FFF;}
.sjxzst_title{width:100%;height:50px;line-height:50px;border-bottom:1px solid #0E5298;}
.sjxzst_title font{font-size:16px;margin-left:20px;float:left;}
.sjxzst_title img{width:24px;height:24px;float:right;margin-top:10px;margin-right:20px;}
.sjxzst_content{width:100%;height:248px;}
.sjxzst_content .qy,.sjxzst_content .sy,.sjxzst_content .sc{width:160px;height:170px;float:left;text-align:center;border:1px solid #0E5298;border-radius:6px;margin:38px 19px;display:none;}
.sjxzst_content img{width:120px;height:120px;}
.sjxzst_content p{height:44px;font-size:16px;font-weight:600;color:#cf8113;overflow:hidden;}
.sjxzst_list{width:100%;height:248px;}
.sjxzst_list p{font-size:16px;font-weight:600;color:#cf8113;height:38px;line-height:38px;}
.sjxzst_but{width:100%;height:50px;line-height:50px;border-top:1px solid #0E5298;text-align:center;}
.sjxzst_but .stop{width:60px;height:30px;line-height:30px;border:0px solid #0E5298;border-radius:4px;background-color:#0E5298;color:#FFF;}
.sjxzst_but .close{width:60px;height:30px;line-height:30px;border:0px solid #0E5298;border-radius:4px;background-color:#afafaf;color:#FFF;}

附件:下载该文件资源,减少时间成本(增值服务)