页面的技术总结
回来疯狂玩耍了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.