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

仿微信抢红包

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;}

javascript实现仿微信抢红包

参考《微信红包的架构设计简介》文章

"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 += "

第" + i + "个红包:: " + _pack.toFixed(2) + "元  ==剩余红包:: " + packet.money.toFixed(2) + " 元

";

console.log("第", i, "个红包::", _pack.toFixed(2), "元 ==剩余红包::", packet.money.toFixed(2), "元");

}

str !== "" && (oList.innerHTML = str);

}

;

})();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。