xiuli.gao
/
youhuiquan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
		<title>答题领红包</title>
		<link rel="stylesheet" type="text/css" href="public/public_css.css"/>
		<style type="text/css">
			body{background:linear-gradient(180deg,#04ADCB,#0572E2);min-height:100vh;}
			.bannerImg{width: 3.31rem;margin: auto;padding-top: 0.1rem;}
			.bannerImg img{width: 100%;}
			.bannerBottom{display: flex;padding:0 0.59rem;justify-content: space-between;color: #FFFFFF;font-size: 0.14rem;margin-top: 0.1rem;}
			.answer_title{color: #AE1108;font-size: 0.15rem;margin-top: 0.14rem;text-align: center;}
			ul{margin-top: 0.125rem;margin-left: 0.15rem;}
			ul p{font-size: 0.15rem;color: #FBA500;vertical-align: middle;}
			ul li{
				font-size: 0.14rem;color: #ffffff;margin-top: 0.1rem;position: relative;
			}
			.icon{display: inline-block;vertical-align: middle;}
			.icon_wrong{width: 0.15rem;height: 0.15rem;background: url(redEnvelopes_answer_img/wrong.png) no-repeat; background-size:100% ;}
			.icon_yes{width: 0.165rem;height: 0.125rem;background: url(redEnvelopes_answer_img/yes.png) no-repeat; background-size:100% ;}
			button{display:block;width: 1.07rem;height: 0.3rem;background: #FBBD00;margin:auto;margin-top: 0.245rem;color: #FFFFFF;font-size: 0.17rem;border-radius: 0.05rem;box-shadow:0px 0.065rem 0.045rem rgba(59,40,142,0.18);}
			.yesActive{color: #AD1107;}
			.toast{display:none;width: 100%;height:100vh;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.4);}
			.toast_two{width: 3.2rem;height: 1.98rem;background: linear-gradient(180deg,#f2b32b,#f7601e);position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;border-radius: 0.15rem;}
			.toastContent{
				width: 100%;height: 100%; background: url(redEnvelopes_answer_img/bgCaidai.png) no-repeat; background-size:100% ;
			}
			.toastContent h3{font-size: 0.24rem;color: #ffffff;padding-top: 0.425rem;text-align: center;font-weight: normal;}
			.toastContent p{color: #ffffff;font-size: 0.17rem;margin-top: 0.24rem;text-align: center;}
			.toastContent .copy{background:#FB3500;margin:auto;margin-top:0.29rem;width: 1.07rem;height: 0.3rem;line-height: 0.3rem;text-align: center;border-radius: 0.05rem;color: #FFFFFF;font-size: 0.17rem;box-shadow:0 0.065rem 0.045rem rgba(59,40,142,0.18);}
			.lihua{width: 0.8rem;height: 0.6rem;position: absolute;}
			.lihua_left{top: -0.19rem;left: -0.26rem;}
			.lihua_right{top: -0.19rem;right: -0.26rem;}
			#copy_1,#copy_2,#taokouling{position: absolute;left: -1000rem;}
			.alert-info {
			    position: absolute;
			    top: 1.74rem;
			    right: 0;
			    left: 0;
			    bottom: 0;
			    text-align: center;
			}
			.alert-info p {
			    display: inline-block;
			    /*height: 0.38rem;*/
			    color: #fff;
			    font-size: 0.14rem;
			    line-height: 0.38rem;
			    padding: 0 0.10rem;
			    background-color: rgba(0, 0, 0, 0.7);
			    border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div class="bannerImg">
			<img src="redEnvelopes_answer_img/bannerImg.png" />
		</div>
		<div class="bannerBottom">
			<span>参与每日答题</span>
			<span>红包天天领</span>
		</div>
		<p class="answer_title">答对下面3个问题就可领取红包哦～</p>
		<div class="answer">
			<ul data-yes="B" answer="single" title_number="1">
				<p>问题1:什么是猎豆优选?（单选题）&ensp;<i class="icon"></i></p>
				<li data="A"><span>A 一个外卖平台</span></li>
				<li data="B"><span>B 一个专门领取淘宝天猫隐藏优惠券的app</span></li>
				<li data="C"><span>C 一个游戏app</span></li>
			</ul>
			<ul data-yes="AD" answer="many" title_number="2">
				<p>问题2:如何领取优惠券？（多选题）&ensp;<i class="icon"></i></p>
				<li data="A"><span>A 在淘宝复制商品标题后进入猎豆优选领取</span></li>
				<li data="B"><span>B 添加马云微信领取</span></li>
				<li data="C"><span>C 对着手机大喊我要优惠券</span></li>
				<li data="D"><span>D 选择猎豆优选内的商品直接领取</span></li>
			</ul>
			<ul  data-yes="AB" answer="many" title_number="3">
				<p>问题3:超级会员怎么赚佣金？（多选题）&ensp;<i class="icon"></i></p>
				<li data="A"><span>A 自己通过猎豆优选购买商品</span></li>
				<li data="B"><span>B 邀请好友通过猎豆优选购买商品</span></li>
			</ul>
		</div>
		<button onclick="judge()">提交</button>
		<div class="toast">
			<div class="toast_two">
				<div class="toastContent">
					<img class="lihua lihua_left" src="redEnvelopes_answer_img/lihua_left.png" />
					<img class="lihua lihua_right" src="redEnvelopes_answer_img/lihua_right.png"  />
					<h3>恭喜你，全部答对</h3>
					<p>点击【复制淘口令】进入淘宝即可领红包</p>
					<div class="copy" onclick="copyPassword()">复制淘口令</div>
				</div>
			</div>
		</div>
		
		<input id="copy_1" type="text" readOnly="true" value=""/>
	    <div id="copy_2"></div>
		<text id="taokouling">￥6yJobemyY1J￥</text>
		
		<div class="alert-info" style="display: none;">
            <!-- tip提示,3s后消失 -->
            <p></p>
        </div>
	</body>
</html>
<script type="text/javascript" src="public/jquery-2.1.0.js"></script>
<script type="text/javascript">
	document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
	window.onresize = function(){
		document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
	}
	var title_number = 1;//题号
	var myAnswer = [];//用户答案
	$(".answer li").click(function () {
		var flag = true;
		var that = this;
		var answer = $(this).parent().attr("data-yes");
		answer = answer.split("");
		var subject = $(this).attr("data");//点击的选项
		if(title_number != $(this).parent().attr("title_number")){
			//换题
			myAnswer = [];
			title_number = $(this).parent().attr("title_number");
			//判断多选题时是否有已被选选项
			var liArr = $(this).parent().find("li");
			liArr = Array.prototype.slice.call(liArr);
			liArr.forEach(function (item, index) {
				if($(item).attr("class") == "yesActive"){
					myAnswer.push($(item).attr("data"))
				}
			})
		}
		if($(this).parent().attr("answer") == "many"){
			//多选
			if($(this).attr("class") == "yesActive"){
				$(this).removeClass("yesActive");
				myAnswer.forEach(function (item, index) {
					if(item == subject){
						myAnswer.splice(index,1)
					}
				})
			}else{
				$(this).addClass("yesActive");
				myAnswer.push(subject)
			}
			if(answer.indexOf(subject) == -1 && $(this).attr("class") == "yesActive"){
				//点击了错误答案
				$(this).parent().find("p").find("i").removeClass("icon_yes");
				$(this).parent().find("p").find("i").addClass("icon_wrong");
			}else{
				//是否正确答案判断
				if(myAnswer.length == answer.length){
					answer.forEach(function (item, index) {
						if(myAnswer.indexOf(item) == -1 ){
							flag = false;
						}
					})
					myAnswer.forEach(function (item, index) {
						if(answer.indexOf(item) == -1 ){
							flag = false;
						}
					})
					if(flag){
						$(that).parent().find("p").find("i").removeClass("icon_wrong");
						$(that).parent().find("p").find("i").addClass("icon_yes");
					}
				}else if(myAnswer.length < answer.length){
					//判断未选择全的时候显示隐藏
					answer.forEach(function (item, index) {
						if(myAnswer.indexOf(item) == -1){
							$(that).parent().find("p").find("i").removeClass("icon_wrong");
							$(that).parent().find("p").find("i").removeClass("icon_yes");
						}
					})
				}
			}
		}else{
			//单选
			$(this).parent().find("li").removeClass("yesActive")
			$(this).addClass("yesActive");
			myAnswer = subject;
			if(myAnswer == answer[0]){
				$(this).parent().find("p").find("i").removeClass("icon_wrong");
				$(this).parent().find("p").find("i").addClass("icon_yes");
			}else{
				$(this).parent().find("p").find("i").removeClass("icon_yes");
				$(this).parent().find("p").find("i").addClass("icon_wrong");
			}
		}
	})
	
	//判断是否全部答对
	function judge() {
		var judgeFlag = true;
		var $p = $(".answer ul").find("p");
		$p = Array.prototype.slice.call($p);
		$p.forEach(function (item, index) {
			if($(item).find("i").attr("class").split(" ").indexOf("icon_yes") == -1){
				var $answer = $(item).parent().attr("data-yes").split("");
				var arr = $(item).parent().find("li");
				arr = Array.prototype.slice.call(arr);
				for(var i = 0; i< arr.length; i++){
					for(var j = 0; j<$answer.length; j++){
						if($(arr[i]).attr("data") == $answer[j]){
							$(arr[i]).find("span").css("border-bottom","1px solid #AD1107")
						}
					}
				}
				judgeFlag = false;
			}
		})
		if(judgeFlag){
			//成功
			$(".toast").css("display","block")
		}else{
			//失败
			showMsg("很遗憾您答错了<br/>下划线选项是正确答案,请重新选择后提交")
		}
	}
	function copyPassword() {
		var data=document.getElementById("taokouling").innerHTML;
		copy_2.innerHTML = data;
	    copy_1.value = data;
	    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
	        //区分iPhone设备
	        window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
	        var Url2=document.getElementById("copy_2");//要复制文字的节点
	        var range = document.createRange();
	        // 选中需要复制的节点
	        range.selectNode(Url2);
	        // 执行选中元素
	        window.getSelection().addRange(range);
	        // 执行 copy 操作
	        var successful = document.execCommand('copy');
	
	        // 移除选中的元素
	        window.getSelection().removeAllRanges();
	    }else{
	        var Url2=document.getElementById("copy_1");//要复制文字的节点
	        Url2.select(); // 选择对象
	        document.execCommand("Copy"); // 执行浏览器复制命令
	    }
	    showMsg("复制成功")
	}
	/**
 * [showMsg 提示各种错误信息,1.5s后消失]
 */
	function showMsg(msg) {
	    var msgBox = $('.alert-info');
	    msgBox.children('p').html(msg);
	    msgBox.show();
	
	    setTimeout(function() {
	        msgBox.hide();
	    }, 3000);
	}
	$(".toast").click(function (){
		$(this).css("display","none")
	})
	$(".toast_two").click(function () {
		return false;
	})
</script>