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 相关文章推荐
ajax处理php返回json数据的实例代码
Jan 24 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
微信自定义分享php代码分析
2016/11/24 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
python开发之str.format()用法实例分析
2016/02/22 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python xlsxwriter模块的使用
2020/12/24 Python
介绍一下如何优化MySql
2016/12/20 面试题
化工工艺专业求职信
2013/09/22 职场文书
论文答谢词
2015/01/20 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
诚实守信主题班会
2015/08/13 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js