JavaScript實現(xiàn)網(wǎng)頁留言板功能
更新時間：2020年11月23日 09:18:57 作者：我是Dreamer啊
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁留言板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JavaScript(JS)網(wǎng)頁–留言板，供大家參考，具體內容如下
在使用網(wǎng)頁進行沖浪時，經(jīng)常會發(fā)表自己的留言。發(fā)布留言的留言板是怎么做的呢？
制作一個簡單的留言板。
首先需要一個textarea框，旁邊放置一個按鈕，然后需要一個ul標簽，里面不需要放置li元素，用CSS加以簡單的修飾。
緊接著獲取元素，在點擊按鈕后，創(chuàng)建一個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>留言發(fā)布</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>發(fā)布</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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JS獲取本地文件并進行網(wǎng)絡傳輸?shù)拇a詳解
在web中如想要獲取用戶計算機上的文件我們通常會用到的方法是通過一個表單元素<input type="file">操作用戶選擇的文件,本文小編給大家介紹了JS獲取本地文件并進行網(wǎng)絡傳輸?shù)姆椒?需要的朋友可以參考下2024-08-08
ES6中的迭代器、Generator函數(shù)及Generator函數(shù)的異步操作方法
這篇文章主要介紹了ES6中的迭代器、Generator函數(shù)以及Generator函數(shù)的異步操作方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Bootstrap 3 進度條的實現(xiàn),非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章介紹了JavaScript獲取字符串實際長度(包含中英文)的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
全部限制那是很簡單的事，直接把<script>腳本塊過濾掉就行了，但是部分限制又是如何做到的呢，下面我們一起來看看2014-09-09
本文主要分享了js實現(xiàn)PC固定寬高滑動輪播圖效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
本文給大家分享的是一則非常常用和實用的小技巧，當鼠標點擊到輸入框（input）里的時候，輸入框的提示消失，鼠標再移開，輸入框提示出現(xiàn)，推薦給小伙伴們2015-03-03
在引用與本頁面編碼格式不一樣的js文檔時，如果被引用的js代碼有ASCII字符之外的字符，那么就會出現(xiàn)代碼錯誤。2009-03-03
文字模糊特效...2007-04-04
這篇文章主要介紹了JS實現(xiàn)關閉當前頁而不彈出提示框的方法,結合實例形式分析了JS操作頁面的打開、關閉及父頁面的關閉技巧,需要的朋友可以參考下2016-06-06