红包

在网络中，常常有人发一些虚假的红包，有此只是玩笑，但有些却可以盗取你的个人信息，下面我做了一个虚假的红包

由上图可见，这有一个红包的样子，然后当你点击的时候，它会抖动，然后中间有抽奖会在运动，最后随机一个奖项

不管你信还是不信，可能都会点一下领取，然后将到了填写信息的地方
从上面可以看到，这里一共分为三步，红包，抽奖和领取
首先是红包和抽奖的界面

    <div class="content" id="content" style="display:block;">
        <img class="img1" id="img1" style="display:block;width:300px;height:460px;" src="img/red-w.png" />
        <img class="img2" id="img2" style="display:none;" src="img/red-y.png" />
        <p class="discon" id="discon" style="display:block;">拆红包</p>
        <div class="lott" id="lott" style="display:none;">
            <ul class="lottery" id="lottery" style="top:0px;">
                <li>特等奖</li>
                <li>一等奖</li>
                <li>二等奖</li>
                <li>三等奖</li>
                <li>安慰奖</li>
            </ul>
        </div>
        <div class="write" id="write" style="display:none;"><h1>&nbsp;&nbsp;&nbsp;&nbsp;恭喜您！</h1><br><h5>获得</h5></div>
        <hr />
        <button class="ningqu" id="ningqu" style="display:none">领取</button>
    </div>

抽奖还要运用一些JavaScript

    var one = [0, -40, -80, -120, -160];
    var index = Math.floor(Math.random() * one.length);
    var toplist = parseInt(one[index]);
    var drawli;
    switch (toplist) {
        case 0:
            drawli = "特等奖";
            break;
        case -40:
            drawli = "一等奖";
            break;
        case -80:
            drawli = "二等奖";
            break;
        case -120:
            drawli = "三等奖";
            break;
        case -160:
            drawli = "安慰奖";
            break;
    }
    draw.innerHTML += "<br>" + drawli;

这里将随机一个奖项，然后领取界面会相对应的进行改变，将领取的奖项显示在领取页面
领取界面就比较简单了，一个form表单

 <div class="container" id="container" style="display:none;">
    <h3 class="h3 p-3 mb-3 text-center" id="draw">恭喜您，填写信息可领取</h3>
    <form id="news">
        <div class="form-group">
            <label for="">姓名：</label>
            <input type="text" class="form-control" id="input1" placeholder="Enter name">
            <small id="emailHelp" class="form-text text-muted">请如实填写，否则快递出错，将领取不到奖品</small>
        </div>
        <div class="form-group">
            <label for="">身份证：</label>
            <input type="password" class="form-control" id="input2" placeholder="Password">
            <small id="" class="form-text text-muted">将核对身份信息，确保无误</small>
        </div>
        <div class="form-group">
            <label for="">地址：</label>
            <input type="text" class="form-control" id="input3" placeholder="xx省xx市xx镇xx">
            <small id="" class="form-text text-muted">请如实填写，否则快递出错，将领取不到奖品</small>
        </div>
        <div class="form-group">
            <label for="">电话号码：</label>
            <input type="text" class="form-control" id="input4" placeholder="Enter">
            <small id="" class="form-text text-muted">请如实填写，否则快递出错，将领取不到奖品</small>
        </div>
        <div class="form-group">
            <label for="exampleInputEmail1">Email：</label>
            <input type="email" class="form-control" id="input5" placeholder="Email">
            <small id="" class="form-text text-muted">请如实填写，方便日后联系</small>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="input6">
            <label class="form-check-label text-danger" for="exampleCheck1">请再确认一遍</label>
        </div>
        <button type="submit" class="btn btn-primary" id="ning" onclick="huoqu();">提交</button>
        <button type="" class="btn btn-warning ml-3" id="fanhua">返回</button>
    </form>

然后是JavaScript，我这里判断只要输入不为空便可以通过

function huoqu() {
            var input1 = $("#input1").val();
            var input2 = $("#input2").val();
            var input3 = $("#input3").val();
            var input4 = $("#input4").val();
            var input5 = $("#input5").val();
            var input6 = $("#input6").val();
			if (
				input1 != undefined && input1 != '' && 
				input2 != undefined && input2 != '' && 
				input3 != undefined && input3 != '' && 
				input4 != undefined && input4 != '' && 
				input5 != undefined && input5 != '' && 
				input6 != undefined && input6 != ''
				) {
				var a = "提交成功，将在15个工作日内送达,";
				var b = "感谢亲的大力支持";
				alert(a + b);
			} else {
				alert("请填写完整！");
			}
        }

填写完整后

这样你的信息便盗取了