Web网页开发之24点小游戏（下）1.设置全局变量 2.设置倒计时 3.旋转函数 4.图片初始化 5.传递图片 6.点击

参与拿奖：本文已参与「新人创作礼」活动，一起开启掘金创作之路
PS：完整代码见文末

1.设置全局变量

var ac=0; //记录用户回答正确的数量
var total=0; //记录生成数据总量
var isNext=true; //是否生成下一个数据
var isNext1=true;//用于判断是否生成下一个数据
var dic={'A1':1,'A2':1,'A3':1,'A4':1,'21':2,'22':2,'23':2,'24':2,'31':3,'32':3,'33':3,'34':3,'41':4,'42':4,'43':4,'44':4,'51':5,'52':5,'53':5,'54':5,'61':6,'62':6,'63':6,'64':6,'71':7,'72':7,'73':7,'74':7,'81':8,'82':8,'83':8,'84':8,'91':9,'92':9,'93':9,'94':9,'101':10,'102':10,'103':10,'104':10,'J1':11,'J2':11,'J3':11,'J4':11,'Q1':12,'Q2':12,'Q3':12,'Q4':12,'K1':13,'K2':13,'K3':13,'K4':13}; //初始化字典
var value; //存放自动生成的数据
var isFalse=false; //不可以通过运算获得24点
var result=""; //记录所有可能结果
var nickname; //存放用户昵称
var isShow=false; //用于记录用户是否查看答案
var scoreResult=""; //记录用户得分
var click=0;//设置music按钮的点击次数（%3==0表示第一首，==1表示第二首;==2表示停止播放）
var modetime=0; //用户选择的模式
var Nowtime; //实时获取当前倒计时时间
var nowT;//时间戳
var showT=0;//表示界面动画首次出现
var b_click=0;//记录背景切换按钮的点击次数
var ctime;//监测图片停留时间
var c_time;//表示图片加载后的时间

2.设置倒计时

//设置倒计时
function getRtime(){
    nowT=new Date();
    nowT=nowT.getTime()-Nowtime;
    //alert(modetime);
    var m=Math.floor(nowT/1000/60%60);
    var s=Math.floor(nowT/1000%60);

    //如果时间超过所选模式，就停止作答
    //alert(m==modetime);
    document.getElementById("t_m").innerHTML=m+"分";
    document.getElementById("t_s").innerHTML=s+"秒";

    if(m==modetime){ //如果到了时间就显示提示信息
        s_c+=1;
        if(s_c==1){
            alert("Your time is out!");
        }
        //alert("Your time is out!");
        //alert(modetime);
        Show();//直接显示答案

    }
}

3.旋转函数

//旋转函数
function Trans(){
        //设置旋转
        document.getElementById('i1').className="test_f";
        document.getElementById('i2').className="test_f";
        document.getElementById('i3').className="test_f";
        document.getElementById('i4').className="test_f";

        document.getElementById('i5').className="test_t";
        document.getElementById('i6').className="test_t";
        document.getElementById('i7').className="test_t";
        document.getElementById('i8').className="test_t";
}

4.图片初始化

function Origin(){
        var classi1= document.getElementById('i1').getAttribute("class");
        var classi2= document.getElementById('i2').getAttribute("class");
        var classi3= document.getElementById('i3').getAttribute("class");
        var classi4= document.getElementById('i4').getAttribute("class");
        var classi5= document.getElementById('i5').getAttribute("class");
        var classi6= document.getElementById('i6').getAttribute("class");
        var classi7= document.getElementById('i7').getAttribute("class");
        var classi8= document.getElementById('i8').getAttribute("class");

        classi8=classi8.replace("test_t","");
        document.getElementById('i8').setAttribute("class",classi8);
        classi7=classi7.replace("test_t","");
        document.getElementById('i7').setAttribute("class",classi8);
        classi6=classi6.replace("test_t","");
        document.getElementById('i6').setAttribute("class",classi8);
        classi5=classi5.replace("test_t","");
        document.getElementById('i5').setAttribute("class",classi8);
        classi4=classi4.replace("test_f","");
        document.getElementById('i4').setAttribute("class",classi8);
        classi3=classi3.replace("test_f","");
        document.getElementById('i3').setAttribute("class",classi8);
        classi2=classi2.replace("test_f","");
        document.getElementById('i2').setAttribute("class",classi8);
        classi1=classi1.replace("test_f","");
        document.getElementById('i1').setAttribute("class",classi8);
}

5.传递图片

function To(){ //将js生成数据传递到页面上
    var arr=['A1','21','31','41','51','61','71','81','91','101','J1','Q1','K1','A2','22','32','42','52','62','72','82','92','102','J2','Q2','K2','A3','23','33','43','53','63','73','83','93','103','J3','Q3','K3','A4','24','34','44','54','64','74','84','94','104','J4','Q4','K4'];
    var count=4
    if(isNext){
        value=getRandomArrayElements(arr,count);
        ctime=new Date();//更新图片到的时间
        ctime=ctime.getTime();
        Cards(value);//将图片加载到html中
        Nowtime=new Date();//当前时间
        Nowtime=Nowtime.getTime();//获取当前时间戳
        s_c=0; //清零限制时间记录
    }
    isNext=false;//调用完需要设置
}

6.点击播放音乐

//播放音乐
function  onMusic(){
    click+=1;
    var myMusic=document.getElementById("music");
    if(click%3==0){
        document.getElementById("music").src="../../static/others/musics/lucky.mp3";
        myMusic.play();
    }
    else if(click%3==1){
        document.getElementById("music").src="../../static/others/musics/comethru.mp3";
        myMusic.play();
    }else{
        //关闭
        myMusic.pause()
        myMusic.load();
    }

}

7.点击改变背景

function onChange(){
    b_click+=1;
    var background=document.getElementById("body");
    if(b_click%5==0){
        document.getElementById("body").style.backgroundColor="lightblue";
    }else if(b_click%5==1){
        document.getElementById("body").style.backgroundColor="blue";
    } else if(b_click%5==2){
        document.getElementById("body").style.backgroundColor="green";
    }else if(b_click%5==3){
        document.getElementById("body").style.backgroundColor="white";
    }else{
        document.getElementById("body").style.backgroundColor="pink";
    }
}

8.检查函数

//检查数据
function Check(){
    var content=document.getElementById('content').value;
    var actarget=false;
    Twentyfour(value);
    if((content=='false')||(content=="False")){
        if(isNext1){
            if(isFalse){
                actarget=true;
            }
        }
    }
    else{
        var i=0;
        var tempV;
        tempV=content;

        tempV=tempV.replace(/A/g,"1");//替换所有值
        tempV=tempV.replace(/J/g,"11");
        tempV=tempV.replace(/Q/g,"12");
        tempV=tempV.replace(/K/g,"13");

        //捕捉异常
        try{
        var temp=eval(tempV);
        }catch{
            msg="please enter the correct equation.";
            alert(msg);
            return;//如果检查到输入错误信息，就显示提示信息，并停止继续执行
        }

        if(temp==undefined){
            alert("please enter the correct equation.");
            return;
        }

        if(Math.abs(temp-24)<1e-5){
            actarget=true;
        }
    }

    if(actarget){
        ac+=1;
        if(isShow){
            ac-=1;
            alert("You have saw the answer! "+nickname);
        }
        else{
            alert("Congratulations! "+nickname);
        }
    }
   else{
        alert("Cheer Up! "+nickname);
   }
   isNext1=false;
}

9.其他按钮

//清空
function Reset(){
   document.getElementById('content').value="";

}

//下一个
function Next(){
    isShow=false;//设置答案为未查看
    total+=1; //总数加一
    document.getElementById("result").value=""; //清空上一题答案
    document.getElementById("content").value=""; //清空上一题自己的作答结果
    isNext=true;//修改变量值
    isNext1=true;//修改变量值
    To();
}

//展示结果,展示当前结果
function Show(){
    //alert(value);
    isShow=true;
    Twentyfour(value);
    if(isFalse){
       document.getElementById('result').value="Nothing!";
    }
    else{
      result=result+"Find All!\n";
      document.getElementById('result').value=result;
    }
    result="";
    }

//得分
function Score(){
    var scoreResult="";
    scoreResult=scoreResult+"Total: "+total.toString()+" Ac: "+ac.toString()+" Accuracy Rate: "+(ac/total).toString();
    document.getElementById('score').value=scoreResult;
}

//退出
function Quit(){
    if(confirm("Are you sure to quit?")){
        window.opener=null;
        window.open('','_self');
        window.close();
    }
    else{}
}

Web网页开发之24点小游戏（下）

1.设置全局变量

2.设置倒计时

3.旋转函数

4.图片初始化

5.传递图片

6.点击播放音乐

7.点击改变背景

8.检查函数

9.其他按钮

10.完整代码获取链接： github仓库自取