一個頁面的技術總結

頁面的技術總結

回來瘋狂玩耍了5天，終於有時間敲一敲代碼了，那麼就從一個京東的首頁開始吧！

項目總覽圖

Github在線鏈接地址
https://singh-1995.github.io/jd-index/#

只是一個非常簡單的頁面，不過仍舊有一些不錯的 css 和 JavaScript 代碼技巧可以總結出來分享。

何爲技巧？ 表現在藝術、工藝、體育等方面的巧妙的技能；在代碼中的體現則是更爲高效，簡潔，易修改。

以下爲本項目的代碼片段，如有更好的方法歡迎指教：

• 巧用 :not 與 :last-child 選擇器組合

.main .Recommend a:not(:last-child) {
 margin-bottom: 10px;
}

意爲選擇非最後一個a元素以外的所有a元素添加` margin-bottom: 10px;

• :nth-child選擇器

.direction .content-box li:nth-child(5n) {
 margin-right: 0px;
}

:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型。這裏(5n)的意思就是每第五5個元素選擇一次。選擇偶數:nth-child(2n) ，選擇奇數:nth-child(2n-1)

• 巧用類名和兄弟選擇器

.direction .title-classify li .title + div {
 color: #E1251B;
}
.direction .title-classify li div {
 color: #999;
}

過類名改變屬性的同時使用+改變器兄弟元素的屬性

• 巧用僞元素添加分隔線

.direction .title-classify li:not(:first-child)::before {
 position: absolute;
 content: "";
 top: 0;
 left: 0;
 width: 1px;
 height: 40px;
 background: linear-gradient(180deg,#fff,#dfdfdf,#fff);
}

就是中間這條線了，使用僞元素最大的好處是它可以簡化頁面的html標籤同時他們不是真正的頁面元素，善於使用僞元素可以讓你的頁面更加地簡潔優雅。

• 多行文本實現末尾省略號

.direction .content-box li .Product-name {
.overflow: hidden;
.text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

核心代碼-webkit-line-clamp: 2;實現第二行溢出文本省略號

JavaScript部分 實現一個倒計時的功能

如果小於10點將實現以10點爲基準的倒計時間表

如果大於10點則活動結束

• 核心代碼

function showTime(){  
  var h = new Date().getHours(),  //獲取當前時
      m = new Date().getMinutes(), //獲取當前分
     mi = new Date().getSeconds(); //獲取當前秒
  try{
   if(h < 0){  //判斷當前時間是否大於 10    
    boxText[0].innerHTML = (h - 10) < 10 ? "0" + (10 - h ) : 10 - h;
    boxText[1].innerHTML = (60 - m) < 10 ? "0" + (60 - m) : 60 - m;
    boxText[2].innerHTML = (60 - mi) < 10 ? "0" + (60 - mi) : 60 - mi;   
   }
   throw "今日秒殺已結束"
  }catch(e){      
   countTime.innerHTML = e;
   if(h < 0){
    countTime.innerHTML = "10點秒殺倒計時";    
   }
  }
 }
 setInterval(function(){
  showTime()
 },
 1000)

非常簡單的一個功能，只需要大小比較和加減法就搞掂的啦

第一步 獲取當前時間字段

var date = new Date;

第二步 判斷當前時間是否小於10

if(h < 10){  //判斷當前時間是否小於 10    
    boxText[0].innerHTML = (h - 10) < 10 ? "0" + (10 - h ) : 10 - h;
    boxText[1].innerHTML = (60 - m) < 10 ? "0" + (60 - m) : 60 - m;
    boxText[2].innerHTML = (60 - mi) < 10 ? "0" + (60 - mi) : 60 - mi;   
   }

第三步 當前時間大於10我們要做的事

 throw "今日秒殺已結束"
  }catch(e){      
   countTime.innerHTML = e;
   if(h < 10){
    countTime.innerHTML = "10點秒殺倒計時";    
   }
  }

okj就這樣搞掂了一個項目
我是singh，歡迎訪問我的Github主頁
鏈接: link.