jq移动端日历签到

最新推荐文章于 2022-11-02 15:04:15 发布

王小花__

最新推荐文章于 2022-11-02 15:04:15 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qq_26516509/article/details/77449236

版权

本文介绍如何使用HTML和CSS创建一个适用于移动端的日历签到组件。内容包括HTML结构的设计和CSS样式的实现，帮助开发者打造简洁易用的签到界面。

摘要由CSDN通过智能技术生成

HTML部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="js/fontSize.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/signIn.js"></script>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/signIn.css"/>
</head>
<body>
<div class="wrap">
    <div class="checkin">
        
    </div>
    <div class="mask">
        <div class="modal">
            <a href="#" class="closeBtn">×</a>
            <h1 class="title_h1 clearfix"><span></span><em>已签到</em> <i>您已签到3天</i></h1>
            <h2 class="title_h2">您获得现金<span>2元</span></h2>
        </div>
    </div>
    <div class="rules">
        <h3>签到规则说明</h3>
        <p>1.每日签到得奖励，连续签到七天得现金券</p>
        <p>2.签到现金券仅限本商家使用</p>
        <p>3.连续签到不足七天时，将签到奖励清零重新计算</p>
    </div>
</div>
<script type="text/javascript">
     // 插件调用
    $(".checkin").Checkin();
    // 元素居中显示，与插件无关，根据自己需要修改；
    // $(".checkin").css('marginTop',parseInt(($(window).innerHeight()-$(".checkin").outerHeight())/2)+'px');
</script>
</body>
</html>

css部分

*{margin:0;padding:0;font:14px/1.8 "Helvetica Neue","microsoft yahei";}
body{background: #FFE8A1; }
.wrap{
    width: 100%;
    border-top: 1px solid transparent;
}
.checkin{
    width: 90%;
    margin: auto auto 0.3rem auto; 
}
.clear {
    clear:both;
    height:0; 
    overflow:hidden; 
    display:block; 
    line-height:0;
}
.clearfix:after {
    clear:both;font-size:0; 
    height:0;