发表于: 2020-01-05 23:03:27

1 1064


今天完成的事

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/;

使用该语句就可以找到输入信息中的第一个非数字的字符,然后弹出输入错误的弹窗,进而改正;



返回列表 返回列表
评论

    分享到