仿微信抢红包(js 转)
<!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 转)的更多相关文章
- 抢红包js程序
https://www.cnblogs.com/miid/p/5192235.html <!DOCTYPE html> <html> <head> <meta ...
- 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果
wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...
- Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例
一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...
- Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例
一.项目介绍 next-webchat 基于Next.js+React.js+Redux+Antd+RScroll+RLayer等技术构建的PC桌面端仿微信聊天项目.实现了消息/表情发送.图片/视频预 ...
- Svelte3聊天室|svelte+svelteKit仿微信聊天实例|svelte.js开发App
基于svelte3.x+svelteKit构建仿微信App聊天应用svelte-chatroom. svelte-chatroom 基于svelte.js+svelteKit+mescroll.js+ ...
- Svelte3.x网页聊天实例|svelte.js仿微信PC版聊天svelte-webchat
基于Svelte3+SvelteKit+Sass仿微信Mac界面聊天实战项目SvelteWebChat. 基于svelte3+svelteKit+sass+mescroll.js+svelte-lay ...
- 小程序用户反馈 - HotApp小程序统计仿微信聊天用户反馈组件，开源
用户反馈是小程序开发必要的一个功能,但是和自己核心业务没关系,主要是产品运营方便收集用户的对产品的反馈.HotApp推出了用户反馈的组件,方便大家直接集成使用 源码下载地址: https://gith ...
- 网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 本文讲描述, 如何在网页端实现一个仿微信 ...
- H5仿微信界面教程(一)
前言 先来张图,仿微信界面,界面如下,并不完全一模一样,只能说有些类似,希望大家见谅. 1 用到的知识点 jQuery WeUI 是WeUI的一个jQuery实现版本,除了实现了官方插件之外,它还提供 ...
随机推荐
- Shiro第六篇【验证码、记住我】
验证码 在登陆的时候,我们一般都设置有验证码,但是我们如果使用Shiro的话,那么Shiro默认的是使用FormAuthenticationFilter进行表单认证. 而我们的验证校验的功能应该加在F ...
- TypeMismatchException: Provided id of the wrong type for class zhongfucheng.user.entity.User.
今天在使用SSH框架做项目的时候出现了这个错误,找了我非常非常多的时间!!!!!!! Struts Problem Report Struts has detected an unhandled ex ...
- javaScript【创建对象、创建类、成员变量、方法、公有和私有、静态】
创建对象 方式① 直接使用new Object() var obj = new Object(); 方式② 使用空的{}大括号 var obj2 = {}; 测试 增加属性,访问属性 我们要为创建的对 ...
- webservice04#对象与xml转换-jaxb#Stax解析xml#新建修改xml
1,Student类 package com.yangw.xml; import javax.xml.bind.annotation.XmlRootElement; @XmlRootElement / ...
- kettle工具实现报表导出的初步搭建
1.下载kettle 国外网站:http://kettle.pentaho.org/需要FQ,下载慢 2.下载完成启动(windows)-->spoon.bat 3.进入界面,两个主要的tab页 ...
- 我的Spring学习记录（一）
spring是一个框架,一个我理解为对象的大熔炉,它生产着各种bean,还可以对生产的对象进行加工. 这里有些概念需要理解一下,就是IOC和DI以及AOP,接下来,我们进入主题. spring简介 上 ...
- 以下内容对于灵活修改textField中文本以及占位文本属性进行了完整的封装，加入项目中可以节约开发时间。
textField对占位文本设置属性有限,在项目中需要改变占位文本的属性以及位置,需要自己对控件进行封装 封装方法如下: 在LDTextField.m 文件中: #import <UIKit/U ...
- js函数基础知识
[函数的声明及调用] function 函数名(参数1,参数2,....){ //函数体代码 return返回值: } 1.函数的调用: ①直接调用:函数名(参数1的值,参数2的值,....) ②事件 ...
- Spring框架（一）
Spring: Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由 Rod Johnson在其著作 Expert One-On-One J2EE Deve ...
- java 基础语法 1
一．标识符 二．关键字 三．JAVA基础数据类型 3.1. java常量 3.2. java变量 从本质上来讲,变量其实是内存里面的一小块区域,一个程序在运行的时候,实际上这个程序是位于内存里面,然后 ...