发表于: 2019-03-06 01:02:31

1 795



今天完成的事情:

1、今天查看关于获取value值

尝试使用input框来显示,找不到方向,

查到了使用p标签显示value,在网上看到有人提出了一个属性,textcontainer,意思是显示文本

当时以为自己做出来了,下午在做加减,以及需要给显示框能输入数字,知道必须使用input,

在查input有个样式是type=number,接着设置css样式,去除了右边两个加减号,解决问题

当时想,使用onchange来监听人数那里的input,接着使用左右加减来控制人数的显示,拖动条的input来监听输入框,给最后一个的设置人数也是来监听输入框的value,这样就达到了想要的目的,但还是发现这样达不到效果,还是太麻烦了,就换了另一种想法,

输入框与拖动条双向监听,加减控制拖动条,同时加减同时控制输入框的数字显示,差不多完成今天的任务

刚才也忽然测出了一个bug

今天晚上花时间解决一下,也忘记设置input输入框的字符限制



代码解读

var x = 6;//用来判断input框的value值

设置一个变量,为后来 的input输入限制,以及拖动限制

function tiaozhuan(){
window.location.href = '../首页/head.html';
};

对,早上用来查找页面跳转,试了各种页面跳转的方法都没能成功,迫不得已问了师兄,输入正确,最后查看是犯了低价错误,引用js文件还是使用的css的引用方式

function Enlarge(){//右边图片点击触发滑块增加
if(x < 18){
x++;
document.getElementById('slider').value = x;
document.getElementById('display').value = x;
}else{
alert("Duang一下,人就变少了");
}
console.log(x);
}

给右边图片设置点击事件,如果变量x小于18就可以运行其中的代码,先给自身加一再赋值就是这一次x的值

接着获取idslider的value的数值,把刚才x的值赋改获取到的value,第三行同理,不过监听的是另一个value值

function Reduce(){//左边图片点击触发value减少
if(x > 6){
x--;
document.getElementById('slider') .value = x;
document.getElementById('display').value = x;
}else{
alert("人太少了,再找几个小伙伴来吧");
}
console.log(x);
}

给左边减号设置点击事件,如果变量洗大于6就执行如下代码,先给自身减1,在把x的值赋给获取到的第一个id的value,第二个同理只不过赋值给另一个

false,则显示文本中的内容

function Obtain(){//输入框绑定拖动条
var x = document.getElementById("display").value;
document.getElementById("slider").value = x;
};

输入框的value的值绑定拖动条value的数值,先把display的value赋值给x,再把x赋值改slider

function Obtain_two(){
var x = document.getElementById("slider").value;
document.getElementById("display").value = x;
}

双向绑定,slider的value赋值改x,再把x赋值给display

达到双向绑定的效果

明天计划的事情:

明天的计划就是仔细检查bug,然后再好好巩固一下今天所学到的东西,感觉今天有些囫囵吞枣了。


遇到的问题:

今天遇到的主要问题就是不知道如何判断输入框的输入最大值以及最小值,以及输入e的情况

收获:

今天最大的收获应该就是进度有所提升吧,看到了效果,不过还是要仔细学习相关知识,感觉自己在文章和视频理解方面还是有所欠缺。



返回列表 返回列表
评论

    分享到