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 相关文章推荐
文本加密解密
Jun 23 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
JSON stringify方法原理及实例解析
Oct 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
php+ajax+json 详解及实例代码
2016/12/12 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
JS动画定时器知识总结
2018/03/23 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
python语言的优势是什么
2020/06/17 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
软件测试题目
2013/02/27 面试题
汽车装潢店创业计划书范文
2014/02/05 职场文书
房产转让协议书
2014/04/11 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
年会邀请函范文
2015/01/30 职场文书
Python创建SQL数据库流程逐步讲解
2022/09/23 Python