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 相关文章推荐
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
给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
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
PHP中使用BigMap实例
2015/03/30 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
dojo 之基础篇
2007/03/24 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
RequireJS多页面应用实例分析
2016/06/29 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
ant design实现圈选功能
2019/12/17 Javascript
python错误处理详解
2014/09/28 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
奇怪的鱼:Weird Fish
2018/03/18 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
遵纪守法演讲稿
2014/05/23 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android