js仿微信抢红包功能

2024-11-27 03:02:58

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

<!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实现微信抢红包功能

金额随机:额度在0.01和(剩余平均值*2)之间. /** * 抢红包 * @param {[number]} totalAmount [总金额] * @param {[number]} totalPeople [总人数] * @return {[Array]} [每个人抢到的金额] */ function assign(totalAmount, totalPeople){ var remainAmount = +totalAmount; var remainPeople = +totalPeo
js仿微信抢红包功能

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!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 &quo
Vue.js仿微信聊天窗口展示组件功能

源码:https://github.com/doterlin/vue-wxChat 演示地址:https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 介绍支持文本和图片的展示(后续将
Android微信抢红包功能的实现原理浅析

快到过农历年了,微信红包也越来越多了,出现了好多红包外挂程序,就很好奇如何实现的,于是自己研究了一番,亲自写了个微信抢红包的APP.现在就一步一步来实现它. 实现思路微信抢红包程序开启时候,他就可以随时识别.捕获红包,服务可以实现正在功能,当我们开启服务的时候,服务就不停的在后台运行,不停地轮询着微信里面的消息,当发现红包时候就立即打开微信红包所在的界面.但是他怎识别红包呢?需要找到微信抢红包里面节点的view,当找到对应的view,在获取view的关键字或者id,根据关键字或者id,自动的模
Android仿微信@好友功能输入@跳转、删除整块

最近在做聊天功能的时候,有一个需求是仿照微信做@好友的功能,本来以为挺简单,但是做到这块的时候,发现和想象的有点不一样,什么整块删除,块可编辑,总之,加个@的功能很简单,但是要做和微信的一样还是费了一些功夫,下面是一个demo仅供参考,防止遗忘先上个效果图就是这么个功能 1. 分析需求输入@跳转到联系人界面,选中一个或者多个好友返回到当前界面按退格键删除整块内容块内的内容可编辑,编辑完了之后将不附带@功能,只是单纯的文字 2. 开始编码既然是文本输入首先继承EditText自定义一个
Flutter实现仿微信分享功能的示例代码

目录 1.首先去pub官网 2 在微信开放平台注册开发者账号以及创建你的应用程序 3 在分享页面 3.1 初始化 3.2 检测微信是否安装 3.3 分享微信消息总结本文设计到的知识点有主要问题 Flutter 用来快速开发 Android iOS平台应用,在Flutter 中,通过 fluwx或者fluwx_no_pay 插件来实现微信分享功能主要还是看自己的需求,本示例我将按照没有支付的实现.至于为什么,主要是ios打包提审比较麻烦. 那么接下来就看一下如何实现吧, 1.首先去pub官
js仿微信公众平台打标签功能

今天刚刚完成了一个小功能:"仿微信公众平台的-打标签",随笔记下欢迎纠错: 操作介绍:选择人物列表点击"打标签"按钮可实现对当前已选择的人物添加新的标签: 自己分析的实现思路: 1.点击"打标签"时要"知道"那些人物被选择了~~遍历当前人物列表 2.得到被选择人物列表后还得知道他们下面的标签都有啥~~遍历选择人物的标签列表 3.得到当前可以使用的标签列表~~额..还是遍历得到废话讲的有点多.来几张图片压压惊.网页效果\(^o
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

先来几张效果图: 点击其中一张照片可放大,可支持图片文字描述: 同时支持分享功能: 支持手势放大缩小使用js框架是PhotoSwipe. PhotoSwipe是一个图片放大插件,兼容pc和移动端,经历过多个版本的迭代且一直在不断更新,踩过的坑不知凡几,在移动端有着巨大的优势. 1.可控制多种风格如: 标题.分享.全屏按钮,点击事件.是否加入字幕,背景透明等. 2.可支持移动端触摸手势兼容pc端所有的基本手势支持:滑动下一个或上一个,拖动平移.缩放.放大或关闭,点击切换控件,双击放大或缩放.
JS仿JQuery选择器功能

JQuery作为应用最广的JS库,其最强大的功能之一就是几乎涵盖所有方法的且代码十分简短的选择器功能,我们也可用自己的代码实现此功能,代码逻辑.使用方法与JQuery一致 function ZQuery(arg){ this.elements = []; //存东西 this.domString = ''; //保存字符串标签 if(typeof arg=='function'){ //DOMReady DOMReady(arg); }else if(typeof arg=='string'||
js仿微信语音播放实现思路

最近看到有一个叫做"轻客小伙伴"的微信服务号,运营得挺不错的. 它是做英语线上培训的,由老师录制语音,配上图文,制作成课程. 花了不少时间写了大多数功能,但还没有优化成插件,直接发代码估计也看不懂,难应用.所以就主要说下实现的思路. 我的html结构是这样的 <div class="app-voice-you" voiceSrc="xx.mp3"> <img class="app-voice-headimg"

js仿微信抢红包功能

相关推荐

随机推荐