No Description

redEnvelopes_answer.html 10KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  7. <title>答题领红包</title>
  8. <link rel="stylesheet" type="text/css" href="public/public_css.css"/>
  9. <style type="text/css">
  10. body{background:linear-gradient(180deg,#04ADCB,#0572E2);min-height:100vh;}
  11. .bannerImg{width: 3.31rem;margin: auto;padding-top: 0.1rem;}
  12. .bannerImg img{width: 100%;}
  13. .bannerBottom{display: flex;padding:0 0.59rem;justify-content: space-between;color: #FFFFFF;font-size: 0.14rem;margin-top: 0.1rem;}
  14. .answer_title{color: #AE1108;font-size: 0.15rem;margin-top: 0.14rem;text-align: center;}
  15. ul{margin-top: 0.125rem;margin-left: 0.15rem;}
  16. ul p{font-size: 0.15rem;color: #FBA500;vertical-align: middle;}
  17. ul li{
  18. font-size: 0.14rem;color: #ffffff;margin-top: 0.1rem;position: relative;
  19. }
  20. .icon{display: inline-block;vertical-align: middle;}
  21. .icon_wrong{width: 0.15rem;height: 0.15rem;background: url(redEnvelopes_answer_img/wrong.png) no-repeat; background-size:100% ;}
  22. .icon_yes{width: 0.165rem;height: 0.125rem;background: url(redEnvelopes_answer_img/yes.png) no-repeat; background-size:100% ;}
  23. 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);}
  24. .yesActive{color: #AD1107;}
  25. .toast{display:none;width: 100%;height:100vh;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.4);}
  26. .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;}
  27. .toastContent{
  28. width: 100%;height: 100%; background: url(redEnvelopes_answer_img/bgCaidai.png) no-repeat; background-size:100% ;
  29. }
  30. .toastContent h3{font-size: 0.24rem;color: #ffffff;padding-top: 0.425rem;text-align: center;font-weight: normal;}
  31. .toastContent p{color: #ffffff;font-size: 0.17rem;margin-top: 0.24rem;text-align: center;}
  32. .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);}
  33. .lihua{width: 0.8rem;height: 0.6rem;position: absolute;}
  34. .lihua_left{top: -0.19rem;left: -0.26rem;}
  35. .lihua_right{top: -0.19rem;right: -0.26rem;}
  36. #copy_1,#copy_2,#taokouling{position: absolute;left: -1000rem;}
  37. .alert-info {
  38. position: absolute;
  39. top: 1.74rem;
  40. right: 0;
  41. left: 0;
  42. bottom: 0;
  43. text-align: center;
  44. }
  45. .alert-info p {
  46. display: inline-block;
  47. /*height: 0.38rem;*/
  48. color: #fff;
  49. font-size: 0.14rem;
  50. line-height: 0.38rem;
  51. padding: 0 0.10rem;
  52. background-color: rgba(0, 0, 0, 0.7);
  53. border-radius: 5px;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div class="bannerImg">
  59. <img src="redEnvelopes_answer_img/bannerImg.png" />
  60. </div>
  61. <div class="bannerBottom">
  62. <span>参与每日答题</span>
  63. <span>红包天天领</span>
  64. </div>
  65. <p class="answer_title">答对下面3个问题就可领取红包哦~</p>
  66. <div class="answer">
  67. <ul data-yes="B" answer="single" title_number="1">
  68. <p>问题1:什么是猎豆优选?(单选题)&ensp;<i class="icon"></i></p>
  69. <li data="A"><span>A 一个外卖平台</span></li>
  70. <li data="B"><span>B 一个专门领取淘宝天猫隐藏优惠券的app</span></li>
  71. <li data="C"><span>C 一个游戏app</span></li>
  72. </ul>
  73. <ul data-yes="AD" answer="many" title_number="2">
  74. <p>问题2:如何领取优惠券?(多选题)&ensp;<i class="icon"></i></p>
  75. <li data="A"><span>A 在淘宝复制商品标题后进入猎豆优选领取</span></li>
  76. <li data="B"><span>B 添加马云微信领取</span></li>
  77. <li data="C"><span>C 对着手机大喊我要优惠券</span></li>
  78. <li data="D"><span>D 选择猎豆优选内的商品直接领取</span></li>
  79. </ul>
  80. <ul data-yes="AB" answer="many" title_number="3">
  81. <p>问题3:超级会员怎么赚佣金?(多选题)&ensp;<i class="icon"></i></p>
  82. <li data="A"><span>A 自己通过猎豆优选购买商品</span></li>
  83. <li data="B"><span>B 邀请好友通过猎豆优选购买商品</span></li>
  84. </ul>
  85. </div>
  86. <button onclick="judge()">提交</button>
  87. <div class="toast">
  88. <div class="toast_two">
  89. <div class="toastContent">
  90. <img class="lihua lihua_left" src="redEnvelopes_answer_img/lihua_left.png" />
  91. <img class="lihua lihua_right" src="redEnvelopes_answer_img/lihua_right.png" />
  92. <h3>恭喜你,全部答对</h3>
  93. <p>点击【复制淘口令】进入淘宝即可领红包</p>
  94. <div class="copy" onclick="copyPassword()">复制淘口令</div>
  95. </div>
  96. </div>
  97. </div>
  98. <input id="copy_1" type="text" readOnly="true" value=""/>
  99. <div id="copy_2"></div>
  100. <text id="taokouling">¥6yJobemyY1J¥</text>
  101. <div class="alert-info" style="display: none;">
  102. <!-- tip提示,3s后消失 -->
  103. <p></p>
  104. </div>
  105. </body>
  106. </html>
  107. <script type="text/javascript" src="public/jquery-2.1.0.js"></script>
  108. <script type="text/javascript">
  109. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  110. window.onresize = function(){
  111. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  112. }
  113. var title_number = 1;//题号
  114. var myAnswer = [];//用户答案
  115. $(".answer li").click(function () {
  116. var flag = true;
  117. var that = this;
  118. var answer = $(this).parent().attr("data-yes");
  119. answer = answer.split("");
  120. var subject = $(this).attr("data");//点击的选项
  121. if(title_number != $(this).parent().attr("title_number")){
  122. //换题
  123. myAnswer = [];
  124. title_number = $(this).parent().attr("title_number");
  125. //判断多选题时是否有已被选选项
  126. var liArr = $(this).parent().find("li");
  127. liArr = Array.prototype.slice.call(liArr);
  128. liArr.forEach(function (item, index) {
  129. if($(item).attr("class") == "yesActive"){
  130. myAnswer.push($(item).attr("data"))
  131. }
  132. })
  133. }
  134. if($(this).parent().attr("answer") == "many"){
  135. //多选
  136. if($(this).attr("class") == "yesActive"){
  137. $(this).removeClass("yesActive");
  138. myAnswer.forEach(function (item, index) {
  139. if(item == subject){
  140. myAnswer.splice(index,1)
  141. }
  142. })
  143. }else{
  144. $(this).addClass("yesActive");
  145. myAnswer.push(subject)
  146. }
  147. if(answer.indexOf(subject) == -1 && $(this).attr("class") == "yesActive"){
  148. //点击了错误答案
  149. $(this).parent().find("p").find("i").removeClass("icon_yes");
  150. $(this).parent().find("p").find("i").addClass("icon_wrong");
  151. }else{
  152. //是否正确答案判断
  153. if(myAnswer.length == answer.length){
  154. answer.forEach(function (item, index) {
  155. if(myAnswer.indexOf(item) == -1 ){
  156. flag = false;
  157. }
  158. })
  159. myAnswer.forEach(function (item, index) {
  160. if(answer.indexOf(item) == -1 ){
  161. flag = false;
  162. }
  163. })
  164. if(flag){
  165. $(that).parent().find("p").find("i").removeClass("icon_wrong");
  166. $(that).parent().find("p").find("i").addClass("icon_yes");
  167. }
  168. }else if(myAnswer.length < answer.length){
  169. //判断未选择全的时候显示隐藏
  170. answer.forEach(function (item, index) {
  171. if(myAnswer.indexOf(item) == -1){
  172. $(that).parent().find("p").find("i").removeClass("icon_wrong");
  173. $(that).parent().find("p").find("i").removeClass("icon_yes");
  174. }
  175. })
  176. }
  177. }
  178. }else{
  179. //单选
  180. $(this).parent().find("li").removeClass("yesActive")
  181. $(this).addClass("yesActive");
  182. myAnswer = subject;
  183. if(myAnswer == answer[0]){
  184. $(this).parent().find("p").find("i").removeClass("icon_wrong");
  185. $(this).parent().find("p").find("i").addClass("icon_yes");
  186. }else{
  187. $(this).parent().find("p").find("i").removeClass("icon_yes");
  188. $(this).parent().find("p").find("i").addClass("icon_wrong");
  189. }
  190. }
  191. })
  192. //判断是否全部答对
  193. function judge() {
  194. var judgeFlag = true;
  195. var $p = $(".answer ul").find("p");
  196. $p = Array.prototype.slice.call($p);
  197. $p.forEach(function (item, index) {
  198. if($(item).find("i").attr("class").split(" ").indexOf("icon_yes") == -1){
  199. var $answer = $(item).parent().attr("data-yes").split("");
  200. var arr = $(item).parent().find("li");
  201. arr = Array.prototype.slice.call(arr);
  202. for(var i = 0; i< arr.length; i++){
  203. for(var j = 0; j<$answer.length; j++){
  204. if($(arr[i]).attr("data") == $answer[j]){
  205. $(arr[i]).find("span").css("border-bottom","1px solid #AD1107")
  206. }
  207. }
  208. }
  209. judgeFlag = false;
  210. }
  211. })
  212. if(judgeFlag){
  213. //成功
  214. $(".toast").css("display","block")
  215. }else{
  216. //失败
  217. showMsg("很遗憾您答错了<br/>下划线选项是正确答案,请重新选择后提交")
  218. }
  219. }
  220. function copyPassword() {
  221. var data=document.getElementById("taokouling").innerHTML;
  222. copy_2.innerHTML = data;
  223. copy_1.value = data;
  224. if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  225. //区分iPhone设备
  226. window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
  227. var Url2=document.getElementById("copy_2");//要复制文字的节点
  228. var range = document.createRange();
  229. // 选中需要复制的节点
  230. range.selectNode(Url2);
  231. // 执行选中元素
  232. window.getSelection().addRange(range);
  233. // 执行 copy 操作
  234. var successful = document.execCommand('copy');
  235. // 移除选中的元素
  236. window.getSelection().removeAllRanges();
  237. }else{
  238. var Url2=document.getElementById("copy_1");//要复制文字的节点
  239. Url2.select(); // 选择对象
  240. document.execCommand("Copy"); // 执行浏览器复制命令
  241. }
  242. showMsg("复制成功")
  243. }
  244. /**
  245. * [showMsg 提示各种错误信息,1.5s后消失]
  246. */
  247. function showMsg(msg) {
  248. var msgBox = $('.alert-info');
  249. msgBox.children('p').html(msg);
  250. msgBox.show();
  251. setTimeout(function() {
  252. msgBox.hide();
  253. }, 3000);
  254. }
  255. $(".toast").click(function (){
  256. $(this).css("display","none")
  257. })
  258. $(".toast_two").click(function () {
  259. return false;
  260. })
  261. </script>