<!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操作office和pdf文件页面列表导出cvs，excel、pdf报表.

    在平常的开发中我们常常遇到不仅仅只是导出excel报表的情况.有时候也需要导出pdf或者CSV报 表.其实原理都差不多.刚开始本来不打算也这篇博客介绍这个的.感觉这篇博客和前面的博客有点雷同.原理基本 ...

  2. Linux Kernel CMPXCHG函数分析

    原文地址:http://blog.csdn.net/penngrove/article/details/44175387 最近看到Linux Kernel cmpxchg的代码,对实现很不理解.上网查 ...

  3. ural1221. Malevich Strikes Back!

    http://acm.timus.ru/problem.aspx?space=1&num=1221 算是枚举的 题目意思是必须划出这样的 11011 10001 00000 10001 110 ...

  4. 推荐开源Api文档生成工具——Doxygen

    http://www.stack.nl/~dimitri/doxygen/index.html 非常的方便. 2步生成API文档. 具体信息见官网哟!

  5. hdu1054(二分图匹配)

    题意很简单,在一颗树上找最小点覆盖. 将树染成黑白两色,构成一张二分图,然后最大匹配==最小点覆盖即可,所以一次匈牙利就可以求出来了 hdu1054 #include <iostream> ...

  6. Mybatis foreach

    批量删除: <delete id= "deleteBatchByXXX" parameterType= "list"> delete from 表名 ...

  7. OK335xS Linux kernel check clock 24M hacking

    /****************************************************************************** * OK335xS Linux kern ...

  8. HDU 3666 THE MATRIX PROBLEM （差分约束，最短路）

    题意: 给一个n*m矩阵,每个格子上有一个数字a[i][j],给定L和U,问:是否有这样两个序列{a1...an}和{b1...bn},满足 L<=a[i][j]*ai/bj<=U .若存 ...

  9. 工作流Activiti5流程变量 任务变量 setVariables 跟 setVariablesLocal区别

    工作流Activiti5流程变量 任务变量 setVariables 和 setVariablesLocal区别 因为网上的资料比较少.结合源码把相关API写下来. 设置流程级别变量: runtime ...

  10. 07day2

    居然是动规专场.这样不好吧?   采药 [问题描述] 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到 ...