演示网站 移动端每日签到页面模板
编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>每日签到</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<script src="static/js/zepto.min.js" type="text/javascript" ></script>
<script src="static/js/flexible.js" type="text/javascript" ></script>
</head>
<body>
<div class="top-title">每日签到</div>
<!--签到-->
<div class="sign-in">
<div class="sign-info">
<div class="score">
<span>+5</span>
<span>+10</span>
<span>+15</span>
<span class="text-yellow">+20</span>
<span>+25</span>
<span>+30</span>
<span class="text-yellow">+35</span>
</div>
<div class="num sign2">
<span class="active">1</span>
<span class="active now">2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</div>
<div class="date">
<span>第1天</span>
<span>第2天</span>
<span>第3天</span>
<span>第4天</span>
<span>第5天</span>
<span>第6天</span>
<span>第7天</span>
</div>
</div>
<div class="sign-btn">
<a href="javascript:;" class="btn bg-blue" id="sign">签 到</a>
</div>
</div>
<!--说明-->
<div class="explain">
<div class="title"><span>签到说明</span></div>
</div>
<div class="explain-desc">
<ul>
<li>每日签到一次，连续签到奖励更多</li>
<li>每日一名签到幸运星次日公布，可获得神秘大奖</li>
</ul>
</div>
<!--昨日星-->
<div class="star">
<div class="head">
<img src="static/picture/head.png" alt="">
<span>jq22</span>
</div>
<div>
<span class="tip">获得</span>
<span class="text-blue">+200成长值</span>
</div>
</div>
<!--弹窗-->
<div class="dialog">
<div class="mask"></div>
<div class="dialog-box">
<div class="content">
<p>已连续签到<span class="text-blue">1</span>天</p>
<p class="gold"><img src="static/picture/gold.png"><span class="text-blue">+5</span></p>
<a href="javascript:;" class="btn bg-blue">明天签到可获得10积分</a>
</div>
</div>
<div class="dialog-close"></div>
</div>
</body>
</html>
<script type="text/javascript">
// 签到
$('#sign').click(function(){
$('.dialog').fadeIn()
// 以下为模拟签到，具体应该根据后端返回的数据来处理逻辑
var index = $('.sign-info .num span.active').length;
console.log(index)
if(index==7){
alert("恭喜您，成功签到一周");
return
}
$('.sign-info .num span.active').eq(index-1).removeClass('now')
$('.sign-info .num span').eq(index).addClass('active now')
$('.sign-info .num').addClass('sign'+(index+1))
})
// 关闭弹窗
$('.dialog-close,.dialog .mask').click(function(){
$('.dialog').fadeOut()
})
</script>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
