search

bizhong / frontend

📝 书山有路勤为径，学海无涯苦作舟。
MIT License
0 stars 0 forks source link

2017 年 8 月 #1

Open bizhong opened 7 years ago

bizhong commented 7 years ago

时间戳转换为日期格式

时间戳转换为日期格式（今天、昨天、月日、年月日）。

// 扩展 Date，将 Date 转化为指定格式的 String
Date.prototype.format = function(format) {
  var date = {
    'M+': this.getMonth() + 1,                  // 月份
    'd+': this.getDate(),                       // 日
    'h+': this.getHours(),                      // 小时
    'm+': this.getMinutes(),                    // 分
    's+': this.getSeconds(),                    // 秒
    'q+': Math.floor((this.getMonth() + 3) / 3),// 季度
    'S': this.getMilliseconds()                 // 毫秒
  };
  if (/(y+)/i.test(format)) {
    format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  for (var k in date) {
    if (new RegExp('(' + k + ')').test(format)) {
      format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? date[k] : ('00' + date[k]).substr(('' + date[k]).length));
    }
  }
  return format;
};

// 时间戳转换为日期格式（今天、昨天、月日、年月日）
function formatDate(beginTime, endTime) {
  var nowTime = new Date().getTime();
  var nowYear = new Date().getFullYear();
  var day = new Date().getDay();

  beginTime = beginTime * 1000;
  var secondNum = parseInt((nowTime - beginTime) / 1000);// 计算时间戳差值
  if (secondNum < 3600*24*1 && secondNum > 0 && new Date(beginTime).getDay() == day) {// 今天
    return '今天';
  } else if (secondNum < 3600*24*2 && secondNum > 0 && new Date(beginTime + 3600*24*1000).getDay() == day) {// 昨天
    return '昨天';
  } else {
    var year = new Date(parseInt(beginTime)).format('yyyy');
    if (parseInt(nowYear - year)) {// 年月日
      var date = new Date(parseInt(beginTime)).format('yyyy年M月d日');
    } else {// 月日
      var date = new Date(parseInt(beginTime)).format('M月d日');
    }
    return date;
  }
}
bizhong commented 7 years ago

点击事件多次触发问题

在元素结尾插入字符串拼接生成的列表，并为每个列表项目定义点击事件：列表项目点击多次之后，每次点击事件会触发两次（jQuery 中 click 事件累计绑定导致）。

解决方法：on() 方法前使用 off() 方法。

jQuery off() 方法常用于移除通过 on() 方法添加的事件处理程序。

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

$('.lanbizhong').off().on('click', function() {
  //...
});
bizhong commented 7 years ago

地址栏 hash 值

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

window.location.hash 属性可读可写：

作用：每一次改变 # 后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。

// 当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发
$(window).on('hashchange', function() {
  //...
});
bizhong commented 7 years ago

Android 上 line-height 不垂直居中问题

设置 line-height 属性让文字垂直居中：在 PC 端、iOS 设备上垂直居中，但在 Android 设备上文字偏上。

解决方法：不设置 height、line-height 情况下，使用 CSS3 transform 属性的 2D 转换 translate(x,y)。

<div class="lanbizhong">
  <span class="lanbizhong-text">兰必钟</span>
</div>
.lanbizhong {
  position: relative;
  width: 100%;
  height: 100px;
  text-align: center;
}
.lanbizhong-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

实现代码太多，目前还没有找到更好的解决办法！

bizhong commented 7 years ago

图片水平垂直居中

图片尺寸（width x height）：100 x H、W x 100。

<div class="lanbizhong">
  <ul class="lanbizhong-img">
    <li>
      <img src="default.jpg" data-src="0.jpg">
    </li>
    <li>
      <img src="default.jpg" data-src="1.jpg">
    </li>
    <li>
      <img src="default.jpg" data-src="2.jpg">
    </li>
    <li>
      <img src="default.jpg" data-src="3.jpg">
    </li>
    <li>
      <img src="default.jpg" data-src="4.jpg">
    </li>
  </ul>
</div>
.lanbizhong {
  width: 286px;
  height: 132px;
}
.lanbizhong-img {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  z-index: 0;
  padding: 16px 12px;
  width: auto;
  height: 100px;
  font-size: 0;
  white-space: nowrap;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.lanbizhong-img li {
  display: inline-block;
  overflow: hidden;
  position: relative;
  margin: 0 4px;
  border-radius: 2px;
  width: 100px;
  height: 100px;
  background: #f2f2f2;
}
.lanbizhong-img li img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

如果小图要填满，修改 .lanbizhong-img li img 代码为：

.lanbizhong-img li img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

如果大图要缩小适应， 规则为：

图片宽高比较 设置 width、height
width > height width: auto; height: 100%;
width < height width: 100%; height: auto;

修改 .lanbizhong-img li img 代码为：

.lanbizhong-img li img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

width: auto; height: 100%; 需要借助 JavaScript 动态选择添加。主要代码为（jQuery）：

//...
var img = new Image();
img.src = '//lanbizhong.com/' + $(this).attr('data-src');// 绝对地址
img.onload = function(e) {
  if ($(this).width() > $(this).height()) {
    $(this).css({'width': 'auto', 'height': '100%'});
  }
};
$(this).parent().html(img);
//...
bizhong commented 7 years ago

image-set()

image-set() 可以根据用户设备的分辨率匹配合适的图像。

.lanbizhong {
  background-image: url(lanbizhong.png); /* 普通屏 */
  background-image: -webkit-image-set(url(lanbizhong.png) 1x, url(lanbizhong@2x.png) 2x); /* Retina 高清屏 */
}
bizhong commented 7 years ago

CSS 属性声明顺序

Code Guide by @AlloyTeam

bizhong commented 7 years ago

正方形块

随着屏幕宽度变化的正方形块：

.lanbizhong {
  padding-bottom: 25%;
  width: 25%;
  height: 0;
}

相邻正方形块有间距，借助 CSS3 calc() 计算：

.lanbizhong {
  float: left;
  margin: 2px;
  padding-bottom: calc(25% - 4px);
  width: calc(25% - 4px);
  height: 0;
}