JS Task4,5,6

js有个函数 isNaN(val)//如果是数字则返回 false

使用时候

if(!isNaN(val)){
   alert("是数字");
}else{
   alert("不是数字");
}

<b>任务四：</b>


图片.png

<b>任务五</b>

图片.png

队列实现形式如下：

task_2_18_1.jpg

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            display:inline-block;
            background-color: orangered;
            color:white;
            font-size:20px;
            text-align:center;
            padding:3px;
            margin:2px;
            cursor:pointer;
        }
    </style>
    <script src="EventUtil.js"></script>
</head>
<body>
<input type="text" id="txt"/>
<input type="button" value="左侧入" id='left-unshift'/>
<input type="button" value="左侧出" id="left-shift"/>
<input type="button" value="右侧入" id="right-push"/>
<input type="button" value="右侧出" id="right-pop"/>
<ul id="queue"></ul>
<input type="button" value="排序" id="sort"/>
<script>

        var text=document.getElementById('txt');
        var queue=document.getElementById('queue');
        var left_unshift=document.getElementById('left-unshift');
        var left_shift=document.getElementById('left-shift');
        var right_pop=document.getElementById('right-pop');
        var right_push=document.getElementById('right-push');
        var sort=document.getElementById('sort');
        var arr2=new Array();

        var item;
        //添加元素
       function add(direction){
           if(text.value==''){
               alert("请输入数字！");
               //text.focus();
           }else if(isNaN(text.value)){
               alert("输入的数字不合法，请重新输入一个数字");
               text.value='';
               //text.focus();
           }else if(!isNaN(text.value)){
               if(text.value>=10&&text.value<=100){
                   var list=document.createElement('li');
                   list.style.height=text.value+'px';
                   arr2.push(text.value);
                   text.value = '';
                   text.focus()

                   if(direction==="left"){
                       if(queue.childNodes.length<=60){
                           queue.insertBefore(list,queue.firstChild);
                       }else{
                           alert("队列元素超出60！");
                       }
                   }else if(direction==="right"){
                       if(queue.childNodes.length<=60){
                           queue.appendChild(list);
                       }else{
                        alert("队列元素超出60！");
                       }

                   }
               }else{
                   alert("请输出的数字在10-100！");
               }

               //在这里插入之后立即添加click事件
               list.onclick = function(){
                Delete(this);
               }

           }
       }

        //删除元素
        function DeleteElement(direction){
            if(queue.childNodes.length<=0){
                alert("不存在元素可以删除");
                //return false;
            }else{
                if(direction==="left"){
                    queue.removeChild(queue.firstChild);
                }else if(direction==='right'){
                    queue.removeChild(queue.lastChild);
                }
            }
        }

        

        function sortArr(arr){
          arr.sort(function(a,b){
            return a-b;
          });
          return arr;
        }


        left_unshift.onclick=function(){
            add("left");
        };
        left_shift.onclick=function(){
            DeleteElement("left");
        };
        right_pop.onclick=function(){
            DeleteElement("right");
        };
        right_push.onclick=function(){
            add("right");
        };


        sort.onclick=function(){
            //debugger;
            sortArr(arr2);//排序后的高度数组
            //console.log(arr2);
            var list2=document.getElementsByTagName('li');//获取所有现在所有Li标签的高度数组
            for(var i=0;i<arr2.length ;i++){
                list2[i].style.height=arr2[i] + 'px';
            }


        };


        //删除元素
        function Delete(obj){
            obj.parentNode.removeChild(obj);
        }

<b>任务六:</b>

图片.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            display:inline-block;
            background-color: orangered;
            color:white;
            font-size:15px;
            text-align:center;
            padding:3px;
            margin:2px;
            cursor:pointer;
           /* width:60px;
            height:30px;*/
        }
        .match{
            background-color: blue;
        }
    </style>

</head>
<body>
<textarea type="text" id="txt" width="200px" height="100px"></textarea>
<input type="button" id="left_add" value="左入"/>
<input type="button" id="left_del" value="左出"/>
<input type="button" id="right_add" value="右入"/>
<input type="button" id="right_del" value="右出"/>
<input type="button" id="search" value="查询"/>
<input type="text" id="valueBox"/>
<ul id="space">

</ul>

<script>
    //获得各种按钮的标签

        var text=document.getElementById('txt');
        var left_add=document.getElementById('left_add');
        var left_del=document.getElementById('left_del');
        var right_add=document.getElementById('right_add');
        var right_del=document.getElementById('right_del');
        var btn2=document.getElementById('search');
        var arr=[];
        //根据方向判断左加还是右加

        function add(direction){
            if(text.value==''){
                alert("请输入!不能为空！");
            }else{
              //这两句话很重要！
              var str=text.value.replace(/[^0-9a-zA-Z\u4e00-\u9fa5]+/g," ");
              arr=arr.concat(str);
              for(var i=0;i<arr.length;i++){
                  var li=document.createElement("li");
                  li.innerHTML=arr[i];
                  li.style.width=arr[i].length*10+'px';
                  var ul=document.getElementById('space');
                  text.value='';
              }

                if(direction=='left'){
                    ul.insertBefore(li,ul.firstChild);

                }else if(direction=='right'){
                    ul.appendChild(li);
                }

            }
        }
        function del(direction){
            if(ul.childNodes.length<=0){
                alert("没有要删除的元素！");
            }else if(direction==='right'){
                ul.removeChild(ul.lastChild);
            }else if(direction==='left'){
                ul.removeChild(ul.firstChild);
            }
        }

        function search(){
            var searchValue=document.getElementById('valueBox').value;
            var lis=document.getElementsByTagName('li');
            for(var i=0;i<arr.length;i++){
               var reg=new RegExp(searchValue);
                lis[i].innerHTML=lis[i].innerHTML.replace(reg,"<span class='match'>"+searchValue+"</span>");
            }


        }
        left_add.onclick=function(){
            add('left');

        };
        right_add.onclick=function(){
            add('right');
        };
        left_del.onclick=function(){
            del('left');
        };
        right_del.onclick=function(){
            del('right');
        };
        btn2.onclick=function(){
            search();
        };



</script>
</body>
</html>

知识点一：
针对第三条需要输入的内容用正则表达式匹配，将英文，中文和数字以外的字符用空格来代替。

[A-Za-z0-9\u4e00-\u9fa5]

推荐笔记：
http://ife.baidu.com/note/detail/id/1034
http://ife.baidu.com/note/detail/id/718

<h2>关于DOM的操做</h2>

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,179评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,229评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,032评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,533评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,531评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,539评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,916评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,574评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,813评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,354评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,937评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2赞 342

推荐阅读更多精彩内容