需求：用js做一个简单的留言板效果

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);

效果：

来源：http://www.ido321.com/591.html

问题：关于一个贴友的js留言板的实现的更多相关文章

  1. 一个超级简单php的留言板

    第一步:配置好测试环境:(详细略了) 第二部:新建一个数据库,命名为guestbook(名字可以随便改),可以直接在phpmyadmin里面操作,在数据库里面新建一张表‘content’,表里面有4个 ...

  2. 一个很简单的php留言板。。。。搭建在sae上的。。。

    我在sae上搭建了一个个人简历的页面: 有兴趣的可以访问  http://671coder.sinaapp.com/ 在做下面一个简单的留言板的时候,卡了我很久,虽然完全没用过php..但是还是最后勉 ...

  3. JS 留言板案例

    css代码 ul { list-style: none; } ul li { background-color: pink; line-height: 40px; margin: 10px; widt ...

  4. JavaScript学习笔记（三）——留言板知操纵DOM节点

    用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...

  5. Python 每日一练 | Flask 实现半成品留言板

    留言板Flask实现 引言 看了几天网上的代码,终于写出来一个半成品的Flask的留言板项目,为什么说是半成品呢?因为没能实现留言板那种及时评论刷新的效果,可能还是在重定向上有问题 或者渲染写的存在问 ...

  6. 用js做一个简单的留言板效果

    html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>j ...

  7. vue+egg.js+mysql一个前后端分离留言板项目

    一.前序 我相信每个人前端搬运工和我想法都是一样的,都有一个做全栈的梦,无奈面对众多的后台语言,却不从下手,今天由我来带你们潜入全栈的门槛,注意是门槛.能不能学的会后面的内容全靠坚持了. 我今天主要做 ...

  8. 用 Express4 写一个简单的留言板

    Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...

  9. [js高手之路] vue系列教程 - 实现留言板todolist(3)

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...

随机推荐

  1. json2.js使用参考

    json2.js的源码地址: https://github.com/douglascrockford/JSON-js Visual Studio用户可以直接通过Nuget来获得. json2.js提供 ...

  2. 解决VS如何同时打开两个工程（xp和win7）

    http://www.360doc.com/content/11/1020/00/7891073_157586269.shtml

  3. [转载]ASP.NET MVC URL重写与优化(进阶篇)-继承RouteBase玩转URL

    引言-- 在初级篇中,我们介绍了如何利用基于ASP.NET MVC的Web程序中的Global文件来简单的重写路由.也介绍了它本身的局限性-依赖于路由信息中的键值对: 如果键值对中没有的值,我们无法将 ...

  4. poj 2888 Magic Bracelet

    经典的有限制条件的Burnside计数+矩阵乘法!!! 对于这种限制条件的情况我们可以通过矩阵连乘得到,先初始化矩阵array[i][j]为1.如果颜色a和颜色b不能涂在相邻的珠子, 那么array[ ...

  5. [codility]Min-abs-sum

    https://codility.com/demo/take-sample-test/delta2011/ 0-1背包问题的应用.我自己一开始没想出来.“首先对数组做处理,负数转换成对应正数,零去掉, ...

  6. Spring整合freemarker发送邮件

    转载:http://blog.csdn.net/zdp072/article/details/32745335 分类: freemarker spring 2014-06-20 23:39 752人阅 ...

  7. java内存模型 年轻代/年老代 持久区

    jvm中的年轻代 老年代 持久代 gc   虚拟机中的共划分为三个代:年轻代(Young Generation).老年代(Old Generation)和持久代(Permanent Generatio ...

  8. [Unity菜鸟] Unity Web Player 相关问题 （待完善）

    1. 发布网页版Unity自适应网页大小 发布网页版,Unity3D自适应网页大小.这个问题困扰了我很长时间,今天终于把他解决了,给大家分享一下. 这里用Uinty4.0发布网页版,我去掉了里面的标题 ...

  9. Java 简单的加密解密算法

    package cn.std.util; import java.nio.charset.Charset; public class DeEnCode { private static final S ...

  10. Red hat Linux(Centos 5/6)安装R语言

    Red hat Linux(Centos 5/6)安装R语言1 wget http://cran.rstudio.com/src/base/R-3/R-3.0.2.tar.gz2 tar xzvf R ...