红包
在网络中，常常有人发一些虚假的红包，有此只是玩笑，但有些却可以盗取你的个人信息，下面我做了一个虚假的红包
由上图可见，这有一个红包的样子，然后当你点击的时候，它会抖动，然后中间有抽奖会在运动，最后随机一个奖项
不管你信还是不信，可能都会点一下领取，然后将到了填写信息的地方
从上面可以看到，这里一共分为三步，红包，抽奖和领取
首先是红包和抽奖的界面
<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> 恭喜您！</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("请填写完整！");
}
}
填写完整后
这样你的信息便盗取了