发表于: 2018-07-03 15:10:14

1 422


今天完成的事情:

实现输入框输入数字,滑动条也动

输入框数字超过4~18则出现警示框

点击左右的加号减号,点击滑动块,玩家配比的人数也跟着改变

任务二基本完成


明天计划的事情: 

做任务三


遇到的问题: 

想实现点击一下就自增一下

var x = document.getElementById("range").value;
x++;
document.getElementById("range").value = x;

第二行部分

x=~~(x)+1;

x=parseInt(x)+1;

上面两个都可以,重点是在于把获取到的值进行加一,直接 x = x+1这样是不行的。要用~~或parseInt等等进行处理。

点一下自增:

var x = document.getElementById("range").value;
if(x<18){
x++;
}else {
x = 18;
}
document.getElementById("range").value = x;


if( 4 <= x.value<= 18

上面这种写法没用?无法实现功能

if( 4 <= x.value && x.value <= 18) {
a.value = x.value;
   console.log(a);

下面这种却可以

所以结论就是 if的判断条件 不能 4< x <18 这种方式写,要把两个条件用 && 分开写?


下面这种写法是错误的,我也不知道错在哪,反正不能实现。

if(a === 5) {
var b = a--;
   document.getElementById("civilian").innerHTML = b;
}


onchange事件与onblur事件都是通过失去焦点触发



收获:

只能通过 getElementById() 来访问 <input type="range"> 元素?getElementsClassName()跟getElementsTagName()不行。

var x = document.getElementById("myRange");



Math对象常用的

.ceil 向上取整

.floor 向下取整

.rondom 取随机数[0~1)

.round 四舍五入为最近的数



innerHTML与innerTEXT的区别

共同点:innerHTML和innerText都会把元素内内容替换掉。

不同: innerHTML是符合W3C标准的,而innerText只能用于IE浏览器

            设置值时 innerText会把html标签当做普通的文本显示,而innerHTML 则不会。

取值时 innerText会把只会获取节点里面的文本信息,而innerHTML 会获取节点下面的所有标签。



获取对象内容 JS提供的三种方法:

outerHTML

innerHTML

innerTEXT



.innerHTML 、document.getElementById.style、setAttribute、.createElemrnt的异同

1.innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

2.document.getElementById.style 可以让我们访问HTML元素的样式对象

3.setAttribute() 方法创建或改变某个新属性

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

4.createElement() 方法通过指定名称创建一个元素



Ⅰ、oninput事件
oninput 事件在用户输入时触发。

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

提示:该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。


onkeyup 事件


onblur 事件会在对象失去焦点时发生。

onblur="myOnKeyUp()
function myOnKeyUp() {
var x = document.getElementById("number-inputs");
   var a = document.getElementById("range");
   if( 4 <= x.value && x.value <= 18) {
a.value = x.value;
       console.log(a);
   }else {
x.value = a.value;
       alert ("请输入4~18的数字");
       console.log(x);
   }
}




.innerHTML 语法

killer.innerHTML = ("1");

farmer.innerHTML = (num - "1");









进度:task2

任务开始时间:2018.7.1

预计结束时间:2018.7.3

是否有延期风险:无

禅道:http://task.jnshu.com/zentao/project-task-687.html



返回列表 返回列表
评论

    分享到