JavaScript实现课工场论坛发贴

1. 需求

        1-1 单击我要发贴，弹出发贴界面

        1-2 在标题框中输入标题，选择所属版块，输入帖子内容

        1-3 单击“发布”按钮，新发布的帖子显示在列表的第一个，

        1-4 新帖子显示头像、 标题、版块和发布时间

2. 实现思路

        2-1 使用数组保存发帖者的头像

        2-2 使用函数 floor( )和 random( )随机获取发帖者的头像

        2-3 使用 appendChild ( )把头像、标题、版块、时间插入到页面中

        2-4 设置 value 值为空来清空当前输入框中的内容

        2-5 使用 style 属性隐藏发新贴界面

3. 实现代码

        3-1 html部分

  
    
    
    
    
  
  
    

      
我要发帖
      

        

      
      

        
        所属版块：
          请选择版块
          电子书籍
          新课来了
          新手报到
          职业规划
        
        
        
      
    
    
  

        3-2 css部分

* {
  margin: 0;
  padding: 0;
  font-family: 'Arial', '微软雅黑';
}
ul,
li {
  list-style: none;
}
.bbs {
  margin: 0 auto;
  width: 600px;
  position: relative;
}
header {
  padding: 5px 0;
  border-bottom: 1px solid #cecece;
}
header span {
  display: inline-block;
  width: 220px;
  height: 50px;
  color: #fff;
  background: #009966;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  border-radius: 8px;
  cursor: pointer;
}
.post {
  position: absolute;
  background: #ffffff;
  border: 1px #cccccc solid;
  width: 500px;
  left: 65px;
  top: 70px;
  padding: 10px;
  font-size: 14px;
  z-index: 999999;
  display: none;
}
.post .title {
  width: 450px;
  height: 30px;
  line-height: 30px;
  display: block;
  border: 1px #cecece solid;
  margin-bottom: 10px;
}
.post select {
  width: 200px;
  height: 30px;
}
.post .content {
  width: 450px;
  height: 200px;
  display: block;
  margin: 10px 0;
  border: 1px #cecece solid;
}
.post .btn {
  width: 160px;
  height: 35px;
  color: #fff;
  background: #009966;
  border: none;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 35px;
  border-radius: 8px;
  cursor: pointer;
}

.bbs section ul li {
  padding: 10px 0;
  border-bottom: 1px #999999 dashed;
  overflow: hidden;
}
.bbs section ul li div {
  float: left;
  width: 60px;
  margin-right: 10px;
}
.bbs section ul li div img {
  border-radius: 50%;
  width: 60px;
}
.bbs section ul li h1 {
  float: left;
  width: 520px;
  font-size: 16px;
  line-height: 35px;
}
.bbs section ul li p {
  color: #666666;
  line-height: 25px;
  font-size: 12px;
}
.bbs section ul li p span {
  padding-right: 20px;
}

        3-3 js部分

const span1 = document.getElementsByClassName('span-1')[0]
const btn = document.getElementsByClassName('btn')[0]
const ul = document.getElementById('postList')
const title = document.getElementById('title')
const sec = document.getElementById('sec')
const post = document.getElementById('post')
const arr = ['img/tou01.jpg', 'img/tou02.jpg', 'img/tou03.jpg', 'img/tou04.jpg']
// 点击显示表单对话框
span1.onclick = function () {
  post.style.display = 'block'
}
// 点击发布按钮隐藏对话框
btn.onclick = function () {
  let firstEl = ul.firstElementChild
  let li = createLi()
  if (firstEl) {
    ul.insertBefore(li, firstEl)
  } else {
    ul.appendChild(li)
  }
  resetFields()
  post.style.display = 'none'
}

// 组装li元素
function createLi() {
  let li = document.createElement('li')
  // 组装div
  let div = document.createElement('div')
  let img = document.createElement('img')
  img.src = getSrc()
  div.appendChild(img)
  li.appendChild(div)
  // 组装h1
  let h1 = document.createElement('h1')
  let titleValue = title.value
  if (!titleValue || !titleValue.trim()) {
    return alert('标题不能空')
  }
  h1.innerHTML = titleValue
  li.appendChild(h1)
  // 组装p
  let p = document.createElement('p')
  let span = document.createElement('span')
  let secValue = sec.value
  if (!secValue || !secValue.trim()) {
    return alert('板块不能空')
  }
  span.innerHTML = `版块：${secValue}`
  p.appendChild(span)
  span = document.createElement('span')
  let date = formatDate()
  span.innerHTML = `版块：${date}`
  p.appendChild(span)
  li.appendChild(p)
  return li
}

// 获得随机图片的src
function getSrc() {
  return arr[Math.floor(Math.random() * arr.length)]
}

// 格式化日期：yyyy-MM-dd hh:mm:ss
function formatDate() {
  let date = new Date()
  let y = pad0(date.getFullYear())
  let m = pad0(date.getMonth() + 1)
  let d = pad0(date.getDate())
  let h = pad0(date.getHours())
  let M = pad0(date.getMinutes())
  let s = pad0(date.getSeconds())
  return [y, m, d].join('-') + ' ' + [h, M, s].join(':')
}

// 数字不满足2位，在前面加0
function pad0(v) {
  return v < 10 ? '0' + v : v
}

// 重置表单域
function resetFields() {
  // 标题表单域清空
  title.value = ''
  // 第1个option选中
  sec.getElementsByTagName('option')[0].selected = true
}

4. 效果图