承蒙以前領(lǐng)導(dǎo)的抬愛，還在兼職做著前端項(xiàng)目，以至于沒被代碼的浪花完全拍在沙灘上。
嚴(yán)格保密是“外包”人員的基本素養(yǎng)

頁面不多。設(shè)計(jì)的小功能倒是還有幾個(gè)。。記性真的不行。主要為了提醒我自己
css方面：

1.限制文本行數(shù)

一個(gè)文本標(biāo)簽里限制最多顯示三行的內(nèi)容，超出用...代替
p {
-webkit-line-clamp: 3; /設(shè)置多少行/
-webkit-box-orient: vertical; /必須結(jié)合的屬性,設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式/
overflow: hidden; /文本會(huì)被修剪，并且剩余的部分不可見/
text-overflow: ellipsis; /顯示省略號(hào)來代表被修剪的文本/
display: -webkit-box;
}

2.設(shè)置滾動(dòng)條樣式

一段文本設(shè)置高度加overflow:auto時(shí),當(dāng)內(nèi)容超過當(dāng)前高度就會(huì)出現(xiàn)滾動(dòng)條。但是在手機(jī)上的默認(rèn)顯示效果是如果不滑動(dòng)那里就不會(huì)出現(xiàn)滾動(dòng)條。而現(xiàn)在的需求是不滑動(dòng)的時(shí)候也要顯示滾動(dòng)條的存在

image.png

       div::-webkit-scrollbar {     /* 設(shè)置滾動(dòng)條的bg的樣式 */   
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #1e4ea8;
      }
     div::-webkit-scrollbar:vertical {  /* 設(shè)置垂直滾動(dòng)條寬度 */ 
    width: 10px;
     }
    div::-webkit-scrollbar-thumb { /*設(shè)置滾動(dòng)條里面小塊的樣式*/
    border-radius:5px;
    background-color: #4b71b9;
    }

補(bǔ)充：滾動(dòng)條組成：
::-webkit-scrollbar 滾動(dòng)條整體部分
::-webkit-scrollbar-thumb 滾動(dòng)條里面的小方塊，能向上向下移動(dòng)（或往左往右移動(dòng)，取決于是垂直滾動(dòng)條還是水平滾動(dòng)條）
::-webkit-scrollbar-track 滾動(dòng)條的軌道（里面裝有Thumb）
::-webkit-scrollbar-button 滾動(dòng)條的軌道的兩端按鈕，允許通過點(diǎn)擊微調(diào)小方塊的位置。
::-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動(dòng)條中間部分（除去）
::-webkit-scrollbar-corner 邊角，即兩個(gè)滾動(dòng)條的交匯處
::-webkit-resizer 兩個(gè)滾動(dòng)條的交匯處上用于通過拖動(dòng)調(diào)整元素大小的小控件

3.設(shè)置input框默認(rèn)字體的顏色

::-webkit-input-placeholder { /* WebKit browsers */
color: #d9d8d8;
font-size: 0.34rem;
}

4.提示我自己：因?yàn)槿钟玫亩际莚em。遇到的一個(gè)問題是三行的文本必須要限制個(gè)高度。避免文本字?jǐn)?shù)不一樣出現(xiàn)一下一上。遇到的問題是，不同屏幕高度（ipad和ihphne x）的計(jì)算不一樣。最后調(diào)整了行高，行高也用了rem

簡(jiǎn)潔版

js方面：
總結(jié)幾個(gè)用到的小方法

1.獲取當(dāng)前時(shí)間

    //方法
function date(){
    function getNow(s) {
        return s < 10 ? '0' + s: s;
    }
    var myDate = new Date();      
    var year=myDate.getFullYear();        //獲取當(dāng)前年
    var month=myDate.getMonth()+1;   //獲取當(dāng)前月
    var date=myDate.getDate();            //獲取當(dāng)前日
    var h=myDate.getHours();              //獲取當(dāng)前小時(shí)數(shù)(0-23)
    var m=myDate.getMinutes();          //獲取當(dāng)前分鐘數(shù)(0-59)
    var s=myDate.getSeconds();
    var now=year+'-'+getNow(month)+"-"+getNow(date)+"         
                                "+getNow(h)+':'+getNow(m)+":"+getNow(s);
    return now;
}
   //調(diào)用 date()
   顯示![image.png](https://upload-images.jianshu.io/upload_images/1840293-50567213ff0b2ca2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.獲取地址欄url上面的參數(shù)

例1：https://www.gaoyue.com/vote/app/13/8

function getUrlParam() {  //返回的是8
    // 獲取參數(shù)
    var url = window.location.pathname;
    var param_arr = url.split("/");
    return param_arr[4];

}
例2：https://www.gaoyue.com?bill=8

function getUrlParam(key) {
    // 獲取參數(shù)
    var url = window.location.search;
    // 正則篩選地址欄
    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
    // 匹配目標(biāo)參數(shù)
     var result = url.substr(1).match(reg);
    //返回參數(shù)值
    return result ? decodeURIComponent(result[2]) : null;
}
    getUrlParam(bill)  //調(diào)用返回8

3.手機(jī)獲取驗(yàn)證碼后的60s倒計(jì)時(shí)

function settime(countdown) { //countdown為時(shí)間，單位s
if (countdown == -1) {
countdown = countdown;
//此處要清空?qǐng)D片驗(yàn)證碼的input的value值
return;
} else {
downobj.html(countdown + "s重新獲取");
countdown--;
}
setTimeout(function() {
settime(obj,downobj,countdown) }
,1000)
}

4.ajax數(shù)據(jù)交互示例

   $('#entry-btn').click(function(){ //發(fā)布評(píng)論按鈕
    var com_value = $('#entry-kuang').val();  //評(píng)論內(nèi)容
    var time = date();  //系統(tǒng)當(dāng)前時(shí)間
    var name = '熱心網(wǎng)友';
    var itemDom = $('#vote-item').find('li'); //項(xiàng)目id
    var itemId = [];
    
    for(var i=0; i<itemDom.length; i++) {
        itemId[i] = itemDom.eq(i).attr('item_id');
    }
    
    if(com_value.length > 0){ //判斷輸入框不能為空
        $.ajax({
            url:"/vote/add-comment",
            type:"POST",
            data:{
                    "bill_id":billId, 
                    "content":com_value,
            },
            dataType:"json",
            success: function(result){
                if(result.code == "10000"){
                   //評(píng)論成功執(zhí)行的操作
                   alert('感謝您的評(píng)論，我們會(huì)盡快審核。');
                                      $('#entry-kuang').val('');
                }
            }

        })
    } else {
        alert('評(píng)論內(nèi)容不能為空');
    }
})

5.提示我自己

需求：當(dāng)滾動(dòng)條滾動(dòng)到一定的高度，菜單欄一直固定在屏幕上端。實(shí)現(xiàn)很輕松，但是固定和不固定切換的時(shí)候，頁面主體內(nèi)容會(huì)跳一下。原因是，菜單欄所占的高度在fixed定位時(shí)一下消失了，上面的內(nèi)容就自動(dòng)的補(bǔ)齊到上面，視覺上會(huì)跳一下。解決方法：獲取菜單欄的高度，當(dāng)fixed時(shí)候，把主體內(nèi)容加一個(gè)padding-top等于菜單欄的高度

6.封裝一個(gè)隨時(shí)可用的cookie，比如保留24小時(shí)的cookie（以下這段內(nèi)容來自互聯(lián)網(wǎng)，作者是誰真的忘了，不好意思）

//hours為空字符串時(shí),cookie的生存期至瀏覽器會(huì)話結(jié)束。hours為數(shù)字0時(shí),建立的是一個(gè)失效的cookie,這個(gè)cookie會(huì)覆蓋已經(jīng)建立過的同名、同path的cookie（如果這個(gè)cookie存在）。

   function setCookie(name,value,hours,path){ 
    var name = escape(name); 
    var value = escape(value); 
    var expires = new Date(); 
    expires.setTime(expires.getTime() + hours*3600000); 
    path = path == "" ? "" : ";path=" + path; 
    _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString(); 
    document.cookie = name + "=" + value + _expires + path; 
} 

//獲取cookie值 方法

   function getCookieValue(name){ 
      var name = escape(name); 
    //讀cookie屬性，這將返回文檔的所有cookie 
    var allcookies = document.cookie;        
    //查找名為name的cookie的開始位置 
    name += "="; 
    var pos = allcookies.indexOf(name);     
    //如果找到了具有該名字的cookie，那么提取并使用它的值 
    if (pos != -1){                                             //如果pos值為-1則說明搜索"version="失敗 
        var start = pos + name.length;                  //cookie值開始的位置 
        var end = allcookies.indexOf(";",start);        //從cookie值開始的位置起搜索第一個(gè)";"的位置,即cookie值結(jié)尾的位置 
        if (end == -1) end = allcookies.length;        //如果end值為-1說明cookie列表里只有一個(gè)cookie 
        var value = allcookies.substring(start,end);  //提取cookie的值 
        return unescape(value);                           //對(duì)它解碼       
        }    
    else return "";                                             //搜索失敗，返回空字符串 
}

//把用戶手機(jī)號(hào)存入一個(gè)Cookie

setCookie('iphoneNum', 13178957841, 720, '/');

//判斷24小時(shí)內(nèi)是否驗(yàn)證過

var useriphone = getCookieValue("iphoneNum"); //獲取cookie保存的手機(jī)號(hào)
if (useriphone != ' ' ) {
 //說明13178957841這個(gè)用戶720內(nèi)登陸過
}