js仿微信抢红包功能


Posted in Javascript onSeptember 25, 2020

本文实例为大家分享了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:;" rel="external nofollow" >发红包</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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
jQuery 选择器理解
Mar 16 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
简单的React SSR服务器渲染实现
Dec 11 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 #Javascript
微信小程序 POST请求的实例详解
Sep 29 #Javascript
微信小程序之数据缓存的实例详解
Sep 29 #Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 #Javascript
微信小程序中setInterval的使用方法
Sep 29 #Javascript
vue生成随机验证码的示例代码
Sep 29 #Javascript
JS设计模式之单例模式(一)
Sep 29 #Javascript
You might like
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
php实现算术验证码功能
2018/12/05 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
详解Python文本操作相关模块
2017/06/22 Python
Python 多线程的实例详解
2017/09/07 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
Python中bisect的用法及示例详解
2020/07/20 Python
python 实现波浪滤镜特效
2020/12/02 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
美国知名艺术画网站:Art.com
2017/02/09 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
环保建议书100字
2014/05/14 职场文书
采购部长岗位职责
2014/06/13 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
企业介绍信范文
2015/01/30 职场文书
学期个人自我总结
2015/02/13 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
使用Ajax实现进度条的绘制
2022/04/07 Javascript