JavaScript實現(xiàn)網(wǎng)頁留言板功能
更新時間：2020年11月23日 09:18:57 作者：我是Dreamer啊
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)網(wǎng)頁留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JavaScript(JS)網(wǎng)頁–留言板，供大家參考，具體內(nèi)容如下
在使用網(wǎng)頁進(jìn)行沖浪時，經(jīng)常會發(fā)表自己的留言。發(fā)布留言的留言板是怎么做的呢？
制作一個簡單的留言板。
首先需要一個textarea框，旁邊放置一個按鈕，然后需要一個ul標(biāo)簽，里面不需要放置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("您沒有輸入內(nèi)容。")
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
前幾天一個同事問我如下的JavaScript代碼如何理解2009-06-06
JS封裝cookie操作函數(shù)實例(設(shè)置、讀取、刪除)
這篇文章主要介紹了JS封裝cookie操作函數(shù),以實例形式分析了JavaScript實現(xiàn)針對cookie的設(shè)置、獲取及刪除相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
類似php的js數(shù)組的in_array函數(shù)自定義方法
PHP的數(shù)組函數(shù)in_array()非常方便，下面就為大家介紹下自定義類似php的js數(shù)組的in_array函數(shù)，具體實現(xiàn)方法如下，感興趣的朋友可以參考下2013-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)分享商品海報功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
七行JSON代碼把你的網(wǎng)站變成移動應(yīng)用過程詳解
這篇文章主要介紹了七行JSON代碼把你的網(wǎng)站變成移動應(yīng)用過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值2019-07-07
這篇文章主要介紹了js實現(xiàn)div層緩慢收縮與展開的方法,通過javascript自定義函數(shù)實現(xiàn)div層的收縮與展開效果,非常具有實用價值,需要的朋友可以參考下2015-05-05
JavaScript實現(xiàn)瀏覽器網(wǎng)頁自動滾動并點擊的示例代碼
這篇文章主要介紹了JavaScript實現(xiàn)瀏覽器網(wǎng)頁的自動滾動并點擊的示例代碼，幫助大家更好的理解和學(xué)習(xí)JavaScript的使用，感興趣的朋友可以了解下2020-12-12
layer彈出子iframe層父子頁面?zhèn)髦档膶崿F(xiàn)方法
這篇文章主要介紹了layer彈出子iframe層父子頁面?zhèn)髦档膶崿F(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
bootstrap tooltips在 angularJS中的使用方法
這篇文章主要介紹了bootstrap tooltips在 angularJS中的使用 ,需要的朋友可以參考下2019-04-04
這篇文章主要給大家介紹了利用JS如何實現(xiàn)文字的聚合動畫效果，實現(xiàn)的效果非常不錯，類似粒子動畫的效果，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01