task0002（四）练习：数据处理、轮播及交互

转载自我的个人博客

欢迎大家批评指正

包括5部分&＃xff1a;

小练习1-处理用户输入
小练习2-日期对象的使用
小练习3&＃xff1a;轮播图
小练习4&＃xff1a;输入提示框
小练习5&＃xff1a;界面拖拽交互

源码地址
task0002 在线Demo

小练习1&＃xff1a;处理用户输入

这里直接可以利用原来写过的util.js。所以应该不是特别难。主要考察对字符串的操作&＃xff0c;以及正则表达式的使用

任务描述

在task0002目录下创建一个task0002_1.html文件&＃xff0c;以及一个js目录和css目录&＃xff0c;在js目录中创建task0002_1.js&＃xff0c;并将之前写的util.js也拷贝到js目录下。然后完成以下需求。

第一阶段

在页面中&＃xff0c;有一个单行输入框&＃xff0c;一个按钮&＃xff0c;输入框中用来输入用户的兴趣爱好&＃xff0c;允许用户用半角逗号来作为不同爱好的分隔。

当点击按钮时&＃xff0c;把用户输入的兴趣爱好&＃xff0c;按照上面所说的分隔符分开后保存到一个数组&＃xff0c;过滤掉空的、重复的爱好&＃xff0c;在按钮下方创建一个段落显示处理后的爱好。

实现

根据题目要求&＃xff0c;这个地方比较简单&＃xff0c;可以直接利用前面写过的一些函数&＃xff0c;分成四步&＃xff0c;进行。

使用正则表达式来对字符串进行分割操作。
uniqArray函数进行去重操作。
for循环&＃xff0c;trim函数对数组项进行去除首尾空格&＃xff0c;用来处理&＃xff0c;该项为空的情况。
innerHTML进行输出。

html&＃xff1a;

task0002_1.js中的js:

//自执行的匿名函数 (function handle_1() {//其实这里没必要使用id因为数据那么少$函数直接获取标签就行var inp &＃61; $("#user_input");var out &＃61; $("#user_output");$.click("#btn", function () {var value &＃61; inp.value.split(/\,|\&＃xff0c;/); //1.根据半角逗号分割成数组。var unValue &＃61; uniqArray(value); //2.数组去重for (var i &＃61; 0, len &＃61; unValue.length; i " &＃43; trimValue &＃43; ""}}}) })();

第二阶段

单行变成多行输入框&＃xff0c;一个按钮&＃xff0c;输入框中用来输入用户的兴趣爱好&＃xff0c;允许用户用换行、空格&＃xff08;全角/半角&＃xff09;、逗号&＃xff08;全角/半角&＃xff09;、顿号、分号来作为不同爱好的分隔。

当点击按钮时的行为同上

实现

看题目描述&＃xff0c;主要是对于第一步进行修改&＃xff0c;第一阶段只要求对半角逗号进行处理&＃xff0c;但是在第二阶段中&＃xff0c;需要对“换行、空格&＃xff08;全角/半角&＃xff09;、逗号&＃xff08;全角/半角&＃xff09;、顿号、分号”进行处理。
主要是考察对于正则表达式的应用。

只需要对var value &＃61; inp.value.split(/\,|\&＃xff0c;/); 进行更改如下&＃xff1a;

var value &＃61; inp.value.split(/\n|\s&＃43;|\,|\&＃xff0c;|\、|\;|\&＃xff1b;/);
需要注意的是&＃xff1a;在正则表达式进行匹配这些符号时最好是前面加上转义字符。

第三阶段

用户输入的爱好数量不能超过10个&＃xff0c;也不能什么都不输入。当发生异常时&＃xff0c;在按钮上方显示一段红色的错误提示文字&＃xff0c;并且不继续执行后面的行为&＃xff1b;当输入正确时&＃xff0c;提示文字消失。

同时&＃xff0c;当点击按钮时&＃xff0c;不再是输出到一个段落&＃xff0c;而是每一个爱好输出成为一个checkbox&＃xff0c;爱好内容作为checkbox的label。

实现

嗯&＃xff0c;其实这里按照题目要求应该要实时监听输入值变化&＃xff0c;但是那样太麻烦了&＃xff0c;&＃xff0c;所以就直接在点击按钮的时候判断了。
直接判断数组长度就行了。。输入为空时&＃xff0c;判断字符串&＃61;“”。
输出checkbox这里不过多的设置了&＃xff0c;只是演示。

最终完成

html:

输入的爱好数量不能超过10个&＃xff0c;或什么都不输入

js:

(function handle_1() {var inp &＃61; $("#user_input");var out &＃61; $("#user_output");$.click("#btn", function () {var value &＃61; inp.value.split(/\n|\s&＃43;|\,|\&＃xff0c;|\、|\;|\&＃xff1b;/); //分割成数组。var unValue &＃61; uniqArray(value); //数组去重var i &＃61; 0;var len &＃61; unValue.length;if (len > 10 || unValue &＃61;&＃61; "") {$("p").style.disautoPlay &＃61; "block";} else {$("p").style.disautoPlay &＃61; "none";for (; i " &＃43; "" &＃43; trimValue &＃43; ""}}}}) })();

在线演示&＃xff1a;小练习1&＃xff1a;处理兴趣列表

小练习2&＃xff1a;日期对象的使用

任务描述

在和上一任务同一目录下面创建一个task0002_2.html文件&＃xff0c;在js目录中创建task0002_2.js&＃xff0c;并在其中编码&＃xff0c;实现一个倒计时功能。

界面首先有一个文本输入框&＃xff0c;允许按照特定的格式YYYY-MM-DD输入年月日&＃xff1b;
输入框旁有一个按钮&＃xff0c;点击按钮后&＃xff0c;计算当前距离输入的日期的00:00:00有多少时间差
在页面中显示&＃xff0c;距离YYYY年MM月DD日还有XX天XX小时XX分XX秒
每一秒钟更新倒计时上显示的数
如果时差为0&＃xff0c;则倒计时停止

实现思路

了解日期对象

这里主要是考察的对于日期对象的使用。

new Date()。如果没有输入任何参数&＃xff0c;则Date的构造器会依据系统设置的当前时间来创建一个Date对象。表示当前系统时间。

//时间对象创建的几种方式。 var today &＃61; new Date(); var birthday &＃61; new Date("December 17, 1995 03:24:00"); var birthday &＃61; new Date("1995-12-17T03:24:00"); var birthday &＃61; new Date(1995,11,17); var birthday &＃61; new Date(1995,11,17,3,24,0);

Date对象中处理时间和日期的常用方法&＃xff1a;详细内容在MDN上

实现思路

这里我并没有一开始就直接进行数据获取的部分&＃xff0c;而是进行了任务分解&＃xff0c;如下&＃xff1a;

第一阶段

先在使用写好的ul>li标签下&＃xff0c;。添加3个事件mouseover、mouseout、click。实现点击li使其值变成输入框内的值。&＃xff08;直接使用事件代理&＃xff09;
对输入框添加键盘事件&＃xff08;对&＃xff0c;你没看错&＃xff0c;只有在聚焦在输入框时才触发&＃xff09;
- 获取当前高亮的li。没有则设第一个为高亮active。
- 判断keyCode使用键盘下键,使用nextElementSibling方法获取下一个节点&＃xff08;向上同理&＃xff09;,取消当前的active&＃xff0c;设置下一个为active。&＃xff08;使用键盘上下选中的效果,处理完成&＃xff09;
- 判断keyCode&＃xff0c;获取当前状态为active的值&＃xff0c;实现回车时&＃xff0c;把其设为input的值。
需要注意的地方&＃xff1a;
- 在移除高亮状态时&＃xff0c;最好是遍历一遍。因为键盘与鼠标划过有可能同时触发&＃xff0c;导致有多个高亮。
- 错误处理

第二阶段

删除原来的ul>lihtml部分的li。添加对于输入框进行实时监听&＃xff08;这部分不在这里展开讲&＃xff0c;如何实现大家去google吧&＃xff0c;因为一展开就太多要说的了&＃xff09;。

给个参考&＃xff1a;实时监听输入框值变化

使用AJAX获取服务器上的数据&＃xff0c;解析&＃xff0c;遍历&＃xff0c;并进行数据匹配。
匹配成功显示ul&＃xff0c;否则设为none。
使用正则表达式的match方法&＃xff0c;来获取匹配成功的把部分&＃xff0c;使用span进行高亮显示。并且插入ul
改造第一阶段的函数&＃xff1a;

因为是使用的事件代理&＃xff0c;直接对ul添加事件&＃xff0c;所以需要修改的部分不是很多。
click和enter部分获取的值&＃xff0c;因为span标签的存在&＃xff0c;需要使用正则进行处理&＃xff0c;输出删除span后的值。

在线演示&＃xff1a;小练习4&＃xff1a;输入框即时提示

小练习5&＃xff1a;界面拖拽交互

实现一个可拖拽交互的界面
如示例图&＃xff0c;左右两侧各有一个容器&＃xff0c;里面的选项可以通过拖拽来左右移动
被选择拖拽的容器在拖拽过程后&＃xff0c;在原容器中消失&＃xff0c;跟随鼠标移动
注意拖拽释放后&＃xff0c;要添加到准确的位置
拖拽到什么位置认为是可以添加到新容器的规则自己定
注意交互中良好的用户体验和使用引导

实现思路&＃xff1a;

第一步&＃xff1a;封装拖拽函数

开一个DEMO页面&＃xff0c;实践如下&＃xff1a;

了解应该用到的事件&＃xff0c;onmousedown、onmousemove、onmouseup。
思考对谁添加事件?
1. 在鼠标点击div时&＃xff0c;对div添加onmousedown,表示鼠标按下。
2. 在事件内给document添加onmousemove。&＃xff08;为啥给document加呢&＃xff1f;因为给div加在移动过快时会跳出去&＃xff09;表示鼠标移动。
3. 并且添加document添加onmouseup&＃xff0c;表示鼠标已经抬起&＃xff0c;清除移动事件&＃xff0c;以及本身。
思考如何设置对象的位置&＃xff1f;
1. 直接获取鼠标的位置并设置给div行不行呢&＃xff1f;试试吧&＃xff01;显然&＃xff0c;会出现问题&＃xff0c;点击鼠标就到div左上角去了。
2. 那么怎么改变呢&＃xff1f;获取鼠标在div中的位置&＃xff1f;对。就这样&＃xff0c;在鼠标按下时记录鼠标在div中的位置.
3. 在鼠标移动时&＃xff0c;用当前的位置&＃xff0c;减去刚刚的位置&＃xff0c;这就是应该的值&＃xff01;
别忘了鼠标抬起时&＃xff0c;需要清除事件&＃xff0c;不然鼠标就粘住了。

这里用到了event,事件对象的相关概念&＃xff0c;推荐观看慕课网的视频。DOM事件探秘

善用this。
扩展

/*** 鼠标拖拽函数。* &＃64;param {HTMLElement} element 需要拖拽的对象*/ function setDrag(element) {addEvent(element, "mousedown", onmousedown);//鼠标按下function onmousedown(ev) {var oEvent &＃61; ev || event;var disX &＃61; oEvent.clientX - this.offsetLeft;var disY &＃61; oEvent.clientY - this.offsetTop;var that &＃61; this;addEvent(document, "mousemove", onmousemove);addEvent(document, "mouseup", onmouseup);/*** 鼠标移动*/function onmousemove(ev) {var oEvent &＃61; ev || event;that.style.left &＃61; oEvent.clientX - disX &＃43; "px";that.style.top &＃61; oEvent.clientY - disY &＃43; "px"}/*** 鼠标抬起删除事件*/function onmouseup() {removeEvent(document, "mousemove", onmousemove);removeEvent(document, "mouseup", onmouseup);}} }

第二步&＃xff1a;布局转换函数

两个参数&＃xff0c;第一个参数&＃xff0c;传入父级对象。第二个参数传入标签名&＃xff0c;
循环&＃xff0c;使用数组&＃xff0c;对象&＃xff0c;获取标签当前元素的位置left&＃xff0c;top。&＃xff08;offsetLeft&＃xff09;。这里不能使用获取实际样式函数&＃xff0c;因为本身就需要获取其相对父元素的位置。
第二个循环
- 设置left&＃xff0c;top值。
- 设置绝对定位。
- 取消原有的margin值。
调用函数&＃xff0c;把对象从文档流布局&＃xff0c;变成绝对定位布局。

/*** 布局转换函数* &＃64;param {HTMLElment} element HTML对象* &＃64;param {string} childEle 其内需要转换的标签名*/ function toPosition(element, childEle) {var eleArr &＃61; element.getElementsByTagName(childEle);var aPos &＃61; [];//for (var i &＃61; 0, len &＃61; eleArr.length; i }

在线演示&＃xff1a;小练习5&＃xff1a;拖拽交互

第三步&＃xff1a;实现拖拽

前面我们已经实现了setDrag(element)函数&＃xff0c;常规方法就是直使用循环&＃xff0c;然后传入element。

但是&＃xff0c;为什么不用事件代理呢&＃xff1f;

特别简单&＃xff0c;只需要对上面写的函数进行一些简单的改装。

delegateEvent(parentElement, "li", "mousedown", function (ev) { //此处是原函数中的内容。 }

现在知道为什么上面的函数会用到this了吧&＃xff1f;

第四步&＃xff1a;碰撞检测函数

先来看张图&＃xff1a;
碰撞检测示意图

是不是有瞬间豁然开朗的感觉呢&＃xff1f;

获取相关值&＃xff0c;只需要考虑不碰不上的情况就行了&＃xff01;。如下&＃xff1a;

/*** 碰撞检测函数* &＃64;param {object} obj1 对象1* &＃64;param {object} obj2 对象2* &＃64;returns {boolean} 碰撞时返回true&＃xff0c;否则反正false*/ function hitDetection(obj1, obj2) {//对象1的相关值var l1 &＃61; obj1.offsetLeft;var r1 &＃61; obj1.offsetLeft &＃43; obj1.offsetWidth;var t1 &＃61; obj1.offsetTop;var b1 &＃61; obj1.offsetTop &＃43; obj1.offsetHeight;//对象2的相关值var l2 &＃61; obj2.offsetLeft;var r2 &＃61; obj2.offsetLeft &＃43; obj2.offsetWidth;var t2 &＃61; obj2.offsetTop;var b2 &＃61; obj2.offsetTop &＃43; obj2.offsetHeight;if (r1 r2 || b1 b2) {return false;//没碰上} else {return true;} }