html部分：

  1.    1: <!DOCTYPE>
  1.    2: <html lang="zh-en">
  1.    3: <head>
  1.    4:     <title>js实现简单留言板</title>
  1.    5:     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  1.    6:     <link rel="stylesheet" type="text/css" href="./forum.css">
  1.    7:     <script type="text/javascript" src="./forum.js"></script>
  1.    8: </head>
  1.    9: <body>
  1.   10:     <div class="container">
  1.   11:         <div class="content">
  1.   12:             <!-- <form action="?" method="?"> -->
  1.   13:                 <div class="text">
  1.   14:                     <label for="message">js简单留言板(置空可以查看默认的留言内容)</label>
  1.   15:                 </div>
  1.   16:                 <div class="text" style="margin-left:-75px">
  1.   17:                     <label for="name">昵称：</label>
  1.   18:                     <input type="text" id="name" value="昵称(默认是dwqs)" class="txt">
  1.   19:                 </div>
  1.   20:                 <div class="text">
  1.   21:                     <textarea rows="5" cols="30" id="message" value="" class="txt">给我留言(默认留言内容：我的小站：www.ido321.com)</textarea>
  1.   22:                 </div>
  1.   23:                 <div class="btn">
  1.   24:                     <!-- <input type="submit" id="submit" value="提交留言"> -->
  1.   25:                     <button id="btn1">提交留言</button>
  1.   26:                 </div>
  1.   27:             <!-- </form> -->
  1.   28:         </div>
  1.   29:         <h3 style="clear:right">留言列表</h3>
  1.   30:         <hr/>
  1.   31:         <div class="messageList" id="messageList">
  1.   32:         </div>
  1.   33:     </div>
  1.   34: </body>
  1.   35: </html>

css:

  1.    1: *{
  1.    2:     margin: 0 auto;
  1.    3:     padding: 0;
  1.    4:     font-family: "Microsoft YaHei","sans-serif";
  1.    5: }
  1.    6: .container{
  1.    7:     width: 400px;
  1.    8:     height: auto;
  1.    9: }
  1.   10: .text{
  1.   11:     text-align: center;
  1.   12:     margin-bottom: 15px;
  1.   13: }
  1.   14: .btn{
  1.   15:     margin-right: 30px;
  1.   16:     float: right;
  1.   17: }
  1.   18: #messageList{
  1.   19:     width: 100%;
  1.   20:     height: 100%;
  1.   21: }
  1.   22: .txt{
  1.   23:     color: gray;
  1.   24:     opacity: 0.8;
  1.   25:     filter:alpha(opacity=0.8);
  1.   26: }

js:

  1.    1: /**
  1.    2: *文档加载完后，运行名为func的函数
  1.    3: *@param func 需要运行的函数的名
  1.    4: *说明：window.onload事件处理函数的值存入变量oldonload;如果函数上没有绑定任何函数，则正常添
  1.    5: *加；若已经绑定有函数，则添加到指令末尾。
  1.    6: */
  1.    7: function addLoadEvent(func)
  1.    8: {
  1.    9:     var oldonload = window.onload; //得到上一个onload事件的函数
  1.   10:     if(typeof window.onload != 'function')
  1.   11:     {
  1.   12:         window.onload = func;
  1.   13:     }
  1.   14:     else
  1.   15:     {
  1.   16:         window.onload = function()
  1.   17:         {
  1.   18:             oldonload(); //调用之前覆盖的onload事件的函数
  1.   19:             func(); //调用当前事件函数
  1.   20:         }
  1.   21:     }
  1.   22: }
  1.   23: function getMessage(){
  1.   24:     var btn = document.getElementById("btn1");
  1.   25:     var message = document.getElementById("message");
  1.   26:     var name = document.getElementById("name");
  1.   27:     var nameValue = "";
  1.   28:     var messageValue = "";
  1.   29:
  1.   30:     name.onfocus = function(){
  1.   31:         name.value="";
  1.   32:     }
  1.   33:     message.onfocus = function(){
  1.   34:         message.value="";
  1.   35:     }
  1.   36:
  1.   37:     btn.onclick = function(){
  1.   38:         messageValue =  message.value || "我的小站：www.ido321.com" ; //设置默认值
  1.   39:         nameValue = name.value || "dwqs";
  1.   40:         var msgList = document.getElementById("messageList");
  1.   41:         var msgDiv = document.createElement("div");
  1.   42:         var msgTxt = document.createTextNode(nameValue+"说："+messageValue);
  1.   43:         msgDiv.appendChild(msgTxt);
  1.   44:         msgList.appendChild(msgDiv);
  1.   45:     }
  1.   46: }
  1.   47: addLoadEvent(getMessage);

效果：

缺点是没有保存数据，之后会考虑用js+WebSql实现数据保存，但是目前只有chrome支持WebSql

关于js设置默认值，可以参考：http://www.ido321.com/555.html

用js做一个简单的留言板效果的更多相关文章

  1. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

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

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

  3. css3加js做一个简单的3D行星运转效果

    前几天在园子里看到一篇关于CSS3D行星运转的文章,原文在这里,感觉这个效果也太酷炫了,于是自己也就心血来潮的来尝试的做了一下.因为懒得去用什么插件了,于是就原生的JS写,效果有点粗超,还有一些地方处 ...

  4. D3.js 做一个简单的图表（条形图）

    柱形图是一种最简单的可视化图标,主要有矩形.文字标签.坐标轴组成. 本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图. 一. 画布是什么 前几章的处理对象都是 HTML ...

  5. 用JS,做一个简单的计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8">   <title&g ...

  6. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  7. 【 D3.js 入门系列 — 3 】 做一个简单的图表！

    图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...

  8. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  9. .Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器

    目标:使用.net core最新的3.0版本,借助httpclient和本机的host域名代理,实现网络请求转发和内容获取,最终显示到目标客户端! 背景:本人在core领域是个新手,对core的使用不 ...

随机推荐

  1. 获取类的属性并排除特定属性（getType().GetProperties()）

    当获取一个类型(class)的所有属性时,想排除指定属性,该如何操作? 比如:EF中一个实体类型UserEntity,通过反射获取这个类的属性时,想排除这个为映射的字段ID 使用以下方法即可! Pro ...

  2. shellcode在栈溢出中的利用与优化

    0x00 前言 在<Windows Shellcode学习笔记——shellcode的提取与测试>中介绍了如何对shellcode作初步优化,动态获取Windows API地址并调用,并通 ...

  3. bzoj 3956: Count

    3956: Count Description Input Output Sample Input 3 2 0 2 1 2 1 1 1 3 Sample Output 0 3 HINT M,N< ...

  4. 【POJ】1840：Eqs【哈希表】

    Eqs Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 18299   Accepted: 8933 Description ...

  5. python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐（二）

    在上一篇blog:python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐 中介绍了python中的tkinter的一些东西,你可能对tkinter有一定的了解了.这篇b ...

  6. Uva 12889 One-Two-Three

      Your little brother has just learnt to write one, two and three, in English. He has written a lot ...

  7. Charles基本使用—http抓包、手机抓包、数据篡改

    本文主要介绍如下内容: 1.Charles如何抓取HTTP报文 2.Charles如何抓取手机上的HTTP包 3.使用Charles篡改数据信息 一.Charles抓取HTTP包 1.Charles的 ...

  8. Effective OC : 1-5

    1,了解Objective-C语言的起源: OC为C语言的超集,为C加入了面向对象的特性. 要理解C中的指针和内存模型. 2.在类文件里尽量少引入其它头文件: 引入过多头文件.将借口暴露,添加耦合度. ...

  9. A SCSI command code -- SIMPLIFIED DIRECT-ACCESS DEVICE (RBC)

    SIMPLIFIED DIRECT-ACCESS DEVICE (RBC) ------------------------------------------ OP B Description -- ...

  10. JEECG第二期深入使用培训（报名截止2014-06-21）

    JEECG第二期深入使用培训(报名截止2014-06-21) JEECG深度研究-交流碰撞火花,你学会的不不过JEECG,很多其它的是软件架构思想 http://www.jeecg.org/forum ...