用DOM相关方法创建的留言板

  1.  <html xmlns="http://www.w3.org/1999/xhtml">
  2.  <head>
  3.  <style>
  4.      #ul1 {margin:0; padding:0;}
  5.      #ul1 li {list-style:none; width:300px; background:#CCC; border:1px solid #999; position:relative;}
  6.      #ul1 li h2 {display:inline-block;}
  7.      #ul1 li p {display:inline-block;}
  8.      #ul1 li a {position:absolute; right:4px; bottom:4px;}
  9.  </style>
  10.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  11.      <title>无标题文档</title>
  12.  <script type="text/javascript">
  13.  window.onload=function (){
  14.      var oName=document.getElementById('name');
  15.      var oContent=document.getElementById('content');
  16.      var oUl=document.getElementById('ul1');
  17.      var oBtn=document.getElementById('btn1');
  18.      var aLi=oUl.getElementsByTagName('li');
  19.      var oLi=null;
  20.  
  21.      oBtn.onclick=function (){
  22.          oLi=document.createElement('li');
  23.          var oH2=document.createElement('h2');
  24.          var oP=document.createElement('p');
  25.          var oA=document.createElement('a');
  26.  
  27.          oH2.innerHTML=oName.value+'：';
  28.          oP.innerHTML=oContent.value;
  29.          oA.innerHTML='删除';
  30.          oA.href='javascript:;';
  31.          oA.onclick=function (){
  32.              oUl.removeChild(this.parentNode);
  33.          };
  34.  
  35.          oLi.appendChild(oH2);
  36.          oLi.appendChild(oP);
  37.          oLi.appendChild(oA);
  38.  
  39.          if(aLi.length>0){
  40.              oUl.insertBefore(oLi, aLi[0]); //确保新添加的在最前面
  41.          }
  42.          else{
  43.              oUl.appendChild(oLi);
  44.          }
  45.      };
  46.  };
  47.  </script>
  48.  </head>
  49.  <body>
  50.  姓名：<input id="name" type="text" /><br />
  51.  内容：<textarea id="content" rows="5" cols="40"></textarea><br />
  52.  <input id="btn1" type="button" value="留言" />
  53.  <ul id="ul1">
  54.  </ul>
  55.  </body>
  56.  </html>

javascript留言板的更多相关文章

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

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

  2. javaScript简单的留言板

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

  3. JavaScript+IndexedDB实现留言板：客户端存储数据

    之前看到贴友有问:用js怎么实现留言板效果.当时也写了一个,但是没有实现数据存储:http://www.ido321.com/591.html 现在将之前的改写一下,原来的HTML布局不变,为了防止G ...

  4. dd——留言板再加验证码功能

    1.找到后台-核心-频道模型-自定义表单 2.然后点击增加新的自定义表单 diyid 这个,不管他,默认就好 自定义表单名称 这个的话,比如你要加个留言板还是投诉建议?写上去呗 数据表  这个不要碰, ...

  5. html的留言板制作（js）

    这次留言板运用到了最基础的localstorage的本地存储,展现的效果主要有: 1.编写留言2.留言前可以编辑自己的留言昵称.不足之处: 1.未能做出我喜欢的类似于网易的叠楼功能. 2.未能显示评论 ...

  6. 11月8日PHP练习《留言板》

    一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php  登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  7. LigerUi框架+jquery+ajax无刷新留言板系统的实现

    前些天发布了LigerUi框架的增.删.改代码,一堆代码真的也没一张图片.有的网友推荐上图,所有今天把涉及到这个框架的开源的留言板共享给大家.在修改的过程中可能有些不足的地方希望大家拍砖. 因为留言板 ...

  8. tp框架做留言板

    首先是登录的LoginController.class.php 代码内容是 <?php namespace Admin\Controller; use Think\Controller; cla ...

  9. 数据库留言板例题：session和cookie区别

    session和cookie区别: <?php session_start(); //session_start();必须写在所有的php代码前边 ?> <!DOCTYPE html ...

随机推荐

  1. [algorithm]求最长公共子序列问题

    最直白方法:时间复杂度是O(n3), 空间复杂度是常数 reference:http://blog.csdn.net/monkeyandy/article/details/7957263 /** ** ...

  2. 在windows 7搭建xcode开发环境

    前言:本文适用于没有ios开发环境(如无iphone,mac等),在windows上搭建出ios的开发环境.值得注意的是,在windows搭建的ios开发环境只能做开发测试,无法发布产品.若需要发布产 ...

  3. Reactjs相比较原生方案是绝对的快吗？哪些情况下React有优势

    作者:尤雨溪链接:http://www.zhihu.com/question/31809713/answer/53544875来源:知乎著作权归作者所有,转载请联系作者获得授权.   1. 原生 DO ...

  4. 剑指offer--面试题15--相关

    感受:清晰的思路是最重要的!!! 题目:求链表中间节点 ListNode* MidNodeInList(ListNode* pHead) { if(pHead == NULL) return NULL ...

  5. memcached-repcached

    memcached的复制功能 下载对应的repcached版本:http://sourceforge.jp/projects/sfnet_repcached/,必须版本对应才行 当前只支持到1.2.8 ...

  6. 【锋利的JQuery-学习笔记】广告栏

    效果图: html: <div id="jnImageroll"> <a href="#nogo" id="JS_imgWrap&q ...

  7. Unity3d集成移动MM SDK 2.2的技术要点（坑爹的MM SDK）

    原地址:http://dong2008hong.blog.163.com/blog/static/4696882720140423517951/ U3D集成移动MM的SDK绝对是以坑爹为主的东西. 浪 ...

  8. 在MySQL中使用init-connect与binlog来实现用户操作追踪记录

    在MySQL中使用init-connect与binlog来实现用户操作追踪记录 分类: MySQL 前言: 测试环境莫名其妙有几条重要数据被删除了,由于在binlog里面只看到是公用账号删除的,无法查 ...

  9. Java 理论和实践: 了解泛型

    转载自 : http://www.ibm.com/developerworks/cn/java/j-jtp01255.html 表面上看起来,无论语法还是应用的环境(比如容器类),泛型类型(或者泛型) ...

  10. Java Notes

    1．java是解释型语言.java虚拟机能实现一次编译多次运行. 2．JDK(java software Development kit 软件开发包),JRE(java Runtime Environ ...