js仿微信搶紅包功能

發(fā)布時間：2020-08-27 15:40:49 來源：腳本之家閱讀：154 作者：abcByme 欄目：web開發(fā)
本文實例為大家分享了Android九宮格圖片展示的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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>
    <h2 class="title">javascript實現(xiàn)仿微信搶紅包</h2>
    <div class="wrap">
      <div class="line">紅包個數(shù)：<input type="text" name="packetNumber" value="5" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="10">個</div>
      <div class="line">總&ensp;金&ensp;額：<input type="text" name="money" value="5" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" maxlength="10">元</div>
      <div class="line"><a class="btn" href="javascript:;" rel="external nofollow" >發(fā)紅包</a></div>
    </div>
    <div class="list"></div>
    <p class="link">參考<a target="_blank" >《微信紅包的架構(gòu)設(shè)計簡介》</a>文章</p>

<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("至少需要設(shè)置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>元&emsp;&emsp;==剩余紅包:: <span>" + packet.money.toFixed(2) + "</span> 元<p>";
      console.log("第", i, "個紅包::", _pack.toFixed(2), "元   ==剩余紅包::", packet.money.toFixed(2), "元");
    }
    str !== "" && (oList.innerHTML = str);
  }
  ;
})();

</script>
  </body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
向AI問一下細(xì)節(jié)
js仿微信搶紅包功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽
