问题回答进度条

ding
ding 发布于 2017-01-07 22:56:01 浏览:275 类型:原创 - 随笔 分类:JavaScript - 个人原创 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>问题回答进度条</title>
</head>
<style type="text/css">
	*{margin: 0;padding: 0;}
	em,span,i{font-style:normal;}
	ul,li,dl,dd{list-style: none;}
	.wp{width: 1200px;margin: 0 auto;}
	.question-bar-box{text-align: center;}
	.bar-box{
		width: 400px;
		height: 10px;
		overflow: hidden;
		margin: 25px auto;
		border:1px solid red;
		border-radius: 6px;
	}
	.bar-box .bar{
		display: block;
		width: 0px;
		height: 10px;
		border-radius: 5px;
		background-color: #00ff00;
	}
	.question-box ul li{display: none;}
	.question-box ul .on{display: block;}
	.question-box li p{
		color:red;
		padding: 15px 0;
	}
	.question-box li label{
		overflow: hidden;
		position: relative;
		display: inline-block;
		height: 24px;
		padding: 0 25px 0 30px; 
		line-height: 24px;
		cursor: pointer;
		background: url(http://cdn.attach.qdfuns.com/notes/pics/201701/07/224335owkz9kh4vk48l9vo.png) no-repeat 0 center;
	}
	.question-box li .ok{
		background: url(http://cdn.attach.qdfuns.com/notes/pics/201701/07/224339zf4l8l6z70z3984l.png) no-repeat 0 center;
	}
	.question-box li em{
		padding-left: 5px;
	}
	.question-box li input[type="radio"]{
		display:none;
	}
	.question-box button,.question-box .next{
		display: inline-block;
		width: 80px;
		height:30px;
		margin: 20px 10px;
		line-height: 30px;
		border:none;
		outline: none;
		cursor: pointer;
		box-shadow: 0 0 5px 5px rgba(255,182,193,0.6);
		animation:hx 1s ease-in-out alternate infinite;
		-webkit-animation:hx 1s ease-in-out alternate infinite;
		-moz-animation:hx 1s ease-in-out alternate infinite;
		 -o-animation:hx 1s ease-in-out alternate infinite;
	}
	@keyframes hx
		{
		10% {box-shadow:0 0 5px 5px rgba(255,193,203,.6);}
		50% {box-shadow: 0 0 5px 5px rgba(255,193,203,.6);}
		100% {box-shadow: 0 0 5px 5px rgba(139,0,139,.6);}
		}
	@-webkit-keyframes hx
		{
		10% {box-shadow: 0 0 5px 5px rgba(255,193,203,.6);}
		50% {box-shadow: 0 0 5px 5px rgba(255,193,203,.6);}
		100% {box-shadow: 0 0 5px 5px rgba(139,0,139,.6);}
		}
	@-moz-keyframes hx
		{
		10% {box-shadow: 0 0 5px 5px rgba(255,193,203,.6);}
		50% {box-shadow: 0 0 5px 5px rgba(255,193,203,.6);}
		100% {box-shadow: 0 0 5px 5px rgba(139,0,139,.6);}
		}
	@-o-keyframes hx
		{
		10% {box-shadow: 0 0 5px 5px rgba(255,193,203,.6);}
		50% {box-shadow: 0 0 5px 5px rgba(255,193,203,.6);}
		100% {box-shadow: 0 0 5px 5px rgba(139,0,139,.6);}
		}
</style>
<body>
	<div class="wp">
		<div class="question-bar-box">
			<h4>共<i></i>题,还剩<em></em>道题</h4>
			<div class="bar-box">
				<span class="bar"></span>
			</div>
			<form>
				<div class="question-box">
					<ul>
						<li class="on">
							<p>第一题</p>
							<label>
								<input type="radio" name="1">
								<em>答案1</em>
							</label>
							<label>
								<input type="radio" name="1">
								<em>答案2</em>
							</label>
							<label>
								<input type="radio" name="1">
								<em>答案3</em>
							</label>
						</li>
						<li>
							<p>第二题</p>
							<label>
								<input type="radio" name="2">
								<em>答案1q</em>
							</label>
							<label>
								<input type="radio" name="2">
								<em>答案2q</em>
							</label>
							<label>
								<input type="radio" name="2">
								<em>答案3q</em>
							</label>
						</li>
						<li>
							<p>第三题</p>
							<label>
								<input type="radio" name="3">
								<em>答案1w</em>
							</label>
							<label>
								<input type="radio" name="3">
								<em>答案2w</em>
							</label>
							<label>
								<input type="radio" name="3">
								<em>答案3w</em>
							</label>
						</li>
						<li>
							<p>第四题</p>
							<label>
								<input type="radio" name="4">
								<em>答案1e</em>
							</label>
							<label>
								<input type="radio" name="4">
								<em>答案2e</em>
							</label>
							<label>
								<input type="radio" name="4">
								<em>答案3e</em>
							</label>
						</li>
						<li>
							<p>第四题</p>
							<label>
								<input type="radio" name="4">
								<em>答案1e</em>
							</label>
							<label>
								<input type="radio" name="4">
								<em>答案2e</em>
							</label>
							<label>
								<input type="radio" name="4">
								<em>答案3e</em>
							</label>
						</li>
						<!-- 随便添加几个li都可以 -->
					</ul>
					<a class="next" href="void:(0)">下一题</a>
					<button class="submit">提交</button>
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">
	$(function(){
		/*改变默认radio*/
		$('.question-box li>label').click(function(){
				$(this).addClass("ok").siblings('label').removeClass('ok');//createAttribute('class').nodeValue('ok'),变换默认radio
		});
		var nth=$('.question-box ul li').length;
		var W=$('.bar-box').width();
		var w=W/nth;
		$("h4 i,h4 em").append(nth);
		/*进度条*/
		$(".question-box li").each(function(i){
			$(this).find("input[type='radio']").change(function(){
				if($(this).is(':checked')){
					$(".bar").animate({width:w*(i+1)},'slow'
					);//后边还可以跟回调函数返回完成度
				}
			});	
		});
		/*随机颜色部分*/
		function d(){
			// var cor="#";
			// for(var j=0;j<6;j++){
			// 	cor+=""+Math.floor(Math.random()*9);//强行转换
			// }
			// return cor;
			return "#"+(""+((Math.random()*16777215)>>0).toString(16)).slice(-6); /*1、16777215为16进制的颜色ffffff转成10进制的数字 
			2、>>数字取整 
			3、转成16进制不足6位的以0来补充*/
		}
		/*下一步按钮逻辑判断*/
		function next(i){
			$('li').eq(i).addClass("on").siblings().removeClass("on");
		}
		next();
		var num=0;
		$('.next').click(function(){
			if($("li").eq(num).find("input[type='radio']").is(":checked")){
				num++;
			}else if(num>=nth){
				alert("这已经是最后一题了,请及时提交!")
				return false;
			}
			else{
				alert("请回答这题,才能进行下一题!")
				return false;
			};
			if(num){
				next(num);//调用切换问题函数
			}
		var c=nth-num;
		var bgc=d();//调用随机颜色函数
		$("h4 em").empty().append(c).css({color:bgc});
		});
		/*提交按钮判断逻辑*/
		$(".submit").click(function(){
			if(num<nth){
				alert("还没有回答完,不能提交,请耐心回答!!")
				return false
				}
			else if(num==nth){
				window.location.reload()
			}
		});
	})
	</script>
</body>
</html>
问题回答进度条
问题回答进度条
标签:
z
给个赞 1 人点赞
收藏 3 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
ding ding 作者

心所向,行所致

作者最新