美文网首页
JS Task4,5,6

JS Task4,5,6

作者: Hathaway_桉 | 来源:发表于2017-06-14 10:13 被阅读0次

    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 - 节点(元素)的属性节点

    相关文章

      网友评论

          本文标题:JS Task4,5,6

          本文链接:https://www.haomeiwen.com/subject/rkcfqxtx.html