JavaScript實(shí)現(xiàn)留言板案例
更新時(shí)間：2020年03月17日 14:55:15 作者：故里有長(zhǎng)安、
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)留言板案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)留言板功能的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>留言板</title>
<style type="text/css">
#div1{
width: 400px;
height: 200px;
background-color: antiquewhite;
}
span{
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="div1">
姓名：<input type="text" name="user" id="username" /><br />
內(nèi)容：<textarea rows="10" cols="40" id="info">
</textarea>
<input type="button" value="留言" id="btn" /><br />
</div>
<h3>留言板</h3><br />
<div id="div2">
</div>
</body>
<script type="text/javascript">
var userInput = document.getElementById("username");
var infoInput = document.getElementById("info");
var btn = document.getElementById("btn");
var div2 = document.getElementById("div2");
btn.onclick = function(){
var user = userInput.value;
var info = infoInput.value;
var divUser = document.createElement("div");
divUser.innerText = user;
divUser.style.backgroundColor = "darkgrey";
divUser.style.width = "400px";
divUser.style.height = "30px";
div2.appendChild(divUser);
var divInfo = document.createElement("div");
divInfo.innerText = info;
divInfo.style.backgroundColor = "antiquewhite";
divInfo.style.width = "400px";
divInfo.style.height = "80px";
div2.appendChild(divInfo);
var del = document.createElement("span");
del.innerText = "刪除";
del.style.float = "right";
divInfo.appendChild(del);
del.onclick = function(){
divUser.remove();
divInfo.remove();
del.remove();
}
}
</script>
</html>
showtime：
點(diǎn)擊刪除，可以刪除留言：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談目前可以使用ES10的5個(gè)新特性，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
一文詳解如何檢測(cè)并解決JS代碼中的死循環(huán)
這篇文章主要想和大家來(lái)一起探討一下能否通過(guò)靜態(tài)分析的方式檢測(cè)出死循環(huán),如果不能,我們又應(yīng)該如何在不借用其他線程的情況下,解決死循環(huán)卡住問(wèn)題,感興趣的可以了解下2023-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序用戶信息encryptedData的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
虛擬邊緣就是按照一定映射關(guān)系，給圖像添加邊緣那么虛擬邊緣有什么用呢？接下來(lái)詳細(xì)介紹，需要了解的朋友可以參考下2012-12-12
今天寫一個(gè)滑動(dòng)自動(dòng)加載的功能的時(shí)候，遇到了切換就發(fā)現(xiàn)加載完畢的情況，查看了下發(fā)現(xiàn)可能是js的全局變量和局部變量的問(wèn)題，自己測(cè)試了下，果不其然，下面分享下2020-07-07
JS實(shí)現(xiàn)的倒計(jì)時(shí)效果實(shí)例(2則實(shí)例)
這篇文章主要介紹了JS實(shí)現(xiàn)的倒計(jì)時(shí)效果,列舉了兩則JavaScript倒計(jì)時(shí)效果代碼供大家參考,原理基本相似,代碼簡(jiǎn)潔實(shí)用,需要的朋友可以參考下2015-12-12
使用JS批量選中功能實(shí)現(xiàn)更改數(shù)據(jù)庫(kù)中的status狀態(tài)值（批量展示）
我們?cè)陂_發(fā)項(xiàng)目的時(shí)候經(jīng)常會(huì)在后臺(tái)管理時(shí)用到批量展示功能來(lái)動(dòng)態(tài)的修改數(shù)據(jù)庫(kù)的值。下面以修改數(shù)據(jù)庫(kù)的status狀態(tài)值來(lái)實(shí)現(xiàn)批量展示功能2016-11-11
js 限制數(shù)字 js限制輸入實(shí)現(xiàn)代碼
在工作中經(jīng)常會(huì)遇到j(luò)s限制輸入方面的要求，本文將詳細(xì)介紹其實(shí)現(xiàn)原理，需要的朋友可以參考下2012-12-12
轉(zhuǎn)換layUI的數(shù)據(jù)表格中的日期格式方法
今天小編就為大家分享一篇轉(zhuǎn)換layUI的數(shù)據(jù)表格中的日期格式方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
echarts地圖繪制自定義標(biāo)記實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于echarts地圖繪制自定義標(biāo)記實(shí)現(xiàn)的相關(guān)資料,ECharts地圖是一個(gè)功能強(qiáng)大的數(shù)據(jù)可視化工具,基于百度ECharts開源項(xiàng)目開發(fā)而成,它主要用于在網(wǎng)頁(yè)中展示各種地理數(shù)據(jù)和地圖的信息,需要的朋友可以參考下2023-11-11