https://www.cnblogs.com/miid/p/5192235.html

<!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>

抢红包js程序的更多相关文章

  1. 玩儿转物联网IoT - 在Beagle Bone Black上运行node.js 程序

    物联网(IoT)技术方兴未艾,智能手环,智能血压计,智能眼镜甚至智能鞋垫都开始进入我们的生活,各种智能设备层出不穷,世界已经到了一个"人有多大胆,地有多大产"的时代,不玩儿点物联网 ...

  2. 在Visual Studio上开发Node.js程序(2)——远程调试及发布到Azure

    [题外话] 上次介绍了VS上开发Node.js的插件Node.js Tools for Visual Studio(NTVS),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...

  3. 在Visual Studio上开发Node.js程序

    [题外话] 最近准备用Node.js做些东西,于是找找看能否有Visual Studio上的插件以方便开发.结果还真找到了一个,来自微软的Node.js Tools for Visual Studio ...

  4. 我博客上的围棋js程序

    作为一个围棋爱好者,就决定在博客里加个围棋js程序.于是,申请了博客的js权限,美化美化我的博客. 好在js的语法像C系的,看了看,写个程序应该还是可以的. 围棋里,设计好基本的数据结构: //a是1 ...

  5. 使用events.EventEmitter 控制Node.js 程序执行流程

    使用events.EventEmitter 控制Node.js 程序执行流程 标题写的可能也不太对,大家领会精神: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. ...

  6. 一种简单的生产环境部署Node.js程序方法

    最近在部署Node.js程序时,写了段简单的脚本,发觉还挺简单的,忍不住想与大家分享. 配置文件 首先,本地测试环境和生产环境的数据库连接这些配置信息是不一样的,需要将其分开为两个文件存储 到conf ...

  7. Node.js程序在node-windows中不能运行

      Node.js程序部分功能在命令行中运行良好,但在node-windows中不能运行,怎么回事? 答:路径问题. 请看如下的描述: My script runs fine on it's own, ...

  8. 在Visual Studio 2013 上开发Node.js程序

    [题外话] 最近准备用Node.js做些东西,于是找找看能否有Visual Studio上的插件以方便开发.结果还真找到了一个,来自微软的Node.js Tools for Visual Studio ...

  9. 3.第一个Node.js程序：Hello World！

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html 以下是我们的第一个Node.js程序: console.log("Hello Wor ...

随机推荐

  1. Java - 30 Java 网络编程

    Java 网络编程 网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来. java.net包中J2SE的API包含有类和接口,它们提供低层次的通信细节.你可以直接使用这些类和接 ...

  2. Django之用户认证auth模块

    一 Django中的auth模块: 我们在使用模块之前要先导入模块: from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介 ...

  3. day24类的继承

    类的继承1 什么是继承    继承一种新建类的方式,新建的类称之为子类/派生类,被继承的类称之为父类\基类\超类    python中继承的特点:        1. 子类可以遗传/重用父类的属性   ...

  4. jmater分布式压力测试总结

    总结,总是为了方便以后 1.jmeter 2000个并发,4台slave ,每台slave是500个线程即可完成测试 2.jmx文件只需要拷贝到master下 jmeter目录下(最保险的方法) 3. ...

  5. jquery 弹框，确定、取消

    function del(id, url) { var bool = confirm("确定删除?") if (bool) { //点击确定后操作 var Urls = " ...

  6. elasticssearch+kibanna入门（撰写中）

    看到一篇elasticssearch+kibanna的文章,觉得很好,不过例子是python的,所以使用java自己安装一下: https://mp.weixin.qq.com/s?__biz=MjM ...

  7. python中import和from-import的区别

    . import导入模块的路径两种方式 # 将模块所在路径再程序中添加到sys.path列表中 import sys sys.path import导入模块按照sys.path顺序依次查找,“”代表当 ...

  8. Linux系统Oracle启动、关闭

    Linux系统启动Oracle命令 su - oracle sqlplus /nolog conn / as sysdba startup exit lsnrctl start exit Linux系 ...

  9. strtr与str_replace的区别

    strtr与str_replace的区别 2013-03-12 10:58:09|  分类: php函数对比 |字号 订阅 strtr跟被替换的字符(from)和替换的字(to)有关系.只是替换fro ...

  10. python中的isalnum、isalpha、istitle、isspace、islower、isupper、isdigit

    isalnum()判断是否包含字母或者数字 isalpha()判断是否都是字母 istitle()判断每个单词首字母是否是大写 isspace()判断是否是空格 islower()判断字母是否全都是小 ...