美文网首页
Day29 - js 动态添加、删除元素

Day29 - js 动态添加、删除元素

作者: 莫名ypc | 来源:发表于2018-11-07 19:18 被阅读0次

    阻止事件的默认行为:evt.preventDefault();
    删除元素(删除子节点):parentNode.removeChild();
    创建新元素:document.createElement();
    添加子节点:appendChild();
    在指定位置加入节点:insertBefore();

            <script type="text/javascript">
                var ul = document.getElementById('fruits');
                var input = document.querySelector('#container input[type=text]');
                
                function removeItem(evt){
                        // 阻止事件的默认行为
                        evt.preventDefault();
                        var a = evt.target || evt.srcElement;
                        var li = a.parentNode;
                        // 删除元素(删除子节点)
                        li.parentNode.removeChild(li);
                }
                
                function addItem(){
                    var friuitName = input.value.trim();
                    if (friuitName.length > 0){
                        // 创建新元素
                        var li = document.createElement('li');
                        li.textContent = friuitName;
                        var a = document.createElement('a');
                        a.href = '';
                        a.textContent = '×';
                        a.addEventListener('click', removeItem);
                        li.appendChild(a)
                        // 添加子节点
                        // ul.appendChild(li);
                        // 在指定位置加入节点
                        ul.insertBefore(li, ul.firstChild);
                    }
                    input.value = '';
                    input.focus();
                }
                
                var anchors = document.querySelectorAll('#fruits a');
                for (var i = 0; i < anchors.length; i += 1){
                    anchors[i].addEventListener('click', removeItem);
                }
                
                input.addEventListener('keypress', function(evt){
                    var key = evt.keyCode || evt.which;
                    if (key == 13){
                        addItem();
                    }
                });
                
                var okButton = document.querySelector('#ok');
                okButton.addEventListener('click', addItem);
            </script>
    
            <script type="text/javascript">
                function randomColor(){
                    r = parseInt(Math.random() * 256);
                    g = parseInt(Math.random() * 256);
                    b = parseInt(Math.random() * 256);
                    
                    return 'rgb(' + r + ',' + g + ',' + b + ')';
                }
                
                var bigBox = document.querySelector('#big')
                var createButton = document.getElementById('button1');
                var flaButton = document.getElementById('button2');
                var span = document.querySelector('#button2>span');
                
                function create(){
                    var div = document.createElement('div');
                    div.style.backgroundColor = randomColor();
                    bigBox.appendChild(div);
                }
                
                
                function fla(){
                    if(flag){
                        timerId = window.setInterval(function(){
                            var div = document.querySelectorAll('#big>div');
    //                  console.log(div[1]);
                            changeColor(div);
                            span.textContent = '暂停';
                            flag = false;
                        },10);
                    }else{
                        window.clearInterval(timerId);
                        span.textContent = '闪烁';
                        flag = true;
                    }
                    
                }
                
                function changeColor(div){
    //              console.log(div[1]);
    //              console.log(div.length);
    //              div[1].style.backgroundColor = 'red';
                    for(var i = 0; i < div.length; i += 1){
                        div[i].style.backgroundColor = randomColor();
                    }
                }
                
                createButton.addEventListener('click', create);
                
                var flag = true;
                flaButton.addEventListener('click', fla);
                
            </script>
    

    相关文章

      网友评论

          本文标题:Day29 - js 动态添加、删除元素

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