<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>留言板</title> <style> *{margin: 0;padding: 0;list-style: none;} .wapr{ width: 300px; margin: 50px auto 0; color: white; } .wapr h2{ text-align: center; height: 40px;font-size: 24px;font-weight: normal;line-height: 40px;background: #CD853F;} .wapr textarea{width: 298px;height: 60px;resize: none;} .wapr input{height: 40px;width: 300px;margin-bottom: 20px;} .wapr ul{ width: 258px; padding: 0 20px; border-top: 1px solid #CD853F; } .wapr li{font-size: 14px;line-height: 28px;border-bottom: 1px solid #CD853F;color: black;} .wapr li:nth-of-type(2n){background: beige;} </style> </head> <body> <div class="wapr"> <h2>留言板</h2> <textarea id="text"></textarea> <input type="button" value="发送" id="btn" /> <ul id="list"> </ul> </div> </body> <script type="text/javascript"> window.onload=function(){ var text=document.querySelector('#text') var btn=document.querySelector('#btn') var list=document.querySelector('#list') btn.onclick=function(){ var val=text.value; if(text.value==""){ alert("请输入内容") }else{ list.innerHTML+='<li>'+val+'</li>'; text.value="" } } } </script> </html>
javaScript简单的留言板
猜你喜欢
转载自www.cnblogs.com/mylgcs/p/9022273.html
今日推荐
周排行