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

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <title>课工场论坛发贴title>
    7.     <link rel="stylesheet" href="css/task2.css" />
    8.   head>
    9.   <body>
    10.     <div class="bbs">
    11.       <header><span class="span-1">我要发帖span>header>
    12.       <section>
    13.         <ul id="postList">ul>
    14.       section>
    15.       <div class="post" id="post">
    16.         <input class="title" placeholder="请输入标题（1-50个字符）" id="title" />
    17.         所属版块：<select id="sec">
    18.           <option>请选择版块option>
    19.           <option>电子书籍option>
    20.           <option>新课来了option>
    21.           <option>新手报到option>
    22.           <option>职业规划option>
    23.         select>
    24.         <textarea class="content" id="content">textarea>
    25.         <input class="btn" value="发布" />
    26.       div>
    27.     div>
    28.     <script src="js/task2.js">script>
    29.   body>
    30. html>

            3-2 css部分

    1. * {
    2.   margin: 0;
    3.   padding: 0;
    4.   font-family: 'Arial', '微软雅黑';
    5. }
    6. ul,
    7. li {
    8.   list-style: none;
    9. }
    10. .bbs {
    11.   margin: 0 auto;
    12.   width: 600px;
    13.   position: relative;
    14. }
    15. header {
    16.   padding: 5px 0;
    17.   border-bottom: 1px solid #cecece;
    18. }
    19. header span {
    20.   display: inline-block;
    21.   width: 220px;
    22.   height: 50px;
    23.   color: #fff;
    24.   background: #009966;
    25.   font-size: 18px;
    26.   font-weight: bold;
    27.   text-align: center;
    28.   line-height: 50px;
    29.   border-radius: 8px;
    30.   cursor: pointer;
    31. }
    32. .post {
    33.   position: absolute;
    34.   background: #ffffff;
    35.   border: 1px #cccccc solid;
    36.   width: 500px;
    37.   left: 65px;
    38.   top: 70px;
    39.   padding: 10px;
    40.   font-size: 14px;
    41.   z-index: 999999;
    42.   display: none;
    43. }
    44. .post .title {
    45.   width: 450px;
    46.   height: 30px;
    47.   line-height: 30px;
    48.   display: block;
    49.   border: 1px #cecece solid;
    50.   margin-bottom: 10px;
    51. }
    52. .post select {
    53.   width: 200px;
    54.   height: 30px;
    55. }
    56. .post .content {
    57.   width: 450px;
    58.   height: 200px;
    59.   display: block;
    60.   margin: 10px 0;
    61.   border: 1px #cecece solid;
    62. }
    63. .post .btn {
    64.   width: 160px;
    65.   height: 35px;
    66.   color: #fff;
    67.   background: #009966;
    68.   border: none;
    69.   font-size: 14px;
    70.   font-weight: bold;
    71.   text-align: center;
    72.   line-height: 35px;
    73.   border-radius: 8px;
    74.   cursor: pointer;
    75. }
    76.  
    77. .bbs section ul li {
    78.   padding: 10px 0;
    79.   border-bottom: 1px #999999 dashed;
    80.   overflow: hidden;
    81. }
    82. .bbs section ul li div {
    83.   float: left;
    84.   width: 60px;
    85.   margin-right: 10px;
    86. }
    87. .bbs section ul li div img {
    88.   border-radius: 50%;
    89.   width: 60px;
    90. }
    91. .bbs section ul li h1 {
    92.   float: left;
    93.   width: 520px;
    94.   font-size: 16px;
    95.   line-height: 35px;
    96. }
    97. .bbs section ul li p {
    98.   color: #666666;
    99.   line-height: 25px;
    100.   font-size: 12px;
    101. }
    102. .bbs section ul li p span {
    103.   padding-right: 20px;
    104. }

            3-3 js部分

    1. const span1 = document.getElementsByClassName('span-1')[0]
    2. const btn = document.getElementsByClassName('btn')[0]
    3. const ul = document.getElementById('postList')
    4. const title = document.getElementById('title')
    5. const sec = document.getElementById('sec')
    6. const post = document.getElementById('post')
    7. const arr = ['img/tou01.jpg', 'img/tou02.jpg', 'img/tou03.jpg', 'img/tou04.jpg']
    8. // 点击显示表单对话框
    9. span1.onclick = function () {
    10.   post.style.display = 'block'
    11. }
    12. // 点击发布按钮隐藏对话框
    13. btn.onclick = function () {
    14.   let firstEl = ul.firstElementChild
    15.   let li = createLi()
    16.   if (firstEl) {
    17.     ul.insertBefore(li, firstEl)
    18.   } else {
    19.     ul.appendChild(li)
    20.   }
    21.   resetFields()
    22.   post.style.display = 'none'
    23. }
    24.  
    25. // 组装li元素
    26. function createLi() {
    27.   let li = document.createElement('li')
    28.   // 组装div
    29.   let div = document.createElement('div')
    30.   let img = document.createElement('img')
    31.   img.src = getSrc()
    32.   div.appendChild(img)
    33.   li.appendChild(div)
    34.   // 组装h1
    35.   let h1 = document.createElement('h1')
    36.   let titleValue = title.value
    37.   if (!titleValue || !titleValue.trim()) {
    38.     return alert('标题不能空')
    39.   }
    40.   h1.innerHTML = titleValue
    41.   li.appendChild(h1)
    42.   // 组装p
    43.   let p = document.createElement('p')
    44.   let span = document.createElement('span')
    45.   let secValue = sec.value
    46.   if (!secValue || !secValue.trim()) {
    47.     return alert('板块不能空')
    48.   }
    49.   span.innerHTML = `版块：${secValue}`
    50.   p.appendChild(span)
    51.   span = document.createElement('span')
    52.   let date = formatDate()
    53.   span.innerHTML = `版块：${date}`
    54.   p.appendChild(span)
    55.   li.appendChild(p)
    56.   return li
    57. }
    58.  
    59. // 获得随机图片的src
    60. function getSrc() {
    61.   return arr[Math.floor(Math.random() * arr.length)]
    62. }
    63.  
    64. // 格式化日期：yyyy-MM-dd hh:mm:ss
    65. function formatDate() {
    66.   let date = new Date()
    67.   let y = pad0(date.getFullYear())
    68.   let m = pad0(date.getMonth() + 1)
    69.   let d = pad0(date.getDate())
    70.   let h = pad0(date.getHours())
    71.   let M = pad0(date.getMinutes())
    72.   let s = pad0(date.getSeconds())
    73.   return [y, m, d].join('-') + ' ' + [h, M, s].join(':')
    74. }
    75.  
    76. // 数字不满足2位，在前面加0
    77. function pad0(v) {
    78.   return v < 10 ? '0' + v : v
    79. }
    80.  
    81. // 重置表单域
    82. function resetFields() {
    83.   // 标题表单域清空
    84.   title.value = ''
    85.   // 第1个option选中
    86.   sec.getElementsByTagName('option')[0].selected = true
    87. }

    4. 效果图

  • 相关阅读:
    【BP时序预测】基于鱼鹰算法OOA优化BP神经网络实现温度数据预测算法研究附matlab代码
    实用 | 盘点抓包修改响应结果的 2 种方式
    Centos部署openGauss6.0创新版本，丝滑的体验
    【被抛弃的程序员】和30岁“转行程序员”Say GoodBye
    spring源码 - 理解@Import原理及运用
    如何走出长期精神内耗的状态？
    在 Vue 的 mounted 钩子函数中使用异步函数是否会有风险需要考虑
    15 个实用的 Linux find 命令示例
    每天学习2小时——黑客（网络安全）技术
    阿里三年功能测试的一些感悟
  • 原文地址：https://blog.csdn.net/hanq2016/article/details/133852302