模擬發放紅包效果程式碼例項

antzone發表於2017-04-13

本章節分享一段程式碼例項，它實現了模擬發放紅包的功能。

感興趣的朋友可以做一下參考，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章