请问,谁能帮我写一个js的留言框呢?就是在一个我的网站里别人可以在留言框里留言,谢谢! 200

 我来答
CAI85
2016-11-15 · 超过17用户采纳过TA的回答
知道答主
回答量:71
采纳率:0%
帮助的人:19.6万
展开全部

html部分:

  1: <!DOCTYPE>

 

  2: <html lang="zh-en">

 

  3: <head>

 

  4:    告庆配 <title>js实现简单留言板</title>

 

  5:     <meta http-equiv="content-type" content="text/html;charset=utf-8">

 

  6:     <link rel="stylesheet" type="text/css" href="./forum.css">

 

  7:     <script type="text/javascript" src="./forum.js"></script>

 

  8: </head>

 

  9: <body>

 

 10:     <div class="container">

 

 11:         <div class="content">

 

 12:             <!-- <form action="?" method="?"> -->

 

 13:                 <div class="text">

 

 14:                     <label for="message">js简单留言板(置空可以查看默认的留言内容)</label>

 

 15:                 </div>

 

 16:                 <div class="text" style="margin-left:-75px">

 

 17:                     <label for="name">昵称:</label>

 

 18:                     <input type="text" id="name" value="昵称(默认是dwqs)" class="txt">

 

 19:                 </div>

 

 20:                 <div class="text">

 

 21:                     <textarea rows="5" cols="30" id="message" value="" class="txt">给我留言(默认留言内容:我的小站:www.ido321.com)</textarea>

 

 22:                 </div>

 

 23:                 <div class="btn">

 

 24:                     <!-- <input type="submit" id="submit" value="提交留言"> -->

 

 25:                     <button id="btn1">提交留言</button>

 

 26:                 </div>

 

 27:             <!-- </form> -->

 

 28:         </div>

 

 29:         <h3 style="clear:right">留言列表</h3>

 

 30:         <hr/>

 

 31:         <div class="messageList" id="messageList">

 

 32:         </div>

 

 33:     </div>

 

 34: </body>

 

 35: </html>

 

css:

  1: *{

 

  2:     margin: 0 auto;

 

  3:     padding: 0;

 

  4:     font-family: "Microsoft YaHei","sans-serif";

 

  5: }

 

  6: .container{

 

  7:     width: 400px;

 

  8:     height: auto;

 

  9: }

 

 10: .text{

 

 11:     text-align: center;

 

 12:     margin-bottom: 15px;

 

 13: }

 

 14: .btn{

 

 15:     margin-right: 30px;

 

 16:     float: right;

 

 17: }

 

 18: #messageList{

 

 19:     width: 100%;

 

 20:     height: 100%;

 

 21: }

 

 22: .txt{

 

 23:     color: gray;

 

 24:     opacity: 0.8;

 

 25:     filter:alpha(opacity=0.8);

 

 26: }

 

js:

  1: /**

 

  2: *文档加袜指载完后,运差亮行名为func的函数

 

  3: *@param func 需要运行的函数的名

 

  4: *说明:window.onload事件处理函数的值存入变量oldonload;如果函数上没有绑定任何函数,则正常添

 

  5: *加;若已经绑定有函数,则添加到指令末尾。

 

  6: */

 

  7: function addLoadEvent(func)

 

  8: {

 

  9:     var oldonload = window.onload; //得到上一个onload事件的函数

 

 10:     if(typeof window.onload != 'function')

 

 11:     {

 

 12:         window.onload = func;

 

 13:     }

 

 14:     else

 

 15:     {

 

 16:         window.onload = function()

 

 17:         {

 

 18:             oldonload(); //调用之前覆盖的onload事件的函数

 

 19:             func(); //调用当前事件函数

 

 20:         }

 

 21:     }

 

 22: }

 

 23: function getMessage(){

 

 24:     var btn = document.getElementById("btn1");

 

 25:     var message = document.getElementById("message");

 

 26:     var name = document.getElementById("name");

 

 27:     var nameValue = "";

 

 28:     var messageValue = "";

 

 29:

 

 30:     name.onfocus = function(){

 

 31:         name.value="";

 

 32:     }

 

 33:     message.onfocus = function(){

 

 34:         message.value="";

 

 35:     }

 

 36:

 

 37:     btn.onclick = function(){

 

 38:         messageValue =  message.value || "我的小站:www.ido321.com" ; //设置默认值

 

 39:         nameValue = name.value || "dwqs";

 

 40:         var msgList = document.getElementById("messageList");

 

 41:         var msgDiv = document.createElement("div");

 

 42:         var msgTxt = document.createTextNode(nameValue+"说:"+messageValue);

 

 43:         msgDiv.appendChild(msgTxt);

 

 44:         msgList.appendChild(msgDiv);

 

 45:     }

 

 46: }

 

 47: addLoadEvent(getMessage);

 

追问
这个我刚才在网页上搜到了   但还是谢谢你!!
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式