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

效果：

缺点是没有保存数据，之后会考虑用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. 2018用IDEA搭建SSM框架（Spring+SpringMVC+Mybatis）

    使用IDEA搭建ssm框架 环境 工具:IDEA 2018.1 jdk版本:jdk1.8.0_171 Maven版本:apache-maven-3.5.3 Tomcat版本:apache-tomcat ...

  2. [leetcode DP]72. Edit Distance

    计算最少用多少不把word1变为word2, 思路:建立一个dp表,行为word1的长度,宽为word2的长度 1.边界条件,dp[i][0] = i,dp[0][j]=j 2.最优子问题,考虑已经知 ...

  3. js中对同步和异步的理解

    你应该知道,javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流 ...

  4. Hibernate之Hibernate环境搭建

    Hibernate之Hibernate环境搭建 一.Hibernate环境搭建的步骤 1.添加Hibernate && SQLServer 的Jar antlr-2.7.7.jar d ...

  5. 【Naive Splay Template】

    写小作业的时候重新复习了一下splay 只支持插入,删除,查k大,查节点数.没有迭代器. T类型需要重载==和<,要调用拷贝构造函数. template<class T> class ...

  6. hdu 4463 第37届ACM/ICPC杭州赛区K题 最小生成树

    题意:给坐标系上的一些点,其中有两个点已经连了一条边,求最小生成树的值 将已连接的两点权值置为0,这样一定能加入最小生成树里 最后的结果加上这两点的距离即为所求 #include<cstdio& ...

  7. bzoj 2011

    决策单调性,对于一个1D/1D(状态是一维,转移也是一维)的DP,如果DP的决策具有单调性,那么就可以做到O(nlogn)的复杂度完成DP. 感谢<1D/1D  动态规划优化初步>的作者. ...

  8. 使用 Nokia Imaging SDK 开发有滤镜功能的 Windows Phone 8 应用

    说到滤镜应用,相信很多数开发者都对照片特效的经验都十分有限,通常都是去找一些三方的类库进行学习或移植,今天在这里给大家介绍下 Nokia 的 Imaging SDK, 相信大家对Nokia的自家图像软 ...

  9. C#中常见的系统内置委托用法详解(抄录)

    C#中常见的系统内置委托 Action类.Func类.Predicate<T>.Comparison<T>委托 Action类的委托 Action委托 封装一个方法,该方法不具 ...

  10. MVC基类控制器的会话丢失重新登录权限过滤

    SSOController.cs请查看以下代码: public class SSOController : Controller { public const string Token = " ...