今天完成的事
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");
评论