这个量真的大了,想要素材私信我吧
<html>
<body>
<div id="div1" style="left:30%;top:10%;position:absolute;margin:auto;">
<p id="countryName" style="font-size:20px"></p>
<img id="flagImg" style="width:130px;height:120px">
</div>
<button id="nextBtn" onclick="showFlag()" style="left:42%;top:28%;position:absolute;margin:auto;font-size:15px">下一个</button>
<button id="startBtn" onclick="startGame()" style="left:42%;top:32%;position:absolute;margin:auto;font-size:15px">开始练习</button>
<div id="btnDiv" style="left:28%;top:40%;position:absolute;margin:auto">
<button id="div_0"></button><button id="div_1"></button><button id="div_2"></button><button id="div_3"></button>
</div>
<script>
var countryList = [];
var currentCountry = "";
function initGame(){
countryList.push("中国","美国","法国","英国","德国","澳大利亚","韩国","加拿大","巴西","缅甸","俄罗斯","瑞士");
countryList.push("新西兰","日本","意大利","古巴","埃及","荷兰","丹麦","爱尔兰","西班牙","斐济","朝鲜","墨西哥");
countryList.push("冈比亚","马来西亚","利比亚","希腊","瑞典","伊朗","南非","印度","波兰","秘鲁","新加坡","圭亚那");
countryList.push("哥伦比亚","智利","以色列","格鲁吉亚","冰岛","奥地利","菲律宾","捷克","肯尼亚","梵蒂冈","挪威","葡萄牙");
countryList.push("芬兰","阿根廷","蒙古","乌克兰","白俄罗斯","刚果","匈牙利","不丹","波斯尼亚和黑塞哥维那","爱沙尼亚","利比里亚","玻利维亚");
countryList.push("委内瑞拉","马里","阿富汗","苏丹","立陶宛","卢旺达","阿尔及利亚","斯洛文尼亚","海地","乌干达","赞比亚","克罗地亚");
countryList.push("坦桑尼亚","巴基斯坦","尼日利亚","哈萨克斯坦","贝宁","多哥","基里巴斯","图瓦卢","特立尼达和多巴哥","比利时","莫桑比克","印度尼西亚");
countryList.push("布基纳法索","日尼尔","罗马尼亚","摩纳哥","哥斯达黎加","塞尔维亚","土耳其","加蓬","南苏丹","泰王国","列支敦士登","加纳");
countryList.push("也门","尼泊尔","赤道几内亚","圣卢西亚","塞拉利昂","索马里","乍得","斯洛伐克","牙买加","密克罗尼西亚","越南","黑山");
countryList.push("毛里塔尼亚","塞内加尔","卢森堡","科特迪瓦","摩尔多瓦","汤加","莱索托","吉尔吉斯斯坦","保加利亚","阿联酋","波多黎各","洪都拉斯");
countryList.push("马拉维","科摩罗","津巴布韦","纳米比亚","厄瓜多尔","马达加斯加","老挝","科威特","安哥拉","帕劳","沙特阿拉伯","几内亚比绍");
countryList.push("几内亚","瓦努阿图","乌拉圭","毛里求斯","巴哈马","巴勒斯坦","土库曼斯坦","马尔代夫","科索沃","马绍尔群岛","亚美尼亚","瑙鲁");
countryList.push("尼加拉瓜","多米尼克","圣马力诺","乌兹别克斯坦","博茨瓦纳","喀麦隆","塔吉克斯坦","厄立特里亚国","中非共和国","佛得角","阿曼苏丹国","伯利兹");
countryList.push("伊拉克","马其他","巴拉圭","拉脱维亚","突尼斯","埃塞俄比亚","格林纳达","马其顿","塞浦路斯共和国","安提瓜和巴布达","刚果共和国","阿尔巴尼亚");
countryList.push("东帝汶民主共和国","约旦哈希姆王国","苏里南","巴拿马","斯里兰卡","黎巴嫩","摩洛哥","斯威士兰","叙利亚","安道尔","巴巴多斯","孟加拉");
countryList.push("布隆迪共和国","圣基茨和尼维斯","危地马拉","塞舌尔","吉布提","阿塞拜疆","卡塔尔国","多米尼加","柬埔寨","萨摩亚","所罗门群岛","巴布亚新几内亚");
countryList.push("萨尔瓦多","巴林王国","文莱达鲁萨兰国","圣文森特和格林纳丁斯","圣多美和普林西比");
showFlag();
}
function guessCountry(temCountryList){
//绑定按钮点击事件
for(var i=0;i<temCountryList.length;i++){
var btnDiv = document.getElementById("div_"+i);
(function(val){
btnDiv.onclick=function(){
//重新获取元素
var divs = document.getElementById("div_"+val);
if(divs.innerText == currentCountry){
//猜对了,显示下一个国旗
showFlag();
showCountry();
new Audio("sound/正确.mp3").play();
}else{
new Audio("sound/错误.mp3").play();
}
}
})(i);
}
}
function showFlag(){
//生成随机数,显示国旗
var randomNum = Math.floor(Math.random()*(countryList.length));//从0开始
document.getElementById("countryName").innerText = countryList[randomNum];
document.getElementById("flagImg").src="img/"+countryList[randomNum]+".jpg";
currentCountry = countryList[randomNum];
if(document.getElementById("startBtn").innerText == "开始练习"){
document.getElementById("countryName").style.visibility="visible";
}else{
document.getElementById("countryName").style.visibility="hidden";
}
}
function startGame(){
var startBtn = document.getElementById("startBtn");
if(startBtn.innerText == "开始练习"){
startBtn.innerText = "休息一下";
document.getElementById("countryName").style.visibility="hidden";
}else{
startBtn.innerText = "开始练习";
document.getElementById("countryName").style.visibility="visible";
}
showCountry();
}
function showCountry(){
//先获取当前国家,再随机抽取另外三个国家,放在一起生成按钮
var temCountryList = randomCountry(currentCountry,4);
for(var i=0;i<temCountryList.length;i++){
var div = document.getElementById("div_"+i);
div.innerText=temCountryList[i];
}
//绑定点击事件
guessCountry(temCountryList);
}
//返回随机国家
function randomCountry(currentCountry,length){
var newList = new Array();
newList.push(currentCountry);
while(newList.length != length){
var countryName;
while(newList.indexOf(countryName = returnRandomCountry()) == -1){
newList.push(countryName);
break;
}
}
//删除掉第一个元素重新随机插入
newList.splice(0,1);
newList.splice(Math.floor(Math.random()*(length)),0,currentCountry);
console.log(newList);
return newList;
}
//随机抽取list的元素
function returnRandomCountry(){
return countryList[Math.floor(Math.random()*(countryList.length))];
}
//显示国旗
initGame();
</script>
</body>
</html>