H5 页面开发答题【源码分享】

HTML页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="1.css" />
		<meta name="viewport" content="width=device-width"/>
	</head>
	<body onload="pd()">
		<div class="pg3" id="pg3">
			<!-- 按钮 -->
			<div class="an">
				<a href="index.html">
					<img src="img/fhsy.png" />
				</a>
			</div>
			<!--音乐  -->
			<div class="yy">
				<img src="img/music.png" onclick="bftz()" id="tp" />
			</div>
			<!-- 音频 -->
			<div class="yp">
				<audio src="img/h5.mp3" controls="controls" id="mp" loop="loop"></audio>
			</div>
			<!-- 正确 -->
			<div class="zq" onclick="dkzq()">
				zq
			</div>
			<!-- 错误 -->
			<div class="cw" onclick="dkcw()">
				cw
			</div>
			<!-- 正确页面 -->
			<div class="zqym" id="zqym">
				<div class="jg" >
					<img src="img/cscg.png">
				</div>
				<div class="gb" onclick="gbym()">
					<img src="img/fhsy.png">
				</div>
			</div>
			
			<!-- 错误页面 -->
		     <div class="cwym" id="cwym">
			<div class="jg" >
				<img src="img/cssb.png">
			</div>
			<div class="gb" onclick="gbym()">
				<img src="img/zsyc.png">
			</div>
		</div>
			<!-- 答题区域 -->
			<div class="dtqy">
				<!-- 上联 -->
				<ul class="sj">
					<li><p id="sj1">窗前明月光</p></li>
					<li><p id="sj2">鱼戏莲叶东</p></li>
					<li><p id="sj3">白毛浮绿水</p></li>
					<li><p id="sj4">春眠不觉晓</p></li>
					<li><p id="sj5">小娃撑小艇</p></li>
					
				</ul>
				<!-- 下联 -->
				<ul class="xj">
					<li><p id="xj1" class="xj1">1</p></li>
					<li><p id="xj2" class="xj2"></p></li>
					<li><p id="xj3" class="xj3"> </p></li>
					<li><p id="xj4" class="xj4"> </p></li>
					<li><p id="xj5" class="xj5"> </p></li>
					
				</ul>
			</div>
		    <!-- 说明区域 -->	
			<p class="wz">点击下方诗词，到对应位置</p>
			<!-- 答案区域 -->
			<div class="daqy">
				<ul class="da">
					
					<li><p id="da1" >鱼戏莲叶西</p></li>
					<li><p id="da2" >红掌拨清波</p></li>
					<li><p id="da3" >疑是地上霜</p></li>
					<li><p id="da4" >处处闻蹄鸟</p></li>
					<li><p id="da5" >偷采白莲回</p></li>
				</ul>
			</div>
			
		</div>
		<script src="1.js"></script>
	</body>
</html>

CSS样式

html{
	width: 100%;
	height: 100%;
}
body{
	background-color: bisque;
	font-size: 20px;
	width: 100%;
	height: 100%;
	margin: 0px;
}
*{
	box-sizing: border-box; /*盒子模型*/
}
img,audio{
	width: 100%;
	border-radius: 50px;
}

[class *="pg"]{
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	margin: auto;
	position: relative;
}
.pg1{
	
	background-image: url("img/bg1.png");
	
}
.pg2{
	
	background-image: url("img/bg2.png");
	display: none;
	
}
.pg3{
	
	background-image: url("img/bg3.png");
	
}
.jd{
	
	position: absolute;
	top: 30%;
	left:45%;	
}
.pg2 .an{
	width: 40%;
	position: absolute;
	top:70%;
	left:30%;	
	
}
.pg3 .an{
	width: 40%;
	position: absolute;
	top:90%;
	left:30%;
}
.yy{
	width: 10%;
	position: absolute;
	top:2%;
	right:5%;	
	
}
.zq,.cw{
	background-image: url("img/bj.png");
	background-size: 100% 100%;
	width: 50%;	
	position: absolute;	
	left:25%;
	border-radius: 50px;
	text-align: center;
}
.zq{
	top:0%;
}
.cw{
	top: 5%;
}
.yp{
	width: 50%;
	position: absolute;
	top:10%;
	right:25%;
	display: none;
}
.yy img{
	animation: xz 1s infinite linear;
}
@keyframes xz{
	from{}
	to{transform: rotate(360deg);}
}
.dtqy{
	border:chocolate 2px solid;
	width: 80%;
	position: absolute;
	top:15%;
	right:10%;
}
.daqy{
	border:chocolate 2px solid;
	width: 80%;
	position: absolute;
	top:60%;
	right:10%;
}
ul{
	padding: 0px;
	margin: 0px;
	width: 100%;
}
li{
	list-style-type: none;
	padding: 0px 15px;
	width: 20%;
	float: left;
}
.xj p{
	height: 100px;
	
}
ul li p{
	background-image: url("img/bj.png");
	background-size: 100% 100%;
	text-align: center;
	border-radius: 20px;
	margin: 3px;
	font-size: 15px;
}
.wz{
	font-size: 15px;
	width: 80%;
	position: absolute;
	top:53%;
	left: 10%;
}
.xj1,.xj2,.xj3,.xj4,.xj5{
	animation: sf 1s infinite;
}

.xj2,.xj3,.xj4,.xj5{
	animation-play-state: paused;
}
@keyframes sf{
	from{}
	to{transform: scale(1.05,1.05);}
}

.jg{
	width: 60%;
	position: absolute;
	top:20%;
	left: 20%;
}
.gb{
	width:50%;
	position: absolute;
	top:42%;
	left: 25%;
}
.zqym,.cwym{
	background-color: rgba(1,0,1,.1);
	/* opacity: 0.4; */
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: 1;
	display: none;
}

@media  (min-width:500px) {
	[class *="pg"]{
		width: 350px;
		height: 600px;
	}
}

JS文件

console.log(1);
function jdt(){
	var jd = document.getElementById("jd");
	var pg1 = document.getElementById("pg1");
	var pg2 = document.getElementById("pg2");
	var i = 0;
	var ds = setInterval(lj,10);
	
	function lj(){
		if(i >= 100)
		{
			clearInterval(ds);
			pg1.style.display="none";
			pg2.style.display="block";
		}
		else
		{
			i++;
		    jd.innerHTML = i;
		}
		
	}
	
}

function bftz(){
	var tp = document.getElementById("tp");
	var mp = document.getElementById("mp");
	if(tp.style.animationPlayState.match("running"))
	{
		tp.style.animationPlayState="paused";
		tp.src = "img/music1.png";
		mp.pause();
	}
	else
	{
		tp.style.animationPlayState="running";
		tp.src = "img/music.png";
		mp.play();
	}
	
	
}
var zqym = document.getElementById("zqym");
var cwym = document.getElementById("cwym");

var da1 = document.getElementById("da1");
var da2 = document.getElementById("da2");
var da3 = document.getElementById("da3");
var da4 = document.getElementById("da4");
var da5 = document.getElementById("da5");

var xj1 = document.getElementById("xj1");
var xj2 = document.getElementById("xj2");
var xj3 = document.getElementById("xj3");
var xj4 = document.getElementById("xj4");
var xj5 = document.getElementById("xj5");

function dkzq(){
	console.log(11);
	zqym.style.display = "block";
    cwym.style.display = "none";
	}
function dkcw(){
	console.log(11);
	zqym.style.display = "none";
	cwym.style.display = "block";
	}
function gbym(){
	console.log(12);
	zqym.style.display = "none";
	cwym.style.display = "none";
	}
	
	
function pd(){
	console.log(30)
}
function dj1(){
	console.log(31);
	xj2.innerHTML = da1.innerHTML;
}
function dj2(){
	console.log(32);
	xj3.innerHTML = da2.innerHTML;
}
function dj3(){
	console.log(33);
	xj1.innerHTML = da3.innerHTML;
}
function dj4(){
	console.log(34);
	xj4.innerHTML = da3.innerHTML;
}
function dj5(){
	console.log(35);
	xj5.innerHTML = da5.innerHTML;
}

da3.addEventListener("click",function(){
      	console.log("出来啦！！不要点了");
		if(xj1.innerHTML.match("1")){
			xj1.innerHTML = da3.innerHTML;
			xj1.style.animationPlayState = "paused";
			xj2.style.animationPlayState = "running";
		}else{
			cwym.style.display = "block";
		}
}
);

da1.addEventListener("click",function(){
      	console.log("出来啦！！不要点了");
		if(xj2.style.animationPlayState.match("running"))
		{
			xj2.innerHTML = da1.innerHTML;
			xj2.style.animationPlayState = "paused";
			xj3.style.animationPlayState = "running";
		}else{
			cwym.style.display = "block";
		}
}
);

da2.addEventListener("click",function(){
      	console.log("出来啦！！不要点了");
		if(xj3.style.animationPlayState.match("running")){
			xj3.innerHTML = da2.innerHTML;
			xj3.style.animationPlayState = "paused";
			xj4.style.animationPlayState = "running";
		}else{
			cwym.style.display = "block";
		}
}
);

da4.addEventListener("click",function(){
      	console.log("出来啦！！不要点了");
		if(xj4.style.animationPlayState.match("running")){
			xj4.innerHTML = da4.innerHTML;
			xj4.style.animationPlayState = "paused";
			xj5.style.animationPlayState = "running";
		}else{
			cwym.style.display = "block";
		}
}
);

da5.addEventListener("click",function(){
      	console.log("出来啦！！不要点了");
		if(xj5.style.animationPlayState.match("running")){
			xj5.innerHTML = da5.innerHTML;
			xj5.style.animationPlayState = "paused";
			zqym.style.display = "block";
			
		}else{
			cwym.style.display = "block";
		}
}
);

#网页设计 #折腾教程

#JS #wed #网站开发 #HTML #JAVASCRIPT

H5 页面开发答题【源码分享】

http://localhost:8090//archives/h5%E5%BC%80%E5%8F%91%E7%AD%94%E9%A2%98%E6%BA%90%E7%A0%81%E5%88%86%E4%BA%AB

作者

阅站长

发布于

2021年11月10日

许可协议

办公室打印机配置共享（局域网）上一篇

淘宝京东拼多多等平台全网最高返利平台下一篇

H5 页面开发 答题 【源码分享】

HTML页面

H5 页面开发答题【源码分享】