2023-01-10

01 触发自定义事件

window.addEventListener('resize', function () {
  console.log('当前页面缩放比例应该是：' + Math.round(1000 * (outerWidth / innerWidth)) / 10 + '%')
})
window.dispatchEvent(new CustomEvent('resize'))

02 判断奇偶

n & 1 // 和 n % 2 结果一致，偶数返回 0，奇数返回 1

03 substr 与 substring 的区别

定义：

• substr(start,length) 第一个字符的索引是 0，start 必选，length 可选

• substring(start,end) 第一个字符的索引是 0，start 必选，end 可选

异同：

• 相同点：当有一个参数时，两者的功能是一样的，返回从 start 指定的位置直到字符串结束的子串

• 不同点：有两个参数时，

  • substr(start,length) 返回从 start 位置开始 length 长度的子串

  • substring(start,end) 返回从 start 位置开始到 end 位置的子串（不包含 end）

04 模拟微信对话的对称布局

<section class="msg-item">
  <img class="msg-avator" alt="武元润香" src="../images/bg-1.jpg" />
  <div class="msg-info">
    <span class="msg-user">武元润香</span>
    <div class="msg-txt">
      <p>没问题哟~</p>
    </div>
  </div>
</section>
<section class="msg-item" data-self>
  <img class="msg-avator" alt="唯我成幸" src="../images/bg-2.jpg" />
  <div class="msg-info">
    <span class="msg-user">唯我成幸</span>
    <div class="msg-txt">
      <p>大家有什么想要了解的吗？</p>
    </div>
  </div>
</section>

/* 设置direction:rtl，则水平文档流方向就是从右往左 */
.msg-item[data-self] {
  direction: rtl;
}

05 事件对象 currentTarget 属性

• event.target 表示点击的元素

• event.currentTarget 表示绑定事件的元素