<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script type="text/javascript">

window.onload = function ()

{

    var otext = document.getElementsByTagName('input')[0];

    var obtn = document.getElementsByTagName('input')[1];

    var oul = document.getElementById('ul1');

    var n = 5;

    obtn.onclick = function ()

    {

        if(!otext.value)

        {

            return;

        }

        var oli = document.createElement('li');

        oli.innerHTML = otext.value;

        if(oul.children[0])

        {

            oul.insertBefore(oli,oul.children[0]);

        }

        else

        {

            oul.appendChild(oli);

        }

        if(oul.children[n])

        {

            oul.removeChild(oul.children[n]);

        }

        otext.value = '';

    }

};

</script>

</head>

<body>

<input type="text">

<input type="button" value="留言">

<ul id="ul1">

</ul>

</body>

</html>

dom 学习的开始~简单留言1的更多相关文章

  1. 前端基础-BOM和DOM学习

    JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...

  2. HTML DOM 学习

    HTML DOM 学习 By: Mirror王宇阳 E-mail:2821319009@qq.com 博客主页:https://www.cnblogs.com/wangyuyang1016/ DOM ...

  3. JSP学习笔记(三):简单的Tomcat Web服务器

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

  4. cookie的简单留言框

    我们在网页浏览时退出后,再次进入时会有上次的记录,这就用的上cookie属性了,cookie就是服务器暂存放在你计算机上的一笔资料,好让服务器用来辨认你的计算机.当你在浏览网站的时候,Web服务器会先 ...

  5. Hibernate二次学习一----------Hibernate简单搭建

    因为博客园自带的markdown不太好用,因此所有markdown笔记都使用cmd_markdown发布 Hibernate二次学习一----------Hibernate简单搭建: https:// ...

  6. JAVA WEB学习笔记(三):简单的基于Tomcat的Web页面

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

  7. oracle学习 第一章 简单的查询语句 ——03

    1.1最简单的查询语句 例 1-1 SQL> select * from emp; 例 1-1 结果 这里的 * 号表示全部的列.它与在select 之后列出全部的列名是一样的.查询语句以分号( ...

  8. Spark学习笔记0——简单了解和技术架构

    目录 Spark学习笔记0--简单了解和技术架构 什么是Spark 技术架构和软件栈 Spark Core Spark SQL Spark Streaming MLlib GraphX 集群管理器 受 ...

  9. Html学习笔记(二) 简单标签

    标签的重点 标签的用途 标签在浏览器中的默认样式 <body>标签: 在网页上显示的内容 <p>标签: 添加段落 <hx>标签: 添加标题 标签一共有6个,h1.h ...

随机推荐

  1. asp开发微信扫码支付

    这个任务已经给了.现在正在学习开发中.主要注意的是2点. 1:返回参数的验证. 2:通知后业务处理和处理后返回财付通.大部分操作,api中已经处理好. 现在需要的业务逻辑部分. 需要正确3个参数  r ...

  2. 谈谈Perforce

    实习就要结束了,收获之一就是学会了使用Perforce! Perforce SCM System是一款构建于可伸缩客户/服务器结构之上的软件配置管理工具.仅仅应用 TCP/IP,开发人员就能够通过多种 ...

  3. IntelliJ IDEA创建第一个Java小程序

    我尝试了汉化,会影响IDE部分功能. 其实IDE完全没必要汉化,就那么几个单词,不懂的话,就有道字典查一下吧. 汉化易于入门,不汉化一样可以使用. 我爱这个编辑器,非常之强大,就是比较占内存. 我爱这 ...

  4. hdu 4810 Wall Painting (组合数学+二进制)

    题目链接 下午比赛的时候没有想出来,其实就是int型的数分为30个位,然后按照位来排列枚举. 题意:求n个数里面,取i个数异或的所有组合的和,i取1~n 分析: 将n个数拆成30位2进制,由于每个二进 ...

  5. QDialog之屏蔽Esc键

    简述 Qt中Esc键会在一些控件中默认的进行一些事件的触发,比如:QDialog,按下Esc键窗口消失.大多数情况下,我们不需要这么做,那么就需要对默认事件进行屏蔽. 简述 源码分析 事件过滤器 事件 ...

  6. Jqgrid入门-Jqgrid格式化数据(九)

    上一章已经说明了在Jqgrid中如何对数据分组,这一章主要探讨如何格式化Jqgrid中的数据.何谓格式化呢?举个例子,比如对时间格式化处理,去掉后面的时分秒:对数字进行处理,加上千分位分隔符,小数的保 ...

  7. Codeforces Round #291 (Div. 2)

    A 题意:给出变换规则,单个数字t可以变成9-t,然后给出一个数,问最小能够变成多少. 自己做的时候理解成了不能输出前导0,但是题目的本意是不能有前导0(即最高位不能是0,其余位数按照规则就好) 55 ...

  8. wordpress plugins collection

    1/ simple page ordering 4.8星 wordpress的plugins唯一的好处就是命名简单易懂,这款插件从名称就可以看出来,用来对page页面排序的.只需要在后台page中拖拽 ...

  9. HDU 3555 Bomb (数位DP-记忆化搜索模板)

    题意 求区间[1,n]内含有相邻49的数. 思路 比较简单的按位DP思路.这是第一次学习记忆化搜索式的数位DP,确实比递推形式的更好理解呐,而且也更通用~可以一般化: [数位DP模板总结] int d ...

  10. Android WebView中那些不得不解决的坑~~

    前面那张hybrid开发心得 有人问 怎么解决不用onJsPrompt 来回调js函数的问题.其实很简单,就是在在你的jscalljava回调函数内 另外开个线程去load js代码即可: wb.po ...