javaScript留言板功能

柒沐子

已于 2023-08-28 16:23:10 修改

阅读量319

点赞数

文章标签： javascript 前端 java

于 2022-09-24 21:09:56 首次发布

本文链接：https://blog.csdn.net/l18937842167/article/details/127030868

版权

这段代码展示了如何使用JavaScript实现一个简单的网页交互功能，包括限制文本输入长度、显示字数统计以及点击发布按钮将内容展示到页面上。当用户在textarea中输入内容并点击发布按钮时，如果内容为空或者超过200字符，会给出提示；否则，内容会以li的形式添加到页面列表中，并附带当前时间戳。此外，代码还涉及到了CSS样式定义，用于美化界面布局。

摘要由CSDN通过智能技术生成

首先了解其结构，结构如下所示：

 <div class="w">
    <div class="controls">
      <img src="images/tip.png" alt=""><br>
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>

    </div>
    <div class="contentList">
      <ul>
      </ul>
    </div>
  </div>

css样式不过多补充，如下所示：

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.w {
  width: 900px;
  margin:0 auto;
}
.controls textarea {
  width: 878px;
  height: 100px;
  resize: none;
  border-radius: 10px;
  outline:none;
  padding-left: 20px;
  padding-top:10px;
  font-size: 18px;
}
.controls {
  overflow: hidden;
}

.controls div {
  float: right;
}
.controls div span {
  color:#666;
}
.controls div .useCount {
  color:red;
}
.controls div button {
  width: 100px;
  outline: none;
  border:none;
  background: rgb(0, 132, 255);
  height: 30px;
  cursor: pointer;
  color:#fff;
  font:bold 14px '宋体';
  transition: all 0.5s;
}
.controls div button:hover {
  background: rgb(0, 225, 255);
}
.controls div button:disabled {
  background: rgba(0, 225, 255,0.5);
}
.contentList {
  margin-top:50px;
}
.contentList li {
  padding: 20px 0;
  border-bottom: 1px dashed #ccc;
}
.contentList li .info {
  position: relative;
}
.contentList li .info span {
  position: absolute;
  top:15px;
  left:100px;
  font:bold 16px '宋体';
}
.contentList li .info p {
  position: absolute;
  top:40px;
  left: 100px;
  color:#aaa;
  font-size: 12px;
}
.contentList img {
  width: 80px;
  border-radius: 50%;
}
.contentList li .content {
  padding-left: 100px;
  color: #666;
  word-break: break-all;
}

js代码如下

  // 输入内容
    let area = document.querySelector('#area')
    //点击按钮
    let send = document.querySelector('#send')
    //限制输入字体长度
    let useCount = document.querySelector('.useCount')
    let contentList = document.querySelector('.contentList')
    let ul = document.querySelector('.contentList ul')

    // area.value.length
    //输入字数的长度赋值给span标签
    area.addEventListener('input', function () {
      useCount.innerHTML = area.value.length
    })

    //send点击事件
    send.addEventListener('click', function () {
      //获取文本框的内容
      // console.log(area.value)
      //检测内容长度是否为0

      /* 创建标签元素let p1 = document.createElement('p')
        将创建的标签元素赋值给其他元素
        lis.appendChild(p1)
      */
      if (area.value.length === 0 && area.value.length >200) {
        alert('输入内容不规范')
      } else {
        // 创建li标签
        let lis = document.createElement('li')
        // 把lis标签放入到ul身上
        ul.appendChild(lis);
        let info = document.createElement('div')
        info.classList.add('info')
        lis.appendChild(info)
        let img = document.createElement('img')
        info.appendChild(img)
        img.src = '../../../天选姬/Meme_12.png'
        let span = document.createElement('span')
        info.appendChild(span)
        span.innerHTML = area.value
        let p = document.createElement('p')
        info.appendChild(p)
        // 打包时间函数
        function time() {
          let date = new Date()
          let y = date.getFullYear()
          let m = date.getMonth()
          let d = date.getDay()
          let h = date.getHours()
          let minute = date.getMinutes()
          let s = date.getSeconds()
          return y + '年' + m + '月' + d + '日' + h + '时' + minute + '分' + s + '秒'
        }
        // 将打包的时间函数写入到以赋值的p标签里面
        p.innerHTML = time()
        let content = document.createElement('div')
        // 追加类名
        content.classList.add('content')
        // 将li标签打印
        lis.appendChild(content)
        // 点击发送按钮之后，清空内容框
        area.value = ''
      }
    })

注意：文件图片路径切记换成自己的路径