为留言板添加字数实时统计与禁止超出功能; 2. 自选一些字符串和数组方法进行实例演示

1. 留言板添加字数与限制字符

   留言板

const comment = document.querySelector('.comment');
const content = comment.content;
const submitBtn = comment.submit;
const commentList = document.querySelector('.list');
添加字数,限制字符,新留言前置
submitBtn.onclick = (ev) => {
  let value = content.value.trim();
  if (value.length > 0 && value.length <= 100) {
    const newComment = document.createElement("li");
    newComment.textContent = value;
    newComment.style.borderBottom = "1px solid white";
    newComment.style.minHeight = "3em";
新留言前置，留言成功
commentList.prepend(newComment);
    alert("left message successful");
清空留言，无内容或超字数
content.value = null;
    content.focus();
  } else {
    alert("no content or too many words");
    content.focus();
    return false;
  }
};
添加删除留言button
newComment.append(deleteBtn);
const deleteBtn = document.createElement(“button”);
deleteBtn.textContent = “delete”;
deleteBtn.style.float = “right”;
deleteBtn.classList.add(“del-btn”);
确定是否删除
deleteBtn.onclick = function () {
if (confirm(“are you sure delete”)) {
  this.parentNode.remove();
  alert("delete successful");
  content.focus();
  return false;
  }
};

2. 字符串和数组 concat()拼装 slice(start, end)取子串 substr(start, size): 取子串 trim(): 删除字符串二边的空白字符 将字符串打散成数组