日历签到页面(jq/less/layer)

整体效果如图

一、通过rem适配

由于这个页面是嵌套在app中的,所以不用考虑横屏问题,我用rem进行适配。在页面加载开始时设置rem,我再ip5下调试,设计图也调整到宽度在320时,我只需要按px写,回头把px换成 /@r就可以了。@r是less的变量, @r:32rem 。加上window.resize ,屏幕尺寸变化的时候动态调整一下rem。

(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    resizeFn ();
    window.onresize = function(){
        resizeFn ();
    };
    function resizeFn (){
        var width = docEl.getBoundingClientRect().width;
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
    };
})(window);

二、调整一屏显示

一屏显示这个问题,在手机上是必须面对的。我的方法是,将html,body都设置min-height:100%。然后给#rootcontainer一个height:100%和min-height:500/@r.这个500是看情况定的。最终目的是高度足够的情况下,一屏显示。高度达到一个阈值之后,让她能够滑动。这样不至于有的手机出现显示不全的问题。

三、优化加载效果

我给body一个对应的背景色,这样加载的时候不至于大白瓶。然后将loading动画剧中显示。这里的居中我是这样做的

line-height: 300px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
我用的flex属性居中。在不支持flex属性的时候,会默认走line-height这个,不至于顶格。但这个是嵌在app中的,理论上不存在不支持flex的可能。

由于不涉及到点击等操作,我将rootcontainer的opacity属性设置成0,然后在window.onload的时候,将loading毙掉

$('#loading').animate({'opacity':'0'},300,function () {
            $(this).css('display','none');
        });
同时让rootcontainer的opacity变回来
$('#qiandao-warp').animate({'opacity':'1'},500,function () {})
这样体验起来不会生硬。

四、js部分

这里我用原型模式写的方法,变量写在了this下。由于项目不大,没有做进一步的分离。

先定义共用变量

 function Qiandao(date) {
        this.SignedDate = date;                                         //已签到日期
        this.nowDate = new Date();
        this.year = this.nowDate.getFullYear();                         //年
        this.month =this.nowDate.getMonth()+1;                          //月
        this.date = this.nowDate.getDate();                             //日
        this.dateLength = new Date(this.year,this.month,0).getDate();   //当月总天数
        this.firstDayWeek = new Date(Date.UTC(this.year,this.month-1, 1)).getDay()//new Date('2017,06,01').getDay();      //当月第一天是周几
    }
然后创建初始化方法。
Qiandao.prototype.init = function () {                              //初始化
        var $container = $('#qiandao-ul'),
            $str = '',
            $firstPos = this.getFirstPosition();

        for(var i=1;i'+'德邦'+'') : ($str+='
  • '+i+'
  • '); }else{ (this.debangri(i))? ($str+='
  • '+'德邦'+'
  • ') : ($str+='
  • '+i+'
  • '); } } $container.html($str); $container.find('li').eq(0).css('marginLeft',$firstPos/32+'rem'); //第一个日期位置偏移 $('#cur-date').html(this.year+'年'+this.month+'月'+this.date+'日'); };
    然后创建用得到的共用方法
    //第一个日期偏移量
        Qiandao.prototype.getFirstPosition = function () {
            var firstLeft = this.firstDayWeek*40;
            return firstLeft;
        };
        //是否已签到
        Qiandao.prototype.ckSigned = function (index) {
            var ck = false;
            for(var i=0;i
    调用这个对象,并将已签到的日期传进去。这个日期是通过ajax从后台获取的。
    
        var qd1 = new Qiandao(signedDate);
        qd1.init();
    然后是加载完成后的部分
        //加载完成后
        $(window).load(function () {
            $('#loading').animate({'opacity':'0'},300,function () {
                $(this).css('display','none');
            });
            $('#qiandao-warp').animate({'opacity':'1'},500,function () {
                    $('.signed').addClass('active');
                    setTimeout(function () {
                        var obj = qd1.getCurrentObj();
                        obj.append('+2');
                        obj.addClass('currentDay');
                        setTimeout(function () {
                            //用layer 插件弹层
                            layer.open({
                                type: 1,
                                anim:5,
                                closeBtn:false,
                                shade :0.4,
                                shadeClose:true,
                                title: false, //不显示标题
                                content: $('#alert')
                            });
                            $('#alert').click(function () {
                                layer.closeAll()
                            })
                        },1000)
                    },800)

    随机浏览