北大青鸟课工场
北大青鸟课工场 全国统一咨询热线:400-8869355
 首页  »    资讯   »    内容

javascript实现仿微信抢红包

    课工场陈老师     2017-01-10     4497浏览

运用javascript技术实现生活中仿微信抢红包

<!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,'')" 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:;">发红包</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>

注:文章转载自MIIDER博客园



我要分享:

 相关阅读

咨询专栏

学费低到不能说,薪资高到没朋友!你离高薪只差一个电话的距离。
QQ群:263965166
电话:400-8869355

咨询在线老师
课工场报名 预约免费试听