[上海|结业弟子]JS-王玺|2019年12月14日的日报-技能树.IT修真院

发表于： 2019-12-14 22:47:54

1 1198

今日完成的工作

今天完成的内容是任务二开始时的滑块中的内容需要我们将滑块的显示与我们的input输入值处在同一个状态，并且能通过增加和减少按钮控制时时的控制我们的人数变化。总体的思路是，首先让我们的加号和减号按钮去与我们的输入值绑定在一起，通过回调我们的触发焦点的函数即可。

 btn.onclick=function bbb(){
    tol=parseInt(tol)+1;
    document.getElementById("m-inputnum-inp").value=tol
    allPeople()
    if(tol>17){btn.onclick=function(){}}
    document.getElementsByTagName("input")[0].value=tol
    show()
}

而后是要让我们的滑块具有我们4-18这个区间的所有的整数，并且可以通过我们的加号和减号控制。这时候就需要我们再调用滑块中的焦点函数了

function show(){
    tol = document.getElementById("m-inputnum-inp");
    tol.value = num.value;
    allPeople()
    r=(parseInt(num.value)-4)/14*100
    num.style.background='linear-gradient(to right, #059CFA, white ' + r + '%, white)'
}

再这个焦点函数中我们把要显示的值和我们输入的总人数做一个相等的赋值，并在上面的加号点击函数中调用它。

还差的效果是让我们的滑块移动到那里之前的一段就改变颜色，这一点因为我们的show函数在点击事件中调用了一次所以通过加号减号可以达到很好的控制效果，但是当我们在输入框输入我们要的人数时它会出现滑块移动了但是我们的颜色并没有改变吗，而我在此函数再调用show时无法完成加载应为首先show中已经调用过allpeople函数了所以会形成一个死循环在运行。而后解决的方法是在只是把我们需要的量写入allpeople中就可以了。

  r=(parseInt(num.value)-4)/14*100
    num.style.background='linear-gradient(to right, #059CFA, white ' + r + '%, white)'

明天完成的任务

看jquery的内容学习如何用jquery来写我们的代码

返回列表

【任务1】 [上海|结业弟子]JS-王玺 | 2019年12月14日 的日报 中品

评论

分享到

【任务1】 [上海|结业弟子]JS-王玺 | 2019年12月14日的日报中品