演示网站 移动端app会员签到页面模板
编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>签到页面</title>
<meta name="description" content="Neat">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
<link rel="stylesheet" href="css/style.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<div class="main-group">
<div class="main-top">
<div class="integral-icon-group">
<div class='title'>
-已连续签到-
</div>
<div class="day">
99<span>天</span>
</div>
<div class="button-group">
<button class="integral-btn">点击签到</button>
</div>
</div>
<div class="integral-note">
明天签到得<span>+100</span>分
</div>
</div>
<div class="main-bottom">
<div class="integral-group">
<div class="item today">
<img src="imgs/integral.png">
今日积分 10
</div>
<div class="space">|</div>
<div class="item all">
<img src="imgs/integral-all.png">
全部积分 100
</div>
</div>
<div class="task-group">
<h3 class="title">做任务领积分</h3>
<ul class="items">
<li>
<img src="imgs/icon-friends.png">
<div class="data-group">
<div class="data">
<h4>
邀请好友
</h4>
<p>
积分+100 成长值+100
</p>
</div>
<button>去邀请</button>
</div>
</li>
<li>
<img src="imgs/icon-cart.png">
<div class="data-group">
<div class="data">
<h4>
任意购物
</h4>
<p>
积分+200 成长值+200
</p>
</div>
<button>去下单</button>
</div>
</li>
<li>
<img src="imgs/icon-look.png">
<div class="data-group">
<div class="data">
<h4>
访问更多+
</h4>
<p>
积分+300 成长值+300
</p>
</div>
<button>去访问</button>
</div>
</li>
<li>
<img src="imgs/icon-up.png">
<div class="data-group">
<div class="data">
<h4>
上传头像
</h4>
<p>
积分+300 成长值+300
</p>
</div>
<button>去上传</button>
</div>
</li>
</ul>
</div>
<div class="h20"></div>
</div>
</div>
<div class="alert-bg" style="display:none;">
<div class="alert-group">
<div class="alert-icon-group">
<img src="imgs/signin.png">
<p>签到成功</p>
</div>
<div class="alert-note-group">
<p>恭喜获得</p>
<p><span>100积分</span>积分可以兑换礼物</p>
<p><button class="close-btn">我知道了</button></p>
</div>
</div>
</div>
</body>
<script type="text/javascript">
let alert_bg = $('.alert-bg');
$('.integral-btn').click(function () {
alert_bg.show();
});
$('.close-btn').click(function () {
alert_bg.hide();
});
</script>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
