JavaScript实现网页留言板功能


Posted in Javascript onNovember 23, 2020

JavaScript(JS)网页?留言板,供大家参考,具体内容如下

在使用网页进行冲浪时,经常会发表自己的留言。发布留言的留言板是怎么做的呢?

制作一个简单的留言板。

JavaScript实现网页留言板功能

首先需要一个textarea框,旁边放置一个按钮,然后需要一个ul标签,里面不需要放置li元素,用CSS加以简单的修饰。

紧接着获取元素,在点击按钮后,创建一个li,将文本框里面的赋值给li,将li插入到ul的第一个孩子的前面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>留言发布</title>
  <style>
    body {
      margin: 200px;
    }
    *{
      margin: 0px;
      padding: 0px;
    }
    li {
      list-style: none;
      width: 500px;
      height: 30px;
      margin-top: 5px;
      border: 1px solid black;
      background-color: pink;
    }
    textarea{
      width: 200px;
      height: 80px;
    } 
  </style>
</head>
<body>
  <textarea name="" id=""></textarea>
  <button>发布</button>
  <ul>
    
  </ul>
  <script>
    //获取元素
    var btn = document.querySelector('button');
    var text = document.querySelector('textarea');
    var ul = document.querySelector('ul');
    //注册时间
    btn.onclick = function(){
      if(text.value == ''){
        alert("您没有输入内容。")
        return false;
      }else{
        var li = document.createElement('li');
        li.innerHTML = text.value;
        //ul.appendChild(li);
        ul.insertBefore(li,ul.children[0])
      }
      text.value='';
      
    }
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
微信小程序实现人脸识别
May 25 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
js观察者模式的弹幕案例
Nov 23 #Javascript
js异步接口并发数量控制的方法示例
Nov 22 #Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 #Vue.js
ES6学习教程之Promise用法详解
Nov 22 #Javascript
Node.js文本文件BOM头的去除方法
Nov 22 #Javascript
JavaScript手写数组的常用函数总结
Nov 22 #Javascript
You might like
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
使用PHP开发留言板功能
2019/11/19 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
Sea.JS知识总结
2016/05/05 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
python中input()与raw_input()的区别分析
2016/02/27 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
执行力心得体会范文
2016/01/11 职场文书
Python制作春联的示例代码
2022/01/22 Python
Python何绘制带有背景色块的折线图
2022/04/23 Python