仿微信錢包領取頁面

哈爾濱洛弘科技有限公司 2022-01-07 12:02:51 阅读数:901

晚間打開效果

在這裏插入圖片描述

白天打開效果

在這裏插入圖片描述

代碼如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="static/weuix.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="static/open.css">
</head>
<body >
<div class="top">
//開啟返回和操作按鈕
<!--<span class="icon icon-109" style="color:#FFF;font-size:3vh;position:absolute;top:12px;left:15px;"></span>-->
<!--<span class="icon icon-83" style="color:#FFF;font-size:3vh;position:absolute;top:12px;right:15px;"></span>-->
</div>
<div id="storm">
<div class="head">
<div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><img src="" style="height:6vw;width:6vw;border-radius: 3px;margin-right:12px;vertical-align: sub;" data-headimg alt=""><span data-nickname></span>發出的紅包 <span class="pin"></span></div>
<div class="desc">恭喜發財,大吉大利</div>
</div>
<div class="money">
<span data-money></span><span class="icn"></span>
</div>
<div class="money_desc">
已存入零錢,完成任務後可直接提現 <span class="icon icon-108"></span>
</div>
<div style="text-align: center;margin-top:3vh;margin-bottom:3vh;">
<div class="emoil">
立即領取
</div>
</div>
<div class="packet_list" style="text-align:left;">
<div>
已領取<span data-nt></span>/<sapn data-max></sapn>,<span data-recieve-money></span>/<span data-total></span></div>
<div id="data-list"></div>
</div>
</div>
</body>
<script>
var date = new Date();
var h=toNum(date.getHours());
var class_storm='black'
if(h>=6 && h<=18){

class_storm='white';
}
$("#storm").addClass(class_storm);
var t=random(1,10);
var data_money=random(10000,18000);
$('[data-money]').html(parseInt(data_money)/100);
function random(min, max) {

return Math.floor(Math.random() * (max - min)) + min;
}
var storm=[];
var p=0;
var max=(8,20);
var t=random(1,10);
var sr=random(5,max);
$('[data-nt]').html(sr);
$('[data-max]').html(max);
$.getJSON('static/vs'+t+'.json',function(res){

var str='';
var n=parseInt(res.data.length)-1;
var st=random(0,n);
var nickname=res.data[st]['nickname'];
$('[data-nickname]').html(nickname);
$('[data-headimg]').attr('src',res.data[st]['headimg']);
var timestamp = parseInt(Date.parse(new Date()))/1000;
if(p<sr){

for(var i=0;i<sr;i++){

timestamp-=parseInt(random(60,6000));
var date = new Date(timestamp*1000);
var money=parseInt(random(100,9000))/100;
var h=toNum(date.getHours());
var m=toNum(date.getMinutes());
var s=nv(res.data);
p++;
data_money+=parseInt(money*100);
var info=res.data[s];
str+=' <div class="receive">\n' +
'<img class="headimg" src=\''+info.headimg+'\' alt="">\n' +
'<div class="receive_info">\n' +
'<div class="nickname">'+info.nickname+'</div>\n' +
'<div class="time">'+h+':'+m+'</div>\n' +
'</div>\n' +
'<div class="receive_money">\n' +
money+'元\n' +
'</div>\n' +
'</div>';
}
}else{

return false;
}
$('#data-list').html(str);
$('[data-recieve-money]').html(data_money/100);
$('[data-total]').html(Math.ceil((data_money+parseInt(random(10000,20000)))/100));
})
function toNum(n){

if(n<10) n='0'+n;
return n;
}
function nv(res){

var n=parseInt(res.length)-1;
var s=random(0,n);
if($.inArray(s,storm)!=-1){

return nv(res,s);
}else{

storm.push(s);
return s;
}
}
</script>
</html>

附代碼中weuix.cssopen.css文件代碼

點我預覽
喜歡的收藏哦

版权声明:本文为[哈爾濱洛弘科技有限公司]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201071202505755.html