【模仿】前端开发JS实现微信抢红包

javascript前端开发实现仿微信抢红包|web前端开发技术——html_css_javascript|java转前端开发

谷歌:
html 代码片段

<!DOCTYPE html>
<head>
<metacharset=”UTF-8″>
<title>前端js开发:仿微信抢红包</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:1pxsolid#ddd;
padding:4px2px;
font-size:16px;
font-family:”微软雅黑”;
margin-right:5px;
}
input:focus{
border-color:#3C9BD1;
outline:none;
}
.wrap,
.list{
margin:50pxauto;
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:0auto;
margin-top:50px;
text-decoration:none;
transition:all.3slinear;
border-radius:2px;
}
.btn:hover{
opacity:.9;
}
.list{
width:500px;
border:1pxsolid#DBDBDB;
padding:10px;
BACKGROUND:#F5F5F5;
text-align:center;
}
.listpspan{
color:red;
padding:08px;
}
.listp: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:5px0;
}
.linka{
font-size:12px;
color:#999;
}
</style>
</head>
<body>
<h1class=”title”>javascript实现仿微信抢红包</h1>
<divclass=”wrap”>
<divclass=”line”>红包个数:
<inputtype=”text” name=”packetNumber” value=”5″ onkeyup=”this.value=this.value.replace(/\D/g,”)” onafterpaste=”this.value=this.value.replace(/\D/g,”)”
maxlength=”10″>个</div>
<divclass=”line”>总&ensp;金&ensp;额:
<inputtype=”text” name=”money” value=”5″ onkeyup=”if(isNaN(value))execCommand(‘undo’)” onafterpaste=”if(isNaN(value))execCommand(‘undo’)”
maxlength=”10″>元</div>
<divclass=”line”>
<aclass=”btn” href=”javascript:;”>发红包</a>
</div>
</div>
<divclass=”list”></div>
<pclass=”link”>参考
<atarget=”_blank” href=”https://www.zybuluo.com/yulin718/note/93148″>《微信红包的架构设计简介》</a>文章</p>
<script>
“use strict”;
var_createClass=function(){
functiondefineProperties(target,props){
for (vari=0;i<props.length;i++) {
vardescriptor=props[i];
descriptor.enumerable=descriptor.enumerable||false;
descriptor.configurable=true;
if (“value”indescriptor)
descriptor.writable=true;
Object.defineProperty(target,descriptor.key,descriptor);
}
}
returnfunction(Constructor,protoProps,staticProps){
if (protoProps)
defineProperties(Constructor.prototype,protoProps);
if (staticProps)
defineProperties(Constructor,staticProps);
returnConstructor;
};
}();
function_classCallCheck(instance,Constructor){
if (!(instanceinstanceofConstructor)) {
thrownewTypeError(“Cannot call a class as a function”);
}
}
varMoneyPacket=function(){
functionMoneyPacket(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:functioncheckPackage(){
if (this.packNumber==0) {
alert(“至少需要设置1个红包”);
returnfalse;
}
if (this.money<=0) {
alert(“红包总金额不能小于0”);
returnfalse;
}
if (this.packNumber*this.min>this.money) {
alert(“单个红包金额不可低于0.01元”);
returnfalse;
}
returntrue;
}
}]);
returnMoneyPacket;
}();
vargetRandomMoney=functiongetRandomMoney(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;
}
varmin=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;
returnmoney;
};
(function () {
varoBtn=document.querySelector(“.btn”);
varoList=document.querySelector(“.list”);
oBtn.onclick=function(){
varpacketNumber=+document.querySelector(“input[name=packetNumber]”).value;
varmoney=+document.querySelector(“input[name=money]”).value;
varstr=””;
varpacket=newMoneyPacket(packetNumber,money),
num=packet.flag&&packet.packNumber||0;
console.log(“========================================================================”);
for (vari=0;i<num;i++) {
var_pack=getRandomMoney(packet);
str+=”第<span>”+i+”</span>个红包:: <span>”+_pack.toFixed(2) +
“</span>元&emsp;&emsp;==剩余红包:: <span>”+packet.money.toFixed(2) +”</span> 元”;
console.log(“第”,i,”个红包::”,_pack.toFixed(2),”元 ==剩余红包::”,packet.money.toFixed(2),
“元”);
}
str!==””&& (oList.innerHTML=str);
};
})();
</script>
</body>
</html>
java能开发前端吗?|前端开发和java开发哪个难?|网页前端开发难不难?
» 本文来自:前端开发者 » 《【模仿】前端开发JS实现微信抢红包》
» 本文链接地址:https://www.rokub.com/3770.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!