今天完成的事
1,学习正则表达式,找到自己想要的匹配表达式;
2,学习JQuery的语法规则,确保可以在任务中使用;
3,使用断点调试任务一,熟悉调试工具,通过这些看到函数执行过程的参数变化,方便更快的找到问题所在;

4,js模拟任务界面滑块功能;
明天的计划
1,将任务二发牌页面设计好的各个模块代码组合,确保没有冲突;
2,学习了解状态机用法;
遇到的问题
暂无
收获
1,js模拟滑块,使用了html5的input元素的新特性;type=range;并且通过修改默认样式,达到预期的效果;
关键代码:
<body>
<div class="value">0</div>
<div class="range">
<input type="range" min="0" max="12" step="1" value="0">
<p class="rang_width"></p>
</div>
<script>
var elem = document.querySelector('input[type="range"]');
// var rangeValue = function()
var rangeValue = function() {
var newValue = elem.value;
var target = document.querySelector('.value');
target.innerHTML = newValue;
var max = elem.getAttribute("max");
var width = (91.3 / max * newValue) +"%"; //
document.querySelector('.rang_width').style.width = width;
};
elem.addEventListener("input", rangeValue);
</script>
</body>
2,因为要确定用户的输入为数字,避免输入非数值的信息,所以使用正则表达式其过滤作用:
var str = "123aabc";
var patt1 = /\D/;
使用该语句就可以找到输入信息中的第一个非数字的字符,然后弹出输入错误的弹窗,进而改正;
评论