一个页面的技术总结

页面的技术总结

回来疯狂玩耍了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.