html如实现留言板功能,JavaScript实现网页留言板功能

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

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

制作一个简单的留言板。

b4011e616923955c3a2bfcfca189b58f.png

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

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

留言发布

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;

}

发布

//获取元素

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='';

}

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

  • 1
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值