|
|
<!DOCTYPE html><html>
<head> <meta charset="utf-8" /> <title>建党百年</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"> <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/comment.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="css/common.css" /> <link rel="stylesheet" type="text/css" href="css/game5.css?index=1" /> </head> <style type="text/css">
</style>
<body>
<div id="wrap"> <div class="tipsNum"><img src="img/game5/firstIcon.png" /></div> <div class="titleIcon"> <ul> <li><img src="img/success/suc1.png" /></li> <li><img src="img/success/suc2.png" /></li> <li><img src="img/success/suc33.png" /></li> <li><img src="img/success/suc44.png" /></li> <li><img src="img/game1/result.png" /></li> </ul> </div>
<div class="cont_wrap" style="">
<div class="contList"> <ul> <!--<li class="end">
<p class="contText">是哪位领导人奠定了新中国在国际上的大国地位，为开创独立自主的和平外交作了不懈的努力?（单选）</p>
</li>
<li class="end"> <p class="contText">哪位领导人是中国社会主义改革开放和现代化建设的总设计师?（单选）</p> </li> <li class="end"> <p class="contText">1995年1月30日，是哪位领导人发表了《为促进祖国统一大业的完成而继续奋斗》的重要讲话？（单选）</p> </li> <li class="end"> <p class="contText">是哪位领导人提出了继续推进人民政协事业的四个“必须坚持”和五个“继续”?（单选）</p> </li>
<li class="end"> <p class="contText">是哪位领导人提出了指导思想“中国梦”?（单选）</p> </li>--> </ul> </div> <!--<div class="posTip">
<p>请在下方找找提出上方对新中国发展有推进作用的政策的是哪位伟人！</p>
</div>--> <div class="tipList"> <div class="nameItem"> <ul> <li class="start click1"> <div class="left"> <!--<p class="chose">A</p>--> <p class="name">毛泽东</p> </div> <div class="choseIcon"> <p class="trueIcon"><img src="img/game5/trueIcon.png" /></p> <p class="falseIcon"><img src="img/game5/falseIcon.png" /></p> </div> </li> <li class="start click1"> <div class="left"> <!--<p class="chose">B</p>--> <p class="name">邓小平</p> </div> <div class="choseIcon"> <p class="trueIcon"><img src="img/game5/trueIcon.png" /></p> <p class="falseIcon"><img src="img/game5/falseIcon.png" /></p> </div> </li> <li class="start click1"> <div class="left"> <!--<p class="chose">C</p>--> <p class="name"> 江泽民</p> </div> <div class="choseIcon"> <p class="trueIcon"><img src="img/game5/trueIcon.png" /></p> <p class="falseIcon"><img src="img/game5/falseIcon.png" /></p> </div> </li> <li class="start click1"> <div class="left"> <!--<p class="chose">D</p>--> <p class="name">胡锦涛</p> </div> <div class="choseIcon"> <p class="trueIcon"><img src="img/game5/trueIcon.png" /></p> <p class="falseIcon"><img src="img/game5/falseIcon.png" /></p> </div> </li> <li class="start click1"> <div class="left"> <!--<p class="chose">E</p>--> <p class="name">习近平</p> </div> <div class="choseIcon"> <p class="trueIcon"><img src="img/game5/trueIcon.png" /></p> <p class="falseIcon"><img src="img/game5/falseIcon.png" /></p> </div> </li> </ul> </div> </div>
<div class="btn"> <div class="sureBtn"><img src="img/game5/sureBtn.png" /></div> <div class="nextBtn"> <img src="img/game5/next.png" /> </div> </div> </div> <!--打完五道题后的样子--> <div class="successCont"> <ul class="nameList"> <li> <p>毛泽东</p> </li> <li> <p>邓小平</p> </li> <li> <p>江泽民</p> </li> <li> <p>胡锦涛</p> </li> <li> <p>习近平</p> </li>
</ul> <div class="textList"> <ul>
</ul> </div> </div> <!--成功--> <div class="chengg"> <div class="mask"></div> <div class="success"> <div class="sucImg"> <div> <p class="text">恭喜获得第五枚徽章！</p> <p class="text textTime"></p> <p class="imgIcons"><img src="img/success/suc5.png" /></p> </div> </div>
<div class="close"><img src="img/close.png" /></div>
</div> <div class="deepBtn">继续</div> <p class="imgIcon"><img src="img/success/suc5.png" /></p> </div> </div> <div class="audio"> <audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true" loop="true"> <source src="img/audio/game5Bgm.mp3" type="audio/mp3" /> <!--您的浏览器不支持 audio 标签。--> </audio> <audio id="trueAudio" hidden="true"> <source src="img/true.mp3" type="audio/mp3" /> </audio> <audio id="falseAudio" hidden="true"> <source src="img/false1.mp3" type="audio/mp3" /> </audio> </div> </body>
</html><script src="js/common.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> function audioAutoPlay(id) { var audio = document.getElementById(id), play = function () { audio.play(); document.removeEventListener("touchstart", play, false); }; audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { play(); }, false); document.addEventListener('YixinJSBridgeReady', function () { play(); }, false); document.addEventListener("touchstart", play, false); } var url = location.href.split('?')[1] var audioState = url.split('=')[1]; if(audioState == 'true') { audioAutoPlay('bgmAudio'); }
$('.tipList div').eq(0).show(); var liIndex = null var time = 0; var timeLength = setInterval(function() { time++; }, 1000) var count = 0; var trueArr = [0, 1, 2, 3, 4]; // var questArr = [ // '是哪位领导人奠定了新中国在国际上的大国地位，为开创独立自主的和平外交作了不懈的努力?（单选）', // '哪位领导人是中国社会主义改革开放和现代化建设的总设计师?（单选）', // '1995年1月30日，是哪位领导人发表了《为促进祖国统一大业的完成而继续奋斗》的重要讲话？（单选）', // '是哪位领导人提出了继续推进人民政协事业的四个“必须坚持”和五个“继续”?（单选）', // '是哪位领导人提出了指导思想“中国梦”?（单选）' // ]
var quest1Arr = [ '1927年9月下旬，是哪位领导人率领秋收起义的部队来到江西省永新县三湾村，进行了著名的三湾改编，确立了人民军队建设的根本原则？（单选）', '中国共产党、中国人民解放军和中华人民共和国的主要缔造者和领导人是哪位党的领导人？（单选）', '是哪位领导人奠定了新中国在国际上的大国地位，为开创独立自主的和平外交作了不懈的努力？（单选）', ]; var quest2Arr = [ '中国特色社会主义道路的开创者是哪位领导人？（单选）', '是哪位领导人所倡导的“改革开放”及“一国两制”政策理念，改变了20世纪后期的中国，也影响了世界？（单选）', '哪位领导人是中国社会主义改革开放和现代化建设的总设计师？（单选）', ]; var quest3Arr = [ '哪位领导人是党的第三代中央领导集体的核心，是“三个代表”重要思想的主要创立者？（单选）', '1995年1月30日，是哪位领导人发表了《为促进祖国统一大业的完成而继续奋斗》的重要讲话？（单选）', '是哪位领导人提出了祖国和平统一八项主张？（单选）' ]; var quest4Arr = [ '是哪位领导人提出了继续推进人民政协事业的四个“必须坚持”和五个“继续”？（单选）', '是哪位领导人提出了“八个为荣，八个为耻”的重要论述？（单选）', '是哪位领导人在2003年7月28日的讲话中提出“坚持以人为本，树立全面、协调、可持续的发展观？（单选）', ]; var quest5Arr = [ '2013年10月3日，是哪位领导人提出共建21世纪海上丝绸之路重大倡议？（单选）', '是哪位领导人提出了指导思想“中国梦”？（单选）', '中国共产党第十九次全国代表大会，把哪位领导人新时代中国特色社会主义思想确立为党必须长期坚持的指导思想并庄严地写入党章，实现了党的指导思想的与时俱进？（单选）', ] var newQuestArr = []; newQuestArr.push(randArr(quest1Arr)[0]); newQuestArr.push(randArr(quest2Arr)[0]); newQuestArr.push(randArr(quest3Arr)[0]); newQuestArr.push(randArr(quest4Arr)[0]); newQuestArr.push(randArr(quest5Arr)[0]); console.log(newQuestArr) var newIndexArr = []; newIndexArr = randArr(trueArr); var quest = ''; console.log(newIndexArr) for(var i = 0; i <= 4; i++) { quest += '<li class="end"><p class="contText">' + newQuestArr[newIndexArr[i]] + '</p></li>' } console.log(quest) $('.contList ul').html(quest); $('.contList li').eq(0).show() var chooseIndex = null; var clickState = true; for(var i = 1; i <= 5; i++) { var icond = $(".click" + i); icond.each(function(index) { $(this).on('touchstart', function(evt) { $('.posTip p').fadeOut(1000) var e = event || evt; e.preventDefault(); //阻止其他事件 liIndex = $(this).index() if(clickState) { $(this).addClass('active').siblings().removeClass('active'); } }).on('touchmove', function(evt) { var e = event || evt; e.preventDefault(); //阻止其他事件
}).on('touchend', function(evt) { var e = event || evt; e.preventDefault(); //阻止其他事件 chooseIndex = $(this).index() }) }) }
$('.sureBtn img').on('touchstart', function() { if(chooseIndex || chooseIndex == 0) {
if(clickState) { if(chooseIndex == trueArr[count]) { clickState = false; //正确 var trueAudio = document.getElementById('trueAudio'); trueAudio.play(); audioAutoPlay('trueAudio') $('.tipList .nameItem ').find('li').eq(trueArr[count]).find('.trueIcon').fadeIn(); $('.tipList li').eq(trueArr[count]).addClass('active') count++; $('.nextBtn').fadeIn(); $('.sureBtn').fadeOut();
} else { $('.tipList .nameItem ').find('li').eq(chooseIndex).find('.falseIcon').fadeIn(); $('.tipList .nameItem ').find('li').eq(chooseIndex).find('.falseIcon').fadeOut(); $('.tipList li').eq(liIndex).removeClass('active') //错误
var falseAudio = document.getElementById('falseAudio'); falseAudio.play(); audioAutoPlay('falseAudio')
// count++;
}
} if(count == 5) { $('.posTip p').fadeOut()
setTimeout(function() { $('.cont_wrap').fadeOut(); $('.contList').fadeOut(); // $('.successCont').slideDown(2000);
}, 0) setTimeout(function() { end(); }, 1000) }
} else { alert('请选择') } }) $('.nextBtn').on('touchstart', function() { clickState = true; chooseIndex = null; $('.sureBtn').fadeIn(); $('.nextBtn').fadeOut(); $('.contList li').eq(count).show().siblings().hide(); // $('.tipList .nameItem').eq(count).show().siblings().hide(); $('.tipList li').removeClass('active') $('.trueIcon').fadeOut(); $('.falseIcon').fadeOut(); // img/game5/bgm4.png // background: url(img/game5/bgm2.png) no-repeat; // if(cont==1){} $('.cont_wrap').css({ 'background': 'url(img/game5/bgm' + (count + 1) + '.png) no-repeat', 'background-size': '100% 100%', })
})
function end() { clearInterval(timeLength); if(time > 3600) { var houre = parseInt(time / 3600); if(time % 3600 > 60) { var min = parseInt((time % 3600) / 60) } else { var min = 0; } var sec = (time % 3600) % 60 $('.textTime').text('用时' + houre + '时' + min + '分' + sec + '秒')
} else if(time > 60 && time < 3600) { $('.textTime').text('用时' + parseInt(time / 60) + '分' + (time % 60) + '秒') } else { $('.textTime').text('用时' + (time % 60) + '秒')
}
var showSate = false; maskState() $('.mask').fadeIn(); $('.success').fadeIn(); $('.imgIcon').fadeIn(); $('.lines').css('z-index', '-1') $('#trueXian').css('display', 'none') $('.deepBtn').fadeIn()
showSate = true; maskState()
function maskState() { if(showSate) { $('.imgIcon').animate({
'top': '0', "right": '0', 'width': '.98rem', 'height': '1.24rem', }, 2000)
function yincang() { $('.titleIcon ul li').eq(1).css({ 'visibility': 'hidden' }) } setTimeout('yincang()', 2000)
} }
$('.deepBtn').click(function() { var url = location.href.split('?')[1]; location.replace("http://h5.qishichuangke.cn/html5/szdj/index?" + url); //window.open("http://h5.qishichuangke.cn/html5/szdj/index?"+url) //window.location.href = "http://h5.qishichuangke.cn/html5/szdj/index?"+url }) $('.close').on('touchstart', function() { $('.mask').fadeOut(); $('.success .sucImg div').fadeOut(); $('.success .close').fadeOut(); })
}
function randArr(arr) { let i = arr.length; while(i) { let j = Math.floor(Math.random() * i--); [arr[j], arr[i]] = [arr[i], arr[j]]; } return arr; } </script>
|
