阅读器制作 问题总汇

一  有关css 

 

单行  句末显示 ...

p{
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 

 

多行  句末显示 ...

 

之前一直用 这种写法  

    p{
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
    }

　　

查了一下官方文档 

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

如果使用 text-align: justify;  会出现这种bug 

换了这种写法

.book-article section .nr-brief{
    font-size: .44rem;
    color: #4c4c4c;
    line-height: .9rem;
    text-align: justify;
    display: block;
    overflow: hidden;
    max-height: 2.7rem; 
    position: relative;
}
.book-article section .nr-brief::after{
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: .9rem;
    background: -webkit-linear-gradient(to right,rgba(255,255,255,0),#fff .8rem); 
    background: linear-gradient(to right,rgba(255,255,255,0),#fff .8rem);
}

注： 颜色用rgba 某博客用  background: linear-gradient(to right, transparent, #fff 55%);  在手机端 有黑色透明背景

效果如下

 

 

同样可以这样应用于其他展示   比如下面 

 

二  有关js

几个小算法 

1. 16个数  每次展示5个  循环展示 

    var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
    var pagenum = 0;
    function change(){
        var arrList = [];
        for(var i=0; i<5; i++){
            var j = (pagenum * 5 + i) % arr.length;
            arrList.push(arr[j]+'~');
        }
        pagenum ++;
        $('#num').html(arrList);
    }
    $('.change').on('click', function(){
        change();
    });

 

2. 限时免费倒计时

var setFreeTime = function(remainTime){
    var timer = setInterval(function(){
        remainTime = remainTime - 1000;
        if(remainTime > 0){
            sec = (remainTime - remainTime%1000)/1000;
            var s = sec%60;
            var m = (sec%3600-s)/60;
            var h = (sec - sec%3600)/3600;
            if(s<10) s = '0'+s;
            if(m<10) m = '0'+m;
            if(h<10) h = '0'+h;
            $('#time').html(' '+ h +':'+ m +':'+ s);
        }else{
            $('#time').html('：已结束');
            clearInterval(timer);
        }
    },1000);
};
setFreeTime(129999);

还有一种用setTimeout 写的  可以在 funtion中  用 arguments.callee 

var timeZoneOff = new Date().getTimezoneOffset() * 60 * 1000, endTime = 0;
var updateFreeTime = function(){
    if(isNaN(endTime)){
        endTime = 0;
    }
    var t;
    var left = setTimeout(function(){

        t = endTime - new Date();
      
        if(t > 0){
            $('#leftTime').html(tools.dateFormat(new Date(t + timeZoneOff), 'hh:mm:ss'));
            setTimeout(arguments.callee, 1000);
        }else{
            getState();
        }
    }, 1000);
};

　　

三  有关history

简单回忆

history.go(‘-1’) 后退 之前页面表单依旧存在  

history.back() 后退  之前表单数据刷新不存在 

history.replace('xxx') 里面要写地址 不写地址 本页刷新页面地址最后若有#    会把#去掉 

需求与实现方法 

需求  小说阅读器 点击返回 退出阅读器 

方法  进入阅读器  页面是freemarker 模板生成的动态页面    点击下一章  发ajax请求下一章内容

用 history.puhState(null, null, '/chapter/...') 改变页面地址  理论上第二个参数 是页面title  但是没有用！ 只能用document.title = xxx; 改了 

遇到问题  后退会返回上一章 

解决方法 history.replaceState(null, null, '/chapter/...')   就酱 页面不刷新 改变url url也不会被记录到history中  后退就会退出阅读器