<!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. BZOJ 1507 Editor（块状链表）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1507 题意:一个文本编辑器,模拟以下操作: 思路:块状链表的主要操作: (1)find( ...

  2. poj 动态规划题目列表及总结

    此文转载别人,希望自己能够做完这些题目! 1.POJ动态规划题目列表 容易:1018, 1050, 1083, 1088, 1125, 1143, 1157, 1163, 1178, 1179, 11 ...

  3. leetcode Database2 (四)

    一.Duplicate Emails Write a SQL query to find all duplicate emails in a table named Person. +----+--- ...

  4. hdu4427Math Magic

    4427 dp[i][j][k] i为K位的最小公倍数 j为k位的和 k以滚动数组的形式 这题最棒的是 有一个强有力的剪枝 组成公倍数m的肯定都是M的质因子 这样1000里面最多就30多个 复杂度可过 ...

  5. Qt之QHeaderView自定义排序（QSortFilterProxyModel）

    简述 对以上节的排序,我们衍伸了两点: 把一个字符串前面的数据按照字符串比较,而后面的数据按照整形比较. 将整形显示为字符串,而排序依然正常呢. 为了分别描述,这里我们先解决问题1. 简述 效果 处理 ...

  6. [转] POJ图论入门

    最短路问题此类问题类型不多,变形较少 POJ 2449 Remmarguts' Date(中等)http://acm.pku.edu.cn/JudgeOnline/problem?id=2449题意: ...

  7. python练习程序（c100经典例10）

    题目: 打印楼梯,同时在楼梯上方打印两个笑脸. print '..' for i in range(1,9): print '**' for j in range(1,i+1): print ' ',

  8. phonegap 清空页面缓存

    访问页面添加 <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV=& ...

  9. notepad 行替换使用指南

    notepad++是开源的文本处理软件,性能堪比ultraedit,不过在转用notepad++之后一直为他的行替换功能纠结,UE当中只需要用 [^p] 就可以表示一行,但是在notepad++当中, ...

  10. windows下mysql 数据库的导入导出

    1.以.sql方式方式导入导出 http://www.360doc.com/content/11/0114/11/2905268_86441355.shtml 2.以.txt方式导入导出 http:/ ...