JavaScript實(shí)現(xiàn)留言板案例
本文實(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' /><br /> 內(nèi)容：<textarea rows='10' cols='40' id='info'> </textarea> <input type='button' value='留言' /><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í)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 編程語(yǔ)言PHP在Web開(kāi)發(fā)領(lǐng)域的優(yōu)勢(shì)在哪？2. 詳解Android studio 動(dòng)態(tài)fragment的用法3. 什么是python的自省4. Android如何加載Base64編碼格式圖片5. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁(yè)效果(實(shí)例代碼)6. 基于android studio的layout的xml文件的創(chuàng)建方式7. 圖文詳解vue中proto文件的函數(shù)調(diào)用8. Vuex localStorage的具體使用9. 解決Android studio xml界面無(wú)法預(yù)覽問(wèn)題10. 在IDEA中實(shí)現(xiàn)同時(shí)運(yùn)行2個(gè)相同的java程序
網(wǎng)公網(wǎng)安備