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游戏之优化篇
Nov 08 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
JsRender for object语法简介
Oct 31 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
python绘制立方体的方法
2018/07/02 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
司机岗位职责
2013/11/15 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
天下第一关导游词
2015/02/06 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书