发表于: 2020-01-07 22:51:54

1 1162


今天完成的事

1,js任务二的基本事件添加;

2,事件代码,使用了正则判断,if嵌套,事件监听等:


function setNum () {
    // var elem1 = document.querySelector('input[type="range"]');
    var elem1 = document.getElementById("input-slide");
    var elem2 = document.getElementById("players");
    // var newValue1 = elem1.value;
    var newValue2 = elem2.value;
    var regexp=/\D/;
    function rangeValue() {
        // var newValue1 = elem1.value;
        var middle = elem1.value;
        elem2.value = middle;
        var max = elem1.getAttribute("max");
        var width = (90 / max * middle) +"%";    
        document.getElementById("range-widths").style.width = width;
      }
      elem1.addEventListener("input"rangeValue);

    if (newValue2.match(regexp) == null) {
        var peopleNum;
        var killerNum;
        function setPlayer (peopleNum) {
            killerNum = newValue2 - peopleNum;
            document.getElementById("people").innerHTML=peopleNum;
            document.getElementById("killer").innerHTML=killerNum;
        }
        if (newValue2 > 3 && newValue2 < 19) {
            if (newValue2 < 6) {
                peopleNum = 1;
                setPlayer(peopleNum);
            }
            if (newValue2 > 5 && newValue2 < 10) {
                peopleNum=2;
                setPlayer(peopleNum);
            }
            if (newValue2 > 9 && newValue2 < 15) {
                peopleNum=3;
                setPlayer(peopleNum);
            }
            if (newValue2 > 14) {
                peopleNum=4;
                setPlayer(peopleNum);
            }
            
        } else {
            alert("请输入正确玩家数量,人数为4-18人。");
        }
    }else {
        alert("请输入正确的玩家数量");
        elem2.value="";
    }
}


明天的计划

1,使用json存储数据;

2,将js任务二代码之间冲突解决;

3,预习js任务三;

遇到的问题

    在函数之外无法获取元素输出null,确定语法没有问题,其他原因寻找中;

收获

dom结点的操作方法:

(1)创建节点——createElement()
          var node = document.createElement(“div”);

 (2) 创建文本节点——createTextNode()
           var value = document.createTextNode(“text”);

(3)插入节点到最后——appendChild()
         node.appendChild(value);

(4)插入节点到目标节点的前面——insertBefore()

        var node = document.createElement(“div”);

        var _p = document.createElement(“p”);

        var _span = document.createElement(“span”);

        eg:

        node.appendChild(_p);

        node.insertBefore(_span, _p);

(5)复制节点——cloneNode(boolean)
         node.cloneNode(true);
         node.cloneNode(false);

(6)删除节点——removeChild()
         node.removeChild(_p);

(7)替换节点——repalceChild(newNode, oldNode)
         node.repalceChild(_p, _span);

(8)设置节点属性——setAttribute()
         node.setAttribute("title","abc");

(9)获取节点属性——getAttribute()
         node.getAttribute("title");


返回列表 返回列表
评论

    分享到