<!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. maven-source 1.3 中不支持注释请使用 -source 5 或更高版本以启用注释

    解决办法:在pom里 加上以下代码 <build> <plugins> <plugin> <groupId>org.apache.maven.plugi ...

  2. CSS文字控制与文本控制

    一.CSS控制文字属性: 1.font-size:18px;:设置字号(默认是16px=1em),一般在制作网页的时候,先在body里同一设置下字体大小2.color:#093:设置字色3.font- ...

  3. 51nod1627 瞬间移动

    打表可以看出来是组合数...妈呀为什么弄成n+m-4,n-1,m-3就错啊... //打表可以看出来是组合数...妈呀为什么弄成n+m-4,n-1,m-3就错啊... #include<cstd ...

  4. Maven之 学习资料

    整理maven的学习资料,长期更新. 一.视频 1.孔浩老师的  maven视频教程 二.博客 1.黄勇:     maven那些事儿 使用 OSC Maven 仓库 三.书籍 1.<Maven ...

  5. POJ 3422 Kaka's Matrix Travels (K取方格数：最大费用流)

    题意 给出一个n*n大小的矩阵,要求从左上角走到右下角,每次只能向下走或者向右走并取数,某位置取过数之后就只为数值0,现在求解从左上角到右下角走K次的最大值. 思路 经典的费用流模型:K取方格数. 构 ...

  6. WMware 10 Ubuntu 12.04 进入Unity模式

    /********************************************************************* * WMware 10 Ubuntu 12.04 进入Un ...

  7. 20160201.CCPP体系详解(0011天)

    内容概要:C语言基本数据类型及运算题库(含答案) 第二章 基本数据类型及运算 一.选择题 1. 若以下选项中的变量已正确定义,则正确的赋值语句是[C]. A) x1=26.8%3; B) 1+2=x2 ...

  8. c++ vector 释放内存

    1.释放单个指针 关于Vector中存放指针的问题,在进行清空的时候比较安全的一种做法是:    std::vector<ClassName *> ClassNameVec;    ... ...

  9. centos下安装eclipse-c++

    eclipse-c++ 1)编译器及工具链 yum install gcc gcc-c++ 2)开发工具包(JDK):下载网址:http://www.oracle.com/technetwork/ja ...

  10. 【转】WPF MultiBinding 和 IMultiValueConverter

    WPF MultiBinding 和 IMultiValueConverter 时间 2015-02-02 19:43:00  博客园精华区 原文  http://www.cnblogs.com/wo ...