模拟发放红包效果代码实例
分类：实例代码
本章节分享一段代码实例，它实现了模拟发放红包的功能。
感兴趣的朋友可以做一下参考，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
<div class="wrap">
<div class="line">红包个数：<input type="text" name="packetNumber" value="5" maxlength="10">个</div>
<div class="line">总 金 额：<input type="text" name="money" value="5" maxlength="10">元</div>
<div class="line"><a class="btn" href="javascript:;">发红包</a></div>
</div>
<div class="list"></div>
<script>
"use strict";
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor)
descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps)
defineProperties(Constructor.prototype, protoProps);
if (staticProps)
defineProperties(Constructor, staticProps);
return Constructor;
}
}();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var MoneyPacket = function () {
function MoneyPacket(packNumber, money) {
_classCallCheck(this, MoneyPacket);
this.min = 0.01;
this.flag = true;
this.packNumber = packNumber;
this.money = money;
if (!this.checkPackage()) {
this.flag = false;
return {
"flag": this.flag
};
}
}
_createClass(MoneyPacket, [{
key: "checkPackage",
value: function checkPackage() {
if (this.packNumber == 0) {
alert("至少需要设置1个红包");
return false;
}
if (this.money <= 0) {
alert("红包总金额不能小于0");
return false;
}
if (this.packNumber * this.min > this.money) {
alert("单个红包金额不可低于0.01元");
return false;
}
return true;
}
}]);
return MoneyPacket;
}();
var getRandomMoney = function getRandomMoney(packet) {
if (packet.packNumber == 0) {
return;
}
if (packet.packNumber == 1) {
var _lastMoney = Math.round(packet.money * 100) / 100;
packet.packNumber--;
packet.money = 0;
return _lastMoney;
}
var min = 0.01,
max = packet.money / packet.packNumber * 2,
money = Math.random() * max;
money = money < min ? min : money;
money = Math.floor(money * 100) / 100;
packet.packNumber--;
packet.money = Math.round((packet.money - money) * 100) / 100;
return money;
};
(function () {
var oBtn = document.querySelector(".btn");
var oList = document.querySelector(".list");
oBtn.onclick = function () {
var packetNumber = +document.querySelector("input[name=packetNumber]").value;
var money = +document.querySelector("input[name=money]").value;
var str = "";
var packet = new MoneyPacket(packetNumber, money),
num = packet.flag && packet.packNumber || 0;
console.log("========================================================================");
for (var i = 0; i < num; i++) {
var _pack = getRandomMoney(packet);
str += "<p>第<span>" + i + "</span>个红包:: <span>" + _pack.toFixed(2) + "</span>元 ==剩余红包:: <span>" + packet.money.toFixed(2) + "</span> 元<p>";
console.log("第", i, "个红包::", _pack.toFixed(2), "元 ==剩余红包::", packet.money.toFixed(2), "元");
}
str !== "" && (oList.innerHTML = str);
};
})();
</script>
</body>
</html>
模拟发放红包效果代码实例，这样的场景在实际项目中还是用的比较多的，关于模拟发放红包效果代码实例就介绍到这了。
模拟发放红包效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu