抢红包js程序
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">总 金 额：<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>元  ==剩余红包:: <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程序的更多相关文章
- 玩儿转物联网IoT - 在Beagle Bone Black上运行node.js 程序
物联网(IoT)技术方兴未艾,智能手环,智能血压计,智能眼镜甚至智能鞋垫都开始进入我们的生活,各种智能设备层出不穷,世界已经到了一个"人有多大胆,地有多大产"的时代,不玩儿点物联网 ...
- 在Visual Studio上开发Node.js程序(2)——远程调试及发布到Azure
[题外话] 上次介绍了VS上开发Node.js的插件Node.js Tools for Visual Studio(NTVS),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...
- 在Visual Studio上开发Node.js程序
[题外话] 最近准备用Node.js做些东西,于是找找看能否有Visual Studio上的插件以方便开发.结果还真找到了一个,来自微软的Node.js Tools for Visual Studio ...
- 我博客上的围棋js程序
作为一个围棋爱好者,就决定在博客里加个围棋js程序.于是,申请了博客的js权限,美化美化我的博客. 好在js的语法像C系的,看了看,写个程序应该还是可以的. 围棋里,设计好基本的数据结构: //a是1 ...
- 使用events.EventEmitter 控制Node.js 程序执行流程
使用events.EventEmitter 控制Node.js 程序执行流程 标题写的可能也不太对,大家领会精神: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. ...
- 一种简单的生产环境部署Node.js程序方法
最近在部署Node.js程序时,写了段简单的脚本,发觉还挺简单的,忍不住想与大家分享. 配置文件 首先,本地测试环境和生产环境的数据库连接这些配置信息是不一样的,需要将其分开为两个文件存储 到conf ...
- Node.js程序在node-windows中不能运行
Node.js程序部分功能在命令行中运行良好,但在node-windows中不能运行,怎么回事? 答:路径问题. 请看如下的描述: My script runs fine on it's own, ...
- 在Visual Studio 2013 上开发Node.js程序
[题外话] 最近准备用Node.js做些东西,于是找找看能否有Visual Studio上的插件以方便开发.结果还真找到了一个,来自微软的Node.js Tools for Visual Studio ...
- 3.第一个Node.js程序：Hello World！
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html 以下是我们的第一个Node.js程序: console.log("Hello Wor ...
随机推荐
- RxJava学习；数据转换、线程切换；
Observable(被观察者,发射器)发送数据: just:发送单个的数据: Observable.just("cui","chen","bo&qu ...
- HTML中head与body标签
一 head内常用标签 1.meta相关 #1.指定字符集 <meta charset="gbk"> #2.页面描述 <meta name="Descr ...
- ECharts动态加载堆叠柱状图的实例
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...
- JS中 == ,===, !=, !==的区别
一个等号是赋值操作,==先转换类型再比较,===先判断类型,如果不是同一类型直接为false. === 判断规则 如果类型不同,就[不相等] 如果两个都是数值,并且是同一个值,那么[相等]:(!例外 ...
- lunix 集群,负载均衡,location
nginx location语法: location支持的语法优先级: 复制代码location匹配顺序 # www.s14hanju.com/1.location = / { 我是代码1} ...
- 聊聊 cursor鼠标样式
在前端开发中,很多时候需要对页面的某些元素做鼠标样式的处理,比如button一般用pointer , 文本区一般用text......等等. 今天咱就来聊聊 这个经常用到的 cursor 属性 cur ...
- 【Linux】【Maven】Linux下安装和配置Maven
创建maven的文件夹并下载maven的tar包到此文件夹中 //进入一个目录 cd /usr/local//创建一个文件夹 mkdir maven//下载maven的tar包 wget http:/ ...
- QT编写TCP入门+简单的实际项目（附源程序）
我个人感觉学习QT不需要那么深入的了解,因为我就是编写一下界面来实现理想的功能而已,我不是靠这个吃饭,当然以后要是从事这个方向那就好好深入底层好好学了. 学习QT的TCP:第一步:去百度看看TCP的介 ...
- gentoo intel 安装桌面
首先增加 vim ~/.xinitrc [[ -f ~/.Xresources ]] && xrdb -merge ~/.Xresources # dbus before fcitx ...
- iOS基础知识之多态问题
多态是基于继承而言的,例如自定义父类Person,子类Son,那么可能会出现如下情况: Person *p =[ [Son alloc]init]; 这种情况时,便是多态的使用.多态属于动态创建对象, ...