需求：用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. java当中的定时器的4种使用方式

    import java.util.Calendar;import java.util.Date;import java.util.Timer;import java.util.TimerTask; p ...

  2. 团体程序设计天梯赛-练习集L1-018. 大笨钟

    L1-018. 大笨钟 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 微博上有个自称“大笨钟V”的家伙,每天敲钟催促码农们爱惜 ...

  3. cf 283A

    不能简单模拟(会超时)  运用一点小技巧  减少时间复杂度 #include <cstdio> #include <cstring> using namespace std; ...

  4. iOS开发笔记--宏定义的黑魔法 - 宏菜鸟起飞手册

    宏定义在C系开发中可以说占有举足轻重的作用.底层框架自不必说,为了编译优化和方便,以及跨平台能力,宏被大量使用,可以说底层开发离开define将寸步难行.而在更高层级进行开发时,我们会将更多的重心放在 ...

  5. POJ 3252 Round Numbers（数位dp）

    题意:给定区间[l,r],l < r ,求区间中满足条件的正整数的个数:二进制表示下0的个数不少于1的个数. 分析:f(x)表示<=x时满足条件的数的个数,所求问题即为f(r)-f(l-1 ...

  6. Weblogic下部署的应用，当更新文件时需要重新安装部署

    JSP页面检查(秒):-1 Servlet重新加载检查(秒):-1 -1说明从不检查,故当更新文件时,需要重新部署,或重新安装部署.

  7. ArcGIS学习记录-Excel和Txt中XY点数据生成点Shape文件方法

    (一)Excel中XY点数据生成点Shape文件方法 1.Excel表如下:   2.点击ArcGIS中的"+"号按钮,添加数据.选择第一步中制作好的Excel文件,点击Add按钮 ...

  8. hibernate--持久对象的生命周期介绍

    持久化对象的状态 : 1. 瞬时对象(Transient Object):使用new操作符初始化的对象不是立刻就持久的.它们的状态是瞬时的,也就是说它们没有任何跟数据库表相关联的行为,只要应用不再引用 ...

  9. 为Windows 7添加“Internet打印”功能

    http://wangchunhai.blog.51cto.com/225186/1156589/

  10. C++ 类的内存分布

    C++类内存分布 转自:http://www.cnblogs.com/jerry19880126/p/3616999.html   先写下总结,通过总结下面的例子,你就会明白总结了. 下面总结一下: ...