<!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. 抢红包js程序

    https://www.cnblogs.com/miid/p/5192235.html <!DOCTYPE html> <html> <head> <meta ...

  2. 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果

    wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...

  3. Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例

    一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...

  4. Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例

    一.项目介绍 next-webchat 基于Next.js+React.js+Redux+Antd+RScroll+RLayer等技术构建的PC桌面端仿微信聊天项目.实现了消息/表情发送.图片/视频预 ...

  5. Svelte3聊天室|svelte+svelteKit仿微信聊天实例|svelte.js开发App

    基于svelte3.x+svelteKit构建仿微信App聊天应用svelte-chatroom. svelte-chatroom 基于svelte.js+svelteKit+mescroll.js+ ...

  6. Svelte3.x网页聊天实例|svelte.js仿微信PC版聊天svelte-webchat

    基于Svelte3+SvelteKit+Sass仿微信Mac界面聊天实战项目SvelteWebChat. 基于svelte3+svelteKit+sass+mescroll.js+svelte-lay ...

  7. 小程序用户反馈 - HotApp小程序统计仿微信聊天用户反馈组件，开源

    用户反馈是小程序开发必要的一个功能,但是和自己核心业务没关系,主要是产品运营方便收集用户的对产品的反馈.HotApp推出了用户反馈的组件,方便大家直接集成使用 源码下载地址: https://gith ...

  8. 网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 本文讲描述, 如何在网页端实现一个仿微信 ...

  9. H5仿微信界面教程(一)

    前言 先来张图,仿微信界面,界面如下,并不完全一模一样,只能说有些类似,希望大家见谅. 1 用到的知识点 jQuery WeUI 是WeUI的一个jQuery实现版本,除了实现了官方插件之外,它还提供 ...

随机推荐

  1. TestNG简介与安装步骤

    简述 TestNG是一个设计用来简化广泛的测试需求的测试框架, 从单元测试(隔离测试一个类) 到集成测试(测试由有多个类多个包甚至多个外部框架组成的整个系统, 例如运用服务器) . testNG灵感来 ...

  2. Spring c3p0连接池无法释放解决方案

    通过c3p0配置连接池的时候,在进行压力测试的时候,日志出现了这样一个错误:Data source rejected establishment of connection, message from ...

  3. Vue2.0 探索之路——生命周期和钩子函数

    beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些 ...

  4. 02_Java运行环境搭建

    1.Java运行环境搭建,对于初学者来说,主要下载安装jdk即可,windows操作系统再配合记事本,即可进行java程序开发.后续的学习以及工作中需要使用IDE工具进行开发,常用IDE工具是ecli ...

  5. 使用docker部署standalone cinder

    | 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接.如有问题,可以邮件:wangxu198709@gmail.com 背景 OpenSta ...

  6. 经典算法研究系列：二、Dijkstra 算法初探

    July   二零一一年一月 本文主要参考:算法导论 第二版.维基百科. 一.Dijkstra 算法的介绍 Dijkstra 算法,又叫迪科斯彻算法(Dijkstra),算法解决的是有向图中单个源点到 ...

  7. STM8学习 无法仿真原因Starting debug session... -> Emulator reset (usb://usb)... ** Connection error (usb://usb): swim error [30200]: st-link connection error

    刚调试程序时,STlink总是连不上,一直提示: Starting debug session...-> Emulator reset (usb://usb)...** Connection e ...

  8. C# 中函数内定义函数的委托方法

    //定义委托方法Action(无返回值)Func(有返回值) //无返回值委托 Action<string> SetKeyAndValue = delegate(string key) { ...

  9. 记住密码"功能的正确设计

    Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能后,我觉得很有必要写一篇文章教大家怎么来做用户登录功能.下面的文章告诉大家这个功能可能并没有你所想像的那么简单,这是一个关 ...

  10. Jquery实现弹出选择框选择后返回，支持多级分类

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...