简单彩票中奖实现-Demo

要求:

实现一个简单彩票中奖,界面有7个输入框和一个按钮,当点击按钮实现将7个输入框的值与系统产生的7个随机值进行匹配,只要有一个不匹配则弹出没有中奖,否则弹出中奖啦.

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    input{
       width: 30px;
        height: 30px;
    }
</style>
<body>

<div>
    请输入7位数:
    <!--input[type="text"]#idtxt_m$*7    这段代码是快速生成7行input标签id顺序产生
    注意:1.按tab时要在代码最后按
         2.id后面直接写id的名字,不用写id=xx-->

    <input type="text" id="idtxt_m1" value="">
    <input type="text" id="idtxt_m2" value="">
    <input type="text" id="idtxt_m3" value="">
    <input type="text" id="idtxt_m4" value="">
    <input type="text" id="idtxt_m5" value="">
    <input type="text" id="idtxt_m6" value="">
    <input type="text" id="idtxt_m7" value="">
    <br>
    <button id="btn_score">开始兑奖</button>

</div>
<script type="text/javascript">
//     var arr=[1,2.3];
//     var arr2=new Array();//上面两个等价
//
// arr2.push(11)
//     console.log(arr2);

    var win=[];//定义一个数组获取随机值
    for (var i=0;i<7;i++){
        var num=parseInt(Math.random()*10);//这里是产生0到9(包含0包含9)中的值
        win.push(num);//向数组中添加到获取到的随机值
    }
    console.log(win);

    //用户输入的号码

    var  btn=document.querySelector('#btn_score');//
    btn.onclick=function () {//添加按钮点击事件,要求点击按钮,实现用户输入的值与随机产生的值都相等
        var pipei=[];//这个数组是用来接收7个输入框的值
        var inputs=document.querySelectorAll('[type="text"]');//querySelectorAll函数是一次性接收符合条件的控件
        // console.log(inputs[2].value);

        for (var i=0;i<inputs.length-1;i++){//这个循环将输入框的值添加到数组中
            pipei[i]=inputs[i].value;//将输入框的值添加到数组中
            console.log(`win[${i}]是${win[i]},pipei[${i}]是${pipei[i]}`);
        if (win[i]!=pipei[i]){
            return alert("没有中奖");//如果找到一个不匹配,就提示不中奖
        }
        }
alert("中奖啦");//如果每个都相等,则到循环执行完再弹出中奖啦
    }


</script>
</body>
</html>

简单彩票中奖实现-Demo

要求:

代码:

猜你喜欢