Rumah > Artikel > hujung hadapan web > 如何实现仿微信抢红包

如何实现仿微信抢红包

一个新手asal: 2017-10-09 09:56:092248semak imbas

<!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>
        <h1 class="title">javascript实现仿微信抢红包</h1>
        <div class="wrap">
            <div class="line">红包个数：<input type="text" name="packetNumber" value="5" onkeyup="this.value=this.value.replace(/\D/g,&#39;&#39;)" onafterpaste="this.value=this.value.replace(/\D/g,&#39;&#39;)" maxlength="10">个</div>
            <div class="line">总&ensp;金&ensp;额：<input type="text" name="money" value="5" onkeyup="if(isNaN(value))execCommand(&#39;undo&#39;)" onafterpaste="if(isNaN(value))execCommand(&#39;undo&#39;)" maxlength="10">元</div>
            <div class="line"><a class="btn" href="javascript:;">发红包</a></div>
        </div>
        <div class="list"></div>
        <p class="link">参考<a target="_blank" href="https://www.zybuluo.com/yulin718/note/93148">《微信红包的架构设计简介》</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("至少需要设置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>

Atas ialah kandungan terperinci 如何实现仿微信抢红包 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：对闭包的通俗理解 - 5ClayArtikel seterusnya：关于原生js运动方式关键点的总结

Artikel berkaitan

Lihat lagi