js实现简单功能合集（一）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

记录一下在工作和学习上利用js实现的一些简单功能，会整理成一个专栏，持续记录更新。

1. 页面内容阅读完毕，则激活关闭按钮，点击可以关闭当前页面。反之，点击关闭按钮无效

a. 页面内容很多需要滑动到最底部，激活关闭按钮

监听页面滚动事件，比较页面滚动的距离和可视区的高度是否大于等于页面的高度，为真就表示页面滑动到最底部

scrollTop：页面滚动时，距离顶部的距离

clientHeight：可视区的高度

scrollHeight：内容的高度

    window.onscroll = function () {
    let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
    if (clientHeight + scrollTop >= scrollHeight) {
        //激活按钮
        ...
    }
};

b. 页面内容只展示一屏，直接激活关闭按钮

方法一：比较内容高度是否小于等于可视区的高度，为真，激活关闭按钮

方法二：判断页面是否滚动

首先控制页面先滚动一定值，然后判断当前滚动值是否等于0，如果等于0就说明页面没有滚动

注：如果一个元素不能被滚动，scrollTop将被设置为0。

document.documentElement.scrollTop = 10; 
if (document.documentElement.scrollTop == 0) { 
    //激活按钮
} 
document.documentElement.scrollTop = 0;

2. 实时统计textarea字数，并限制字数长度

使用maxlength属性控制字数最大长度。

监听 input 事件（当一个 input, select, 或 textarea元素的 value 被修改时，会触发该事件），当值发生改变时，改变显示的字数

const textArea = document.querySelector('textarea')；
textArea.addEventListener('input', countWords);
// propertychange：IE专属的事件，当前对象属性发生改变，会触发该事件
// textArea.addEventListener('propertychange', countWords);
function countWords(){
    let len = this.value.length;
    if (len > 100) {
        return false;
    }
    const wordEle = document.querySelector('.count-change')；
    wordEle.innerHTML = len
}

3.实现全选

a. 点击全选按钮，实现页面的列表全部选中/全部取消选中

循环所有列表，将每个列表的状态设为全选按钮的状态

const items = document.getElementsByName("checkbox");
const allCheck = document.getElementById("all");
allCheck.onclick = function () {
  const flag = this.checked;
  for (var i = 0; i < items.length; i++) {
    items[i].checked = flag;
  }
}

b. 点击每个列表，列表全部为选中状态，则全选按钮为选中状态；只要列表有一个没有被选中，则取消全选按钮选中状态

当列表点击时，定义一个选中数量。循环列表，获取每个列表选中的状态，为真则选中数量增加。最后对比选中数量是否和列表长度相等，为真则说明全部选中

items.forEach(function () {
  this.onclick = function () {        
    let len = items.length
    let checkNumber = 0
    for (var i = 0; i < len; i++) {
      let value = items[i].checked 
      if (value) {
        checkNumber++
      }
    }
    allCheck.checked = (len == checkNumber)
  }
});

4. 展示当前时间

获取当前时间的年、月、日、时、分、秒，并每隔一秒重新执行获取时间的方法；且页面初始化时，需要首先执行一次

let timer = null;
timer = setTimeout(time,1000);
function time(){
    clearTimeout(timer); //清除定时器
    let now = new Date();
    let y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate(),
        h = now.getHours(),
        minutes = now.getMinutes(),
        s = now.getSeconds();
    document.querySelector(".now_time").innerHTML = '当前时间: '+ y +'年'+ m +'月'+ d +'日 '+ h +'时'+  minutes +'分'+ s +'秒';
   timer = setTimeout(time,1000);
}