JS에서 게시판 기능을 구현하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS에서 게시판 기능을 구현하는 방법

亚连

Jun 14, 2018 pm 06:03 PM

js메시지 보드

최근 js 기반으로 게시판 기능을 구현했습니다. 구현된 기능에는 게시자와 게시된 콘텐츠에 대한 null이 아닌 확인, 바닥 효과 표시 및 게시 시간 표시가 포함됩니다. 구체적인 예시 코드는 이 글을 참조하세요

기능 구현:

1. 게시자 및 게시된 콘텐츠의 비어 있지 않은 확인
2. 바닥 효과 표시
3.
Rendering Diagram

JS에서 게시판 기능을 구현하는 방법 Directory

JS에서 게시판 기능을 구현하는 방법 tools.js

Time Toolkit

function getTime(){
  var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth()+1;
  var da = date.getDate();
  var hour = date.getHours()<10 ? "0"+date.getHours() : date.getHours() ;
  var minute = date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes() ;
  var second = date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds() ;
  var week = date.getDay();
  var time = year+"年"+month+"月"+da+"日 "+hour+":"+minute+":"+second +" "+weeks[week];
  return time;
}

Message Board.html

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="tools.js"></script>
    <style>
      #box {
        width: 800px;
        margin: 0 auto;
      }
      textarea {
        width: 800px;
      }
      #li {
        display: block;
        border-bottom: 1px dashed #ebebeb;
        margin: 10px 0;
        padding: 8px 0;
      }
    </style>
  </head>
  <body>
    <p id="box">
      <h3 id="留言板-nbsp">留言板 </h3>
      发布人：<input type="text" id="person" value="">
      共<input style="border: 0;" name="" id="louceng">
      <textarea name="" id="text" rows="10"></textarea>
      <input type="button" value="确认发布" id="btn" />
      <h3 id="全部留言">全部留言</h3>
      <hr/>
    </p>
    <script>
      var num = 0;
      var num1 = 0;
      var box = document.getElementById("box");
      var text = document.getElementById("text");
      var btn = document.getElementById("btn");
      var person = document.getElementById("person");
      var ul = document.createElement("ul");
      ul.id = "ul1";
      var time = document.createElement("p");
      document.getElementById("louceng").value=num+"楼";
      btn.onclick = function() {
        //非空判断
        if(person.value==""||person.value==null){
          alert("发布人不允许为空！");
          return false;
        }
        if(text.value==""||text.value==null){
          alert("内容不允许为空！");
          return false;
        }
        //获取时间
        num = num+1;
        var datetime = getTime();
        time = document.createTextNode("发布时间：" + datetime);
        var li = document.createElement("li");
        li.id = "li";
        //创建删除功能
        var oA = document.createElement("a");
        var oAtext = document.createTextNode("删除");
        oA.href = "#";
        oA.appendChild(oAtext);
        //创建发布文本框
        var fabu = document.createElement("textarea");
        fabu.rows = "10";
        fabu.style = "margin: 0px; width: 760px; height: 138px;";
        fabu.value = text.value;
        fabu.disabled="disabled";
        //创建编辑功能
        var oB = document.createElement("a");
        var oBtext = document.createTextNode("编辑");
        oB.href = "#";
        oB.appendChild(oBtext);
        //创建确认按钮
        var butt = document.createElement("input");
        butt.type = "button";
        butt.value = "确认";
        butt.style.display = "none";
        //解决兼容问题
        var ali = ul.getElementsByTagName("li");
        if(ali.length == 0) {
          ul.appendChild(li);
        } else {
          ul.insertBefore(li, ali[0]);
        }
        //添加节点
        box.appendChild(ul);
        var lou = document.createTextNode("第"+num+"楼");
        var persons = document.createTextNode("发布人："+ person.value);
        document.getElementById("person").value="";
        var textnode = document.createTextNode("发布内容：");
        document.getElementById("text").value="";
        li.appendChild(lou);
        li.appendChild(document.createElement("br"));
        li.appendChild(persons);
        li.appendChild(document.createElement("br"));
        li.appendChild(textnode);
        li.appendChild(document.createElement("br"));
        li.appendChild(fabu);
        li.appendChild(time);
        li.appendChild(oA);
        li.appendChild(oB);
        li.appendChild(butt);
        //删除
        oA.onclick = function() {
          ul.removeChild(this.parentNode);
          //删除时更新
          num1++;//删除次数
          document.getElementById("louceng").value=num-num1+"楼";
        };
        //编辑
        oB.onclick = function() {
          fabu.disabled = "";
          butt.style.display = "block";
        }
        //确认更改
        butt.onclick = function() {
          fabu.disabled="disabled";
          butt.style.display = "none";
        }
        //楼层展示
        document.getElementById("louceng").value=num-num1+"楼";
      }
    </script>
  </body>
</html>

위 내용은 제가 모두를 위해 편집한 내용입니다. 도움이 될 것이다 앞으로도 모든 사람에게.

관련 기사

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。

js是什么编程语言？May 05, 2019 am 10:22 AM

js全称JavaScript，是一种具有函数优先的轻量级，直译式、解释型或即时编译型的高级编程语言，是一种属于网络的高级脚本语言；JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式，如函数式编程。

See all articles

핫 AI 도구

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.