HTML5教程之年终摇号抽奖小程序

HTML5教程之年终摇号抽奖小程序

功能说明：三位数的随机号码，并可过滤重复号码的网页小程序，兼容PC，手机。使用技术：html、css、jquery、bootstrap

实现代码

年终摇号抽奖

.num {

font-size: 5rem;

font-weight: bold;

}

年终摇号抽奖

开 始

停 止

清空缓存

var num1 = 0, num2 = 0, num3 = 0;

var numMin = 1, numMax = 999;

var list = [];

var index = 0;

var numInterval;

var listHistory = [];

$(function () {

$(“#btnStart”).click(function () {

onStart();

});

$(“#btnEnd”).click(function () {

onEnd();

});

$(“#btnClear”).click(function () {

localStorage.removeItem(“listHistory”);

listHistory = [];

showMsg(“缓存已清空！”);

$(“#num1”).html(0);

$(“#num2”).html(0);

$(“#num3”).html(0);

});

});

function onStart() {

numMin = parseInt($(“#numMin”).val());

numMax = parseInt($(“#numMax”).val());

list = [];

//history

if (localStorage.getItem(“listHistory”) != null) {

listHistory = JSON.parse(localStorage.getItem(“listHistory”));

// console.log(“listHistory:”+listHistory);

}

for (var i = numMin; i

if (listHistory.length > 0 && listHistory.find(p => (p == i))) {

continue;

}

list.push(i);

}

// console.log(“list:”+list);

if (list.length == 0) {

showMsg(“抽奖已经结束！”);

return;

}

numInterval = setInterval(onRusult, 50);

$(“#btnStart”).attr(“disabled”, “disabled”);

$(“#btnEnd”).removeAttr(“disabled”);

}

function onEnd() {

clearInterval(numInterval);

$(“#btnStart”).removeAttr(“disabled”);

$(“#btnEnd”).attr(“disabled”, “disabled”);

listHistory.push(parseInt(list[index]));

localStorage.setItem(“listHistory”, JSON.stringify(listHistory));

}

function onRusult() {

index = parseInt(Math.random() * list.length);

var result = parseInt(list[index]);

//简单拆分数字 最大值999 暂时支持3位数 可扩展

if (result >= 100) {

num1 = result.toString().substr(0, 1);

num2 = result.toString().substr(1, 1);

num3 = result.toString().substr(2, 1);

} else if (result >= 10) {

num1 = 0;

num2 = result.toString().substr(0, 1);

num3 = result.toString().substr(1, 1);

} else {

num1 = 0;

num2 = 0;

num3 = result.toString().substr(0, 1);

}

$(“#num1”).html(num1);

$(“#num2”).html(num2);

$(“#num3”).html(num3);

}

function showMsg(msg) {

$(“#msg-error”).html(msg);

$(“#msg-error”).show();

setTimeout(function () {

$(“#msg-error”).hide();

}, 2000);

}

运行效果