需求：用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. SpringJUnit4加载类目录下(src)和WEF-INF目录下的配置文件

    路径说明: 一.加载类目录下的配置文件 @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration("classpath:ap ...

  2. centos64位安装32位C/c++库

    yum install glibc.i686 glibc-devel.i686 yum install libstdc++.i686yum install libstdc++-devel.i686yu ...

  3. css3属性整理

    浏览器内核:主流内容主要有Mozilla(熟悉的有Firefox,Flock等浏览器).WebKit(熟悉的有Safari.Chrome等浏览器).Opera(Opera浏览器).Trident(讨厌 ...

  4. EntityFreamwork 读写分离

    http://www.cnblogs.com/cjw0511/p/4391092.html

  5. 【BZOJ 2829】 2829: 信用卡凸包 （凸包）

    2829: 信用卡凸包 Description Input Output Sample Input 2 6.0 2.0 0.0 0.0 0.0 0.0 2.0 -2.0 1.5707963268 Sa ...

  6. utf-8转换为ansi和修改文件名的批处理（可解决source insight中文注释乱码问题）

    source insight中文乱码有两个原因,一个是source insight的设置不正确.另外一个原因是源文件是utf-8格式的. 最近在工作中用source insight 查看jsp文件.j ...

  7. ArrayList源代码深入剖析

    第1部分 ArrayList介绍ArrayList底层采用数组实现,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAccess, Cloneable, java. ...

  8. python-append()方法

    append() 方法向列表的尾部添加一个新的元素.只接受一个参数. >>> mylist = [1,2,3,4] >>> mylist [1, 2, 3, 4] ...

  9. JS复制对象

    CSSCommonJS.DeepCopy = function (json) { if (typeof json == 'number' || typeof json == 'string' || t ...

  10. 动态规划晋级——HDU 3555 Bomb【数位DP详解】

    转载请注明出处:http://blog.csdn.net/a1dark 分析:初学数位DP完全搞不懂.很多时候都是自己花大量时间去找规律.记得上次网络赛有道数位DP.硬是找规律给A了.那时候完全不知数 ...