JS实现简易留言板增删功能

2024-12-01 05:16:02

本文实例为大家分享了JS实现留言板增删功能的具体代码，供大家参考，具体内容如下

## **JS实现简易留言板的增删功能**
一个很简单的留言板，实现**增删**功能，因为没有数据库，所以只是一个静态的留言板功能。
**修改**功能其实也可以添加，但是我现在技术不够，等以后可能会添加**修改**功能。
代码很简单，注释很清楚。```

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .cle:after {
      height: 0;
      clear: both;
      visibility: hidden;
      display: none;
      content: "";
    }

    .bbslist {
      width: 400px;
      margin: 10px auto;
      border-radius: 5px;
      background: #A6A6A6;
      border: 1px solid #a6a6a6;
    }

    .bbslist>ul {
      margin: 8px 10px 10px 10px;
      display: block;
      clear: both;
      text-align: center;
      box-shadow: 3px 3px 25px #A6A6A6;
    }

    .bbslist>ul>li {
      background: #f4f4f4;
      margin: 10px 0;
      line-height: 30px;
      height: 30px;
      border-radius: 5px;
      text-align: center;
      box-shadow: 3px 3px 17px #A6A6A6;
      padding: 0 5px;
      font-size: 12px;
      border: 1px solid #a6a6a6;
      position: relative;
      transition: all 0.5s;
      animation: liBg 0.3s;
      overflow: hidden;
    }

    @keyframes liBg {
      from {
        background: #442222;
        opacity: 0;
        left: -20px;
        height: 0;
      }

      to {
        background: #f4f4f4;
        opacity: 1;
        left: 0;
        height: 30px;
      }
    }

    .mesDiv {
      width: 400px;
      background: #eee;
      height: 130px;
      border: 1px solid #a6a6a6;
      margin: 20px auto;
      border-radius: 5px;
      box-shadow: 3px 3px 17px #A6A6A6;
      animation: msgHeight 0.5s;
      overflow: hidden;
    }

    @keyframes msgHeight {
      from {
        height: 0;
        margin-top: 50px;
        opacity: 0;
      }

      to {
        height: 130px;
        margin-top: 20px;
        opacity: 1;
      }
    }

    .inputSty {
      width: 90%;
      height: 30px;
      display: block;
      color: #666;
      border: 1px solid #ddd;
      padding-left: 5px;
      line-height: 30px;
      font-size: 12px;
      clear: both;
      margin: 10px auto;
      border-radius: 5px;
    }

    .btnSty {
      width: 30%;
      height: 25px;
      margin: 0 auto;
      display: block;
      cursor: pointer;
      transition: all 0.2s;
      border-radius: 5px;
      box-shadow: 3px 3px 10px #A6A6A6;
    }

    .btnSty:hover {
      width: 20%;
      height: 30px;
      border-radius: 5px;
      box-shadow: 3px 3px 10px #A6A6A6;
    }

    .userSty {
      width: 25%;
      height: 25px;
      margin: 8px 18px 3px 18px;
      border-radius: 5px;
      box-shadow: 3px 3px 10px #A6A6A6;
    }

    .dd {
      width: 135px;
      height: 10px;
      position: relative;
      top: -10px;
      font-size: 8px;
      float: right;
      clear: both;
    }

    .delbtn{
      width: 35px;
      height: 22px;
      border-radius: 5px;
      position: relative;
      top: 5px;
      right: -4px;
      float: right;
      z-index: 2;
      color: red;
      /* box-shadow: 2px 2px 3px #A6A6A6; */
    }
  </style>
</head>

<body>
  <div class="mesDiv">
    <input id="userId" class="userSty" type="button" value="您的姓名">
    <input id="msgId" class="inputSty" type="text" placeholder="">
    <input id="btnId" class="btnSty" type="button" value="提交留言">
  </div>

  <div class="bbslist cle" id="masMan">
    <ul id="ulId">
      <li>— — — 留言列表 — — —</li>
    </ul>
  </div>
  <script type="text/javascript">
    //定义一个函数用来重复获取gId("value"),中value的ID属性
    function gId(n) {
      return document.getElementById(n);
    }
    //获取姓名
    gId("userId").onclick = function () {
      var username = prompt("请输入您的姓名:");
      alert("您好！" + username + "。");
      gId("userId").value = username + "的留言：";
    }
    //删除留言
    function delMsg(d) {
      var parentUl = d.parentNode;
      var parentDiv = parentUl.parentNode;
      parentDiv.removeChild(parentUl);
    }
    //提交留言
    gId('btnId').onclick = function () {
      //获取时间
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth() + 1;
      var day = today.getDate();
      var hours = today.getHours();
      var min = today.getMinutes();
      var second = today.getSeconds();
      var time = year + "年" + month + "月" + day + "日" + " " + hours + "时" + min + "分" + second + "秒";
      // var v = ;
      if (gId('msgId').value === '') {
        alert("留言不能为空");
        return false;
      }
      //创建li
      else {
        //创建一个新元素ul
        var ulcrate = document.createElement('ul');
        //创建新元素li
        var licrate = document.createElement('li');
        //创建一个时间盒子
        var divcrate = document.createElement('div');
        //创建一个删除按钮
        var delbtn = document.createElement('input');
        //给删除按钮赋属性
        delbtn.setAttribute('type', 'button');
        delbtn.setAttribute('class', 'delbtn');
        delbtn.setAttribute('value', '删除');
        delbtn.setAttribute('onclick', 'delMsg(this)');
        //给创建的ul赋属性
        ulcrate.setAttribute('id', 'ulId');

        //给时间盒子设置属性
        // divcrate.setAttribute('class', 'dd');
        divcrate.className = "dd";
        //向li里添加在输入框中获取的值
        licrate.innerHTML = gId('msgId').value;

        //把，删除按钮，留言内容，时间盒子添加到创建的ul里
        ulcrate.appendChild(delbtn);
        ulcrate.appendChild(licrate);
        ulcrate.appendChild(divcrate);
        //给时间盒子传递时间
        divcrate.innerHTML = time;
        //把创建的ul添加到最外层的div里
        gId('masMan').appendChild(ulcrate);
        //留言内容初始化
        gId("msgId").value = "";
      }
    }
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js使用DOM操作实现简单留言板的方法

本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素要点二:父元素.appendChild("元素") 把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来要点三:父元素.insertBefore("元素","要插入哪个元
本人ajax留言板的源程序不错的应用js

复制代码代码如下: // JavaScript Document function $(id) { return document.getElementById(id); } function echo(obj,html) { $(obj).innerHTML=html; } function fopen(obj) { $(obj).style.display=""; } function fclose(obj) { $(obj).style.
原生JS实现留言板功能

本文实例为大家分享了JS实现留言板功能的具体代码,供大家参考,具体内容如下实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = document.getElementById("messageBox"); var oInput = document.getElementById("myInput"); var oPos
JS+CSS模拟可以无刷新显示内容的留言板实例

本文实例讲述了JS+CSS模拟可以无刷新显示内容的留言板功能.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/
JS实现留言板功能

每天一个JS 小demo之留言板.主要知识点:DOM方法的理解和运用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap { width: 400px; margin: 30px au
js 实现的可折叠留言板(附源码下载)

javaScript 代码如下: $(document).ready(function(){ $(".message_list .message_body:gt(0)").hide(); $(".message_list li:gt(4)").hide(); $(".message_head").click(function(){ $(this).next(".message_body").slideToggle(500) r
javascript实现留言板功能

本文实例为大家分享了javascript实现留言板功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ /*设置最外层盒子*/ width:
JS实现留言板功能[楼层效果展示]

功能实现: 1.发布人和发布内容非空校验 2.编辑删除功能 3.楼层效果展示 4.发布时间展示效果图目录 tools.js 时间工具包 function getTime(){ var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var date = new Date(); var year = date
用ReactJS和Python的Flask框架编写留言板的代码示例

近期要在生产环境上使用react,所以,自己学习了一下,写了一个简单的留言板小程序.完整的代码可以到这里下载:message-board Use 前端使用React,然后还有Bootstrap和jQuery,React负责前端展现,jQuery主要是向服务器发送ajax请求. 后端使用Flask和MongoDB,为前端提供数据.这里主要关注前端,对于后端不做过多说明. 使用webpack,对js文件进行打包. About React React是facebook开发一个用于前段交互的Javasc
JS实现简易留言板特效

本文实例为大家分享了JS实现留言板特效的具体代码,供大家参考,具体内容如下知识点 1.textarea 大段输入框 2.value获取输入框的值 3.innerHTML所用东西:innerText文本 4.insertBefore在某个标签之前插入运行效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>T

JS实现简易留言板增删功能

相关推荐

随机推荐