<!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. POJ -3190 Stall Reservations （贪心+优先队列）

    http://poj.org/problem?id=3190 有n头挑剔的奶牛,只会在一个精确时间挤奶,而一头奶牛需要占用一个畜栏,并且不会和其他奶牛分享,每头奶牛都会有一个开始时间和结束时间,问至少 ...

  2. Android Touch(4)我不知道的MotionEvent（＊）

    1,MotionEvent的复制或构造 有时候可能要保存一个MotionEvent, 它的构造方法是匿名的,不能直接创建,对外提供的获取对象的接口是静态的obtain方法,可以从一个MotionEve ...

  3. 【HDOJ】3901 Wildcard

    1. 题目描述有两个长度为$10^5$的字符串,其中一个仅包含小写字母,称之为源串:另一个包含?与*通配符的模式串,并且通配符的个数不超过10.求模式串是否能匹配源串? 2. 基本思路这其实是一道Re ...

  4. Jquery-json

    第三方插件: jquery.json-2.4.js Jquery-json 是 jQuery 的一个插件,可轻松实现对象和 JSON 字符串之间的转换.可序列化 JavaScript 对象.数值.字符 ...

  5. bzoj4026

    直接按照欧拉函数的计算方式来即可 φ=区间积*区间出现(质数-1)的积/区间出现过的质数的积 区间积是满足类似区间减法的操作的(利用逆元) 由于强制在线,上主席树就可以了(维护每个质数上次出现的位置p ...

  6. BZOJ 3624 免费道路

    第一反应:这不先0后1做并查集就行了吗? 然后WA了... 哦....啊?哦...233 如果按顺序做并查集,有些0的边可能很重要(只能由它作为0连起两个联通块),但并没有被选. 于是先按1做并查集, ...

  7. Windows pyqt4 bat自动转换UI文件-->.pyw文件

    /***************************************************************************** * Windows pyqt4 bat自动 ...

  8. 打印Dom对象的所有属性和方法

    <html> <head> <title>Test</title> <meta http-equiv="Content-Type&quo ...

  9. ORACLE学习笔记 索引和约束

    /*** 约束 ***/ * 如果某个约束只作用于单独的字段,即可以在字段级定义约束,也可以在表级定义约 束,但如果某个约束作用于多个字段,  必须在表级定义约束* 在定义约束时可以通过CONSTRA ...

  10. 《C和指针》读书笔记 第2章-基本概念

    原创文章,转载请注明出处:http://www.cnblogs.com/DayByDay/p/3936485.html