JavaScript实现课工场论坛发贴

最新推荐文章于 2024-03-13 16:05:34 发布

hanq2016

最新推荐文章于 2024-03-13 16:05:34 发布

阅读量712

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/hanq2016/article/details/133852302

版权

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部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>课工场论坛发贴</title>
    <link rel="stylesheet" href="css/task2.css" />
  </head>
  <body>
    <div class="bbs">
      <header><span class="span-1">我要发帖</span></header>
      <section>
        <ul id="postList"></ul>
      </section>
      <div class="post" id="post">
        <input class="title" placeholder="请输入标题（1-50个字符）" id="title" />
        所属版块：<select id="sec">
          <option>请选择版块</option>
          <option>电子书籍</option>
          <option>新课来了</option>
          <option>新手报到</option>
          <option>职业规划</option>
        </select>
        <textarea class="content" id="content"></textarea>
        <input class="btn" value="发布" />
      </div>
    </div>
    <script src="js/task2.js"></script>
  </body>
</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. 效果图

hanq2016

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现课工场论坛发贴

2-3 使用 appendChild ( )把头像、标题、版块、时间插入到页面中。2-2 使用函数 floor( )和 random( )随机获取发帖者的头像。1-3 单击“发布”按钮，新发布的帖子显示在列表的第一个，2-4 设置 value 值为空来清空当前输入框中的内容。1-2 在标题框中输入标题，选择所属版块，输入帖子内容。1-4 新帖子显示头像、标题、版块和发布时间。1-1 单击我要发贴，弹出发贴界面。2-1 使用数组保存发帖者的头像。3-1 html部分。
复制链接

扫一扫