<!doctype html>

<html>

<head>

<meta charset="utf-8">

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

<script type="text/javascript">

window.onload = function ()

{

    var otext = document.getElementById('text1');

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

    var obtn2 = document.getElementsByTagName('input')[2];

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

    var flag = 1;

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

        }

        otext.value = '';

        for( var i = 0 ;i < oul.children.length; i++)

        {

            oul.children[i].onclick = function ()

            {

                if(flag)

                {

                    this.mark = '1';

                    this.style.background = 'yellow';

                }

                else

                {

                    this.mark = '';

                    this.style.background = '';

                }

                flag = !flag;

            }

        }

    };

    obtn2.onclick = function ()

    {

        for(var i = 0; i < oul.children.length; i++)

        {

            if(oul.children[i].mark)

            {

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

                i--;

            }

        }

    }

};

</script>

</head>

<body>

<input type="text" id="text1">

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

<input type="button" value="批量删除">

<ul id="ul1">

</ul>

</body>

</html>

dom 留言加强的更多相关文章

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

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

  2. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  3. dom 学习的开始~简单留言1

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 简单的留言板（dom+正则练习）

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 每天一个JS 小demo之留言板。主要知识点：DOM方法的理解和运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  6. 从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文

    一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效 ...

  7. js DOM优化相关探索

    我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...

  8. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  9. JS中级 - 01：DOM节点

    1元素属性   1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...

随机推荐

  1. 观察者模式最佳案例实现[JAVA][原创]

    /** * American Stock Exchange market(ASE) has a list of stocks.A stock object has two perspective in ...

  2. 同步synchronized用法

    今天在高人的指导下,对同步synchronized用法有了更高一层的理解,非常感谢他的无私奉献.在此把代码贴出来方便日后查阅. publicclass SfServlet { privatestati ...

  3. golang 常用网址收藏

    1:beego 模板语法指南:http://blog.go-china.org/03-beego-template 2:go 语言sublimetext2配置:http://www.kankanews ...

  4. java线程安全理解

    java线程安全理解 如果你的代码所在的进程中有多个线程在同时运行,而这些线程可能会同时运行这段代码.如果每次运行结果和单线程运行的结果是一样的,而且其他的变量的值也和预期的是一样的,就是线程安全的. ...

  5. 基于Flume的美团日志收集系统(一)架构和设计

    美团的日志收集系统负责美团的所有业务日志的收集,并分别给Hadoop平台提供离线数据和Storm平台提供实时数据流.美团的日志收集系统基于Flume设计和搭建而成. <基于Flume的美团日志收 ...

  6. HDU 4006 The kth great number【优先队列】

    题意:输入n行,k,如果一行以I开头,那么插入x,如果以Q开头,则输出第k大的数 用优先队列来做,将队列的大小维护在k这么大,然后每次取队首元素就可以了 另外这个维护队列只有k个元素的时候需要注意一下 ...

  7. Servlet生命周期以及获取参数

    1. 创建Servlet几种方式  1) 实现Servlet接口     控制Servlet的生命周期       构造器       init()       service()       des ...

  8. Linux diff patch

    /***************************************************************************** * Linux diff patch * ...

  9. 数据结构——Java实现单向链表

    结点类: /** * @author zhengbinMac * 一个OnelinkNode类的对象只表示链表中的一个结点,通过成员变量next的自引用方式实现线性表中各数据元素的逻辑关系. */ p ...

  10. dynamic_cast

    作为四个内部类型转换操作符之一的dynamic_cast和传统的C风格的强制类型转换有着巨大的差别.除了dynamic_cast以外的转换,其行为的都是在编译期就得以确定的,转换是否成功,并不依赖被转 ...