JavaScript写移动端答题网页程序

最新推荐文章于 2026-03-27 02:22:02 发布

原创最新推荐文章于 2026-03-27 02:22:02 发布 · 1w 阅读

78 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JavaScript #JQuery

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用JavaScript和JQuery编写移动端答题网页的过程，从构思、代码分解到效果展示和总结。程序分为开始、答题和结束三个阶段，HTML中设置meta viewport属性，引入外部样式表和JQuery库。CSS用于样式调整，自定义JavaScript处理答题逻辑，如正确答案的高亮显示，并在答题结束后统计得分。通过细致的模块划分和问题解决，使得程序编写变得清晰易懂。

该文章已生成可运行项目，

一、构思

1.一个完整的程序分为开始，中间内容，以及结束。
2.下面的程序也是：开始页面→答题页面（题目，选项）→结束页面

二、代码分解

1.HTML页面代码
（1）定义好每个模块的div，再从大模块里面进行细分。由于适配的是移动端的，所以需要 设置meta元素的viewport属性。
（2）方便代码的简洁，引用了外部样式表。为了方便JavaScript的调用和编写，传入了一个JQuery包，能够方便的进行方法调用。其中具体的样式，自己添加一个js的包进行编写。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=375,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/css.css"/>
	</head>
	<body>
		<!--开始页面-->
		<div class="page startGame active">
			<button class="startBtn">开始答题</button>
		</div>
		
		<!--答题页面-->
		<div class="page gaming">
			<!--题目-->
			<h1 class="timu"></h1>
			<!--选项-->
			<div class="options"></div>
			
		</div>
		
		<!--结束页面-->
		<div class="page endGame">
			<h1>恭喜您获取：<span class="score">100</span>分</h1>
			<button class="reStart">重新答题</button>
		</div>
		
		<script src="js/jquery-1.11.0.js"></script>
		<script src="js/zdy.js"></script>
	</body>
</html>

2.css样式表
该样式仅做参考，具体可根据需要进行调整

*{
	margin: 0;
	padding: 0;
	/*设置不会因为内边距和 边框撑开宽度和高度*/
	box-sizing: border-box;
}

html,body{
	/*溢出隐藏*/
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: skyblue;
}
.page{
	width: 375px;
	height: 100%;
	/*三个页面都重叠到一起*/
	position: absolute;
	left: 0;
	top: 0;
	background: skyblue;
	transform: translateX(375px);
	transition: all 1s;
}

.active{
	/*!important让这个权限变高覆盖上面的，进行偏移*/
	transform: translateX(0px) !important;
}

.startGame{
	display: flex;
	justify-content: center;
	align-items: center;
}
.startBtn{
	width: 200px;
	height: 60px;
	line-height: 60px;
	font-size: 30px;
	border: none;
	background: green;
	color: #fff;
	/*阴影不进行偏移 */
	box-shadow: 0 0 30px green;
	border-radius: 10px;
}

.gaming{
	background: coral;
	padding: 40px 20px;
}
.gaming h1{
	margin: 20px 0px;
	font-size: 24px;
	color: #fff;
}
.gaming .options>div{
	margin: 10px 10px;
	padding: 5px 10px;
	color: #fff;
	border-radius: 7px;
}
/*正确显示的颜色*/
.correct{
	background: green;
}
/*错误显示的颜色*/
.error{
	background: red;
}


/*结束页面*/
.endGame{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.endGame h1{
	margin: 40px;
}
.reStart{
	width: 200px;
	height: 60px;
	line-height: 60px;
	font-size: 30px;
	border: none;
	background: green;
	color: #fff;
	/*阴影不进行偏移 */
	box-shadow: 0 0 30px green;
	border-radius: 10px;
}

3.自定义JavaScript代码
里面有较为详细的说明，可以根据具体功能，进行修改。

var tikuList = [];
var currenTimu = {};
var score = 0;
//是否还能继续选择
var isChoose = false;
//设置答题数量
var num = 10;

//ajax获取题目内容
$.get("dati.json",function(res){
	//用了jquery相当于res = JSON.parse(res.responseText)
	//自动获取响应数据以字符串形式返回，不用自己多写这一句
	console.log(res)
	//把获取到的所有数据放入数组中
	tikuList = res
})

//点击开始答题按钮切换页面
$(".startBtn").click(function(e){
	$(".gaming").addClass("active")
	$(".startGame").removeClass("active")
	//每次点击随机出个题目并显示在页面上
	randomRender()
})

function randomRender(){
	//获取题库数组中，随机出的整数(pasetInt)索引值		parseInt方法       返回由字符串转换得到的整数。
	var randomIndex = parseInt(Math.random()*tikuList.length);
	//每次拿出一个题目放到一个对象里，并把这个题目从数组中删除
	//这个题目对象是一个数组，所以写个0获取当前对象
	currentTimu = tikuList.splice(randomIndex,1)[0];
	console.log(currentTimu);
	//获取页面标签题目，并把对象字符串中的quiz（题目）设置显示在页面上
	$(".timu").html(currentTimu.quiz)
	//每次执行清空一次
	$(".options").html("");
	//遍历题目对象字符串中的选择options内容           	   内容        索引
	currentTimu.options.forEach(function(item,index){
		$(".options").append(`<div data-index="${index}">${index+1}.${item}</div>`)
	})
	
		
}

//选项的点击事件
$(".options").click(function(e){
	if(!isChoose){
		//把索引值转成数字		parseInt方法       返回由字符串转换得到的整数。
		var index = parseInt(e.target.dataset.index);
		console.log(index+1);
		//题目中的index是0开始,answer是1开始,所以要加一
		//若答案与点击按钮的索引一致
		if(currentTimu.answer==(index+1)){
			score += 10;
			//把获取的索引添加正确的背景颜色
			$("[data-index="+index+"]").addClass("correct")
		}else{
			var corectindex = currentTimu.answer-1;
			//若点击的索引不对,把正确的背景颜色和错误的背景颜色都显示出来
			$("[data-index="+corectindex+"]").addClass("correct")
			$("[data-index="+index+"]").addClass("error")
		}
		
		isChoose = true;
		
		//每点击一次,答题的数量减1
		num --;
		
		
		//延迟一秒进行切换
		setTimeout(function(){
			//答题数量结束了,切换到结束页面,否则切换到下一题
			if(num==0){
				$(".endGame").addClass("active")
				//获取得分标签,把上面累计的得分设置显示到页面上
				$(".score").html(score);
			}else{
				isChoose = false;
				randomRender()
			}
		},1000)
	}
	
})

//点击重新答题按钮后,重新刷新页面进行重新答题
$(".reStart").click(function(){
	//location.reload()	DOM方法	刷新页面
	location.reload()
})

三、效果展示

1.开始页面
点击答题按钮，开始答题
在这里插入图片描述
2.答题页面
若点击正确，背景颜色显示为绿色。
若点击错误，把对的答案显示为绿色，自己点击错误的显示为红色

3.结束页面
每次选择都会进行统计，一共十题，最后把点击对的题目进行统计，显示分数
在这里插入图片描述