~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>抢红包</title>
<style>
html, body, div {
margin: 0;
padding: 0;
}
body {
background: #EAEAEA;
font: 16px/1.8 "微软雅黑";
padding-bottom: 20px
}
input {
margin: 0;
display: inline-block;
border: 1px solid #ddd;
padding: 4px 2px;
font-size: 16px;
font-family: "微软雅黑";
margin-right: 5px;
}
input:focus {
border-color: #3C9BD1;
outline: none;
}
.wrap, .list {
margin: 50px auto;
width: 300px;
}
.title {
font-size: 42px;
color: #464646;
text-align: center;
}
.line {
height: 40px;
line-height: 40px;
text-align: center;
}
.btn {
display: block;
background: #3C9BD1;
color: #fff;
line-height: 40px;
height: 40px;
text-align: center;
width: 200px;
margin: 0 auto;
margin-top: 50px;
text-decoration: none;
transition: all .3s linear;
border-radius: 2px;
}
.btn:hover {
opacity: .9;
}
.list {
width: 500px;
border: 1px solid #DBDBDB;
padding: 10px;
BACKGROUND: #F5F5F5;
text-align: center;
}
.list p span {
color: red;
padding: 0 8px;
}
.list p:empty {
background: #000000;
}
.list:empty {
display: none;
}
.link {
position: fixed;
height: 20px;
font-size: 12px;
color: #999;
text-align: center;
width: 100%;
bottom: 0;
line-height: 20px;
margin: 0;
padding: 0;
background: #EAEAEA;
padding: 5px 0;
}
.link a {
font-size: 12px;
color: #999;
}
</style>
</head>
<body>
<h1 class="title">javascript抢红包</h1>
<div class="wrap">
<div class="line">红包个数：<input type="text" name="packetNumber" id="totalPeople"
onkeyup="this.value=this.value.replace(/\D/g,'')"
onafterpaste="this.value=this.value.replacze(/\D/g,'')" maxlength="3">个
</div>
<div class="line">总 金 额：<input type="text" name="money" id="totalAmount"
onkeyup="if(isNaN(value))execCommand('undo')"
onafterpaste="if(isNaN(value))execCommand('undo')" maxlength="7">元
</div>
<div class="line"><a class="btn" onclick="func1()">发红包</a></div>
</div>
<script>
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
function func1() {
var totalAmount = document.getElementById("totalAmount")
var totalPeople = document.getElementById("totalPeople")
var amount = totalAmount.value
var people = totalPeople.value
var p = new Array(parseInt(people) + 1);
// 第一个数是0
p[0] = 0;
// 最后一个数是100
p[p.length - 1] = parseInt(amount);
//生成9个数随机节点并保留两位小数
for (var i = 1; i < p.length - 1; i++)
{
p[i] = parseFloat((amount * Math.random()).toFixed(2));
}
// 冒泡排序对9个点进行排序
p.sort(compare);
console.log(p)
//红包金额赋值给数组money
var money = new Array(p.length - 1);
var sum = 0;
// 后一项减前一项的差值为红包金额
for (var n = 0; n < p.length - 1; n++) {
var mon = parseFloat((p[n + 1] - p[n]).toFixed(2));
money[n] = mon;
sum += mon;
}
console.log(money)
for (var i = 0; i < people; i++) {
var div = document.createElement("div");
div.innerHTML = "第"+parseInt(i+1)+"个红包：" + money[i] + "元"
div.className = "hongbao";
div.style.textAlign="center";
div.style.marginTop = '0px';
div.style.marginRight = 'auto';
div.style.marginBottom = '0px';
div.style.marginLeft = 'auto';
document.body.appendChild(div)
}
}
</script>
</body>
</html>
~~~
