|
|
<!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/game4.css" /> <link rel="stylesheet" type="text/css" href="css/globle.css" />
</head> <style type="text/css"> .game4tips { position: absolute; z-index: 100; width: 100%; /* height: 100%; */ text-align: center; line-height: 100%; color: white!important; font-size: .46rem!important; top: 1.5rem; } </style>
<body>
<div id="wrap"> <div class="tipsNum"><img src="img/game4/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/game1/result.png" /></li> <li><img src="img/game1/result.png" /></li> </ul> </div> <!--<div class=" " id="dataNums">1935年1月</div>--> <div class="cont_wrap"> <div class="tipList"> <ul>
</ul> </div>
<div class="game4tips"> <p>请根据上方会议时间， </p> <p style="margin-top: .1rem;">点击选择下方正确会议名称！</p> </div> <div class="contList"> <ul> <!--<li class="textName name3" id="icon3" style="left:15%">
<p class="btnText">十一届三中全会</p> </li> <li class="textName name5" id="icon5" style="left:32%"> <p class="btnText">十九届五中全会</p> </li> <li class="textName name1" id="icon1" style="left:49%"> <p class="btnText">遵义会议</p> </li> <li class="textName name2" id="icon2" style="left:66%"> <p class="btnText"> 中共八大</p> </li> <li class="textName name4" id="icon4" style="left:83%"> <p class="btnText">十三届三中全会</p> </li>--> </ul> <!--<ul>
<li class="textName name3" id="icon3" style="left:15%"> <p class="btnText">遵义会议</p> </li> <li class="textName name5" id="icon5" style="left:32%"> <p class="btnText">十三届三中全会</p> </li> <li class="textName name1" id="icon1" style="left:49%"> <p class="btnText">十一届三中全会</p> </li> <li class="textName name2" id="icon2" style="left:66%"> <p class="btnText">中共八大</p> </li> <li class="textName name4" id="icon4" style="left:83%"> <p class="btnText"> 十九届五中全会</p> </li> </ul> <ul> <li class="textName name3" id="icon3" style="left:15%"> <p class="btnText">十一届三中全会</p> </li> <li class="textName name5" id="icon5" style="left:32%"> <p class="btnText">中共八大</p> </li> <li class="textName name1" id="icon1" style="left:49%"> <p class="btnText">十三届三中全会</p> </li> <li class="textName name2" id="icon2" style="left:66%"> <p class="btnText">遵义会议 </p> </li> <li class="textName name4" id="icon4" style="left:83%"> <p class="btnText">十九届五中全会</p> </li> </ul> <ul> </ul> <ul> </ul>--> </div> </div> <!--成功--> <div class="mask"></div> <div class="shoushi"><img src="img/shoushi/4.gif" /></div>
<div class="success"> <div class="sucImg"> <div> <p class="text">恭喜获得第四枚徽章！</p> <p class="text textTime"></p> <p class="imgIcons"><img src="img/success/suc44.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/suc44.png" /></p> </div> <audio id="bgmAudio" hidden="true" autoplay="autoplay"> <source src="img/audio/game4Bgm.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> </body>
</html><script src="js/common.js" type="text/javascript" charset="utf-8"></script><script src="js/num.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> function yearTime(time) { $("#dataNums").rollNumDaq({ deVal: time }); }</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'); } //手势隐藏 var maskState1 = true; $('.mask').on('touchstart', function() { if(maskState1) { fadeoutmask() maskState1 = false; yearTime(newTiemArr1[0])
} else { $('.mask').fadeOut(); $('.success .sucImg div').fadeOut(); $('.success .close').fadeOut(); } }) $('.shoushi').on('touchstart', function() { fadeoutmask() yearTime(newTiemArr1[0]) }) $('.game4tips').on('touchstart', function() { fadeoutmask() yearTime(newTiemArr1[0])
})
function fadeoutmask() { $('.mask').fadeOut(); $('.shoushi').fadeOut(); $(".game4tips").fadeOut() maskState1 = false;
} //手势隐藏end var time = 0; var timeLength = setInterval(function() { // console.log(time) time++; }, 1000)
var true1 = document.getElementsByClassName('true1'); // console.log(true1[0].offsetLeft) var textNameArr = [ "left: 12%", "left: 29%", "left: 46%", "left: 63%", "left: 80%" ]; //正确答案数组 var trueArr = ["1", "2", "3", "4", "5"]; var trueArrNew = ["3", "5", "1", "2", "4"]; // var trueArrNew = []; //事件名称数组 var nameArr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; //事件时间数组 var oldtimeArr = [1, 2, 3, 4, 5, 6, 7, 8]; var timeArr = [1, 2, 3, 4, 5, 6, 7, 8]; var timeArrNew = [192107, 192207, 192912, 193501, 194504, 194903, 195609, 197812, 202010]; //文字数组 // var writeArr = [ // '中共一大2107', // '中共二大2207', // '古田会议2912', // '遵义会议3501', // '中共七大4504', // "七届二中全会4903", // '中共八大5609', // '十一届三中全会7812', // '十三届三中全会2012', // '十九届五中全会2020' // ]; var writeArr = [ '中共一大', '中共二大', '古田会议', '遵义会议', '中共七大', "七届二中全会", '中共八大', '十一届三中全会',// '十三届三中全会', '十九届五中全会' ]; var contArr = [ '一大召开标志着中国共产党的正式成立，犹如一轮红日在东方冉冉升起，照亮了中国革命的前程。这是近代中国社会进步和革命发展的客观要求，是开天辟地的大事变。中国革命的面目就焕然一新了。', '在中国近代史上第一次明确地提出了反帝反封建的民主革命纲领，指明了中国人民革命斗争的方向，表明了共产党已经接受了列宁关于殖民地革命的理论，为党确立新民主主义革命的基本思想奠定了基础', '古田会议将马克思列宁主义与中国革命斗争的具体实践相结合，解决了如何从加强党的思想工作着手保持党的无产阶级先锋队性质和建设新型人民军队的根本问题，是人民军队建设史上一次极其重要的会议。', '（1）集中解决当时具有决定意义的军事问题和组织问题 <br />（2）开始确立以毛泽东为代表的马克思主义的正确路线在中共中央的领导地位<br />（3）成为党的历史上一个生死攸关的转折点', '它总结了中国新民主主义革命20多年曲折发展的历史经验，制定了正确的路线、纲领和策略，克服了党内的错误思想，使全党特别是党的高级干部对于中国民主革命的发展规律有了比较明确的认识。', "七届二中全会是一次制定夺取全国胜利和胜利后的各方面政策的极其重要的决策性会议。这次会议完满地解决了中国共产党夺取民主革命的最后胜利和由民主主义革命向社会主义革命转变的一系列重大方针问题。", '（1）大会正确地分析了社会主义改造完成后中国社会的主要矛盾和主要任务。<br /> （2）八大的路线是正确的，它为社会主义事业的发展和党的建设指明了方向。<br /> （3）陈云在发言中提出三个主体、三个补充思想。', '会议高度评价了实践是检验真理的唯一标准观点，实行改革开放，把党和国家工作的重心转移到经济建设上来。党的十一届三中全会标志着我党重新确立了马克思主义思想路线、政治路线和组织路线。',// '把科学发展观确定为党的指导思想，阐明中国特色社会主义的总依据、总布局和总任务，阐明中国特色社会主义道路，明确提出夺取中国特色社会主义新胜利必须牢牢把握的基本要求，提出全面建成小康社会的新要求。', '“十三五”时期，全面深化改革取得重大突破，全面依法治国取得重大进展，全面从严治党取得重大成果，国家治理体系和治理能力现代化加快推进，中国共产党领导和我国社会主义制度优势进一步彰显' ] //打乱时间 randArr(nameArr); var newTitleArr = nameArr.slice(0, 5); var newTiemArr = []; var tipList = ''; var deepBtn = ''; var newIndex = []; var daAnIndex = null; for(var i = 0; i <= 4; i++) { tipList += '<li class="true' + (i + 1) + '"><div class="time"></div><p class="timeIcon"><img src="img/game4/tiemIcon1.png" /></p><p class="kuang" id="kuang1"><img src="img/game4/kuangbefore.png" /></p>' + '<div class="year"></div></li>' newTiemArr.push(timeArrNew[newTitleArr[i]]) newIndex.push(newTitleArr[i]) deepBtn += '<li class="textName" data-id=' + newTitleArr[i] + ' style="' + textNameArr[i] + '"><p class="btnText">' + writeArr[newTitleArr[i]] + '</p></li>' } var newTiemArr1 = newTiemArr.sort();
$('.tipList ul').html(tipList) $('.contList ul').html(deepBtn) var showTimeArr = []; //取前五个元素并按照时间排序 for(var i = 0; i < 5; i++) { showTimeArr[getArrayIndex(oldtimeArr, timeArr[i])] = timeArr[i]; } for(var i = 0; i < showTimeArr.length; i++) { if(!showTimeArr[i]) { showTimeArr.splice(i, 1); i = i - 1; } }
var count = 0;
//点击答案 var trueNums = 0 console.log(trueArr) $('.contList ul').eq(trueNums).css('display', 'flex'); $('.tipList>ul>li').eq(trueNums).css('display', 'block'); $('.tipList>ul>li').eq(trueNums).find('.time').attr('id', 'dataNums'); $('.contList ').on('touchstart', 'li', function(e) { console.log(e) var idIndex = e.currentTarget.dataset.id;
for(var i = 0; i <= timeArrNew.length; i++) { if(timeArrNew[i] == newTiemArr1[trueNums]) { console.log(i) daAnIndex = i } } if(daAnIndex == idIndex) { //正确 var ans = '<p class="text">' + contArr[daAnIndex] + '</p><p class="daAn">' + writeArr[daAnIndex] + '</p>' $('.tipList li').eq(trueNums).append(ans) var trueAudio = document.getElementById('trueAudio'); trueAudio.play(); audioAutoPlay('trueAudio') $('.tipList>ul>li').eq(trueNums).find('.daAn').fadeIn(1000); $('.tipList>ul>li').eq(trueNums).find('.kuang').css('visibility', 'hidden'); $('.tipList>ul>li').eq(trueNums).find('.text').slideDown(1000); $(this).fadeOut(1000) setTimeout(function() { trueNums++; $('.tipList>ul>li').eq(trueNums).css('display', 'block'); // $('.contList ul').eq(trueNums).css('display', 'flex').siblings().css('display', 'none'); //更换选项 if(trueNums<5) { deepBtn = ''; var newIndexArr = []; var ansIndex = null; for(var i = 0; i <= timeArrNew.length; i++) { if(timeArrNew[i] == newTiemArr1[trueNums]) { console.log(i) ansIndex = i } } newIndexArr.push(ansIndex); randArr(nameArr) for(var n = 0; n < nameArr.length; n++) { if(newIndexArr.length < 5 && newIndexArr[0] != nameArr[n]) { newIndexArr.push(nameArr[n]) }
} randArr(newIndexArr); for(var i = 0; i <= 4; i++) { deepBtn += '<li class="textName" data-id=' + newIndexArr[i] + ' style="' + textNameArr[i] + '"><p class="btnText">' + writeArr[newIndexArr[i]] + '</p></li>' } $('.contList ul').html(deepBtn) } //更换选项end $('.tipList>ul>li').eq(trueNums).find('.time').attr('id', "dataNums"); for(var i = 0; i <= 4; i++) { console.log(i + '==' + trueNums) if(i != trueNums) {
$('.tipList>ul>li').eq(i).find('.time').attr('id', ""); $('.tipList>ul>li').eq(i).find('.time').find('.dataNums').remove(); $('.tipList>ul>li').eq(i).find('.time').css({ 'background': 'url(img/game4/topIcon.png) no-repeat', 'background-size': '100% 100%' })
} } console.log(trueNums + 'trueNums++;') yearTime(newTiemArr1[trueNums]); $('.tipList>ul>li').eq(trueNums - 1).find('.year').css('display', 'flex'); var times = newTiemArr1[trueNums - 1].toString().split(''); var timeSpan = ''; $.each(times, function(i, item) { timeSpan += '<span>' + item + '</span>' }) $('.tipList>ul>li').eq(trueNums - 1).find('.year').html(timeSpan) }, 1000)
if(trueNums == 4) { setTimeout(function(){ $('.contList ul li').fadeOut(500) },1000) setTimeout(function() { // alert("游戏结束"); clearInterval(timeLength); // console.log(time) 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(); $('.deepBtn').fadeIn()
showSate = true; maskState()
function maskState() { if(showSate) { $('.imgIcon').animate({ 'top': '0', "right": '8%', 'width': '.98rem', 'height': '1.24rem' }, 2000)
function yincang() { $('.titleIcon ul li').eq(3).css({ 'visibility': 'hidden' }) } setTimeout('yincang()', 2000) } } $('.deepBtn').click(function() { var url = location.href.split('?')[1]; window.location.href = "game5.html?" + url }) $('.close').on('touchstart', function() { $('.mask').fadeOut(); $('.success .sucImg div').fadeOut(); $('.success .close').fadeOut(); }) }, 2000) }
} else { var falseAudio = document.getElementById('falseAudio'); falseAudio.play(); audioAutoPlay('falseAudio') // }
})
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; }
function getArrayIndex(arr, obj) { var i = arr.length; while(i--) { if(arr[i] === obj) { return i; } } return -1; }</script>
|
