简单的JS抽奖范例
操作DOM和取随机数的简单应用，截图如下：
代码如下：
<html>
<head>
<title>抽选</title>
</head>
<body>
<h3>抽选对象</h3>
请输入要抽选的对象：<input type="button" onclick="javascript:add()" value="添加" />
<div id="usersDiv">
</div>
<input type="button" onclick="javascript: lottery();" value="抽选" />
<hr>
<h3>抽选结果</h3>
<span id="memo"></span><br/>
<span id="user_id"></span>
<script language="javascript">
var users = [];
var usersDiv = document.getElementById("usersDiv");
add();
function lottery() {
for(i = users.length - 1; i >= 0; --i) {
if (users[i].childNodes[0].value == '') {
remove(users[i]);
}
};
var num = users.length;
if (num <= 0) {
alert('请至少输入一位候选人!');
return;
}
var randIndex = Math.ceil(Math.random() * num);
document.getElementById("memo").innerText = "共有" + num + "位候选人。";
document.getElementById("user_id").innerHTML = "中奖者是编号" + randIndex + "的<strong>" + users[randIndex-1].childNodes[0].value + "</strong>。";
}
function remove(node) {
usersDiv.removeChild(node);
var idx = 0;
for (i = 0; i < users.length; ++i) {
if (users[i] == node) {
idx = i;
break;
}
}
for (i = idx; i < users.length - 1; ++i) {
users[i] = users[i + 1];
}
users.pop();
}
function add() {
var num = users.length;
var subDiv = document.createElement("div");
usersDiv.appendChild(subDiv);
var txt =document.createElement("input");
txt.type="text";
txt.size="15";
subDiv.appendChild(txt);
if (users.length > 0) {
var btn = document.createElement("input");
btn.type="button";
btn.value="×";
btn.onclick=function() {
remove(subDiv);
}
subDiv.appendChild(btn);
}
users.push(subDiv);
txt.focus();
}
</script>
</body>
</html>
- 无匹配
评论 (0)
