技术小白的成长之路

写在前面：作为一个在校学生，大二开始接触到WEB，一下子就被这个绚丽的东西迷住了，进而一发不可收拾，从那会开始就已经打算好未来就要走这条路了。从最初的html，css到h5，css3，再到js，jq，再到angular，之后还了解了一些node，一路可谓坎坷不断，不过还是收获颇丰，但是总觉得自己和别人差一些东西，后来反复揣摩。终于发现了这个问题所在，那就是缺少总结，有时候做一个小demo发现的问题当事解决了，但是过后又忘记了，这个可能就是我的拦路虎吧。所以有时候我感慨，我和别人的差距或许就是在一篇博文吧。与其说博客是分享给大家参考的，不如说博客是给自己的一种随笔吧，而且还是那种有质量的随笔（因为可能有人看哦^_^）。所以，我觉得我要好好的写自己的博客了，为了自己。

首先，先分享一个小demo，效果见下图：

这是一个模仿手机端密码设置的一个demo。

在做这个demo时，我的想法是：

1.首先，我把整体UI界面写好，包括移动端时的背景点状背景图片，头部（手势密码文本处），躯干部分，包括用ul-li列表写出来的9个圆点，也就是最终手触摸的目标点，以及radio按钮部分。

2.

对这些UI界面进行适应屏幕处理，使用屏幕查询适应了大小手机以及平板电脑，分别美化其UI，具体在main.css尾部有明确代码。

3.

待最基本的UI界面写好后，就是写功能逻辑部分，对于手指触摸目标点变色这个行为，我的思想是让每个目标点在手指移动时计算自己与手指点的距离，当其距离在圆点半径之内，即表示其已经被触摸，此时改变其背景颜色，同时将目标点（li）在ul中的位置数字push到记录触摸点顺序的数组中，在程序中即为全局变量arr。

4.

在处理被触摸点之间连线这个行为时，我的思路是使用canvas绘画，我把canvas画布绝对定位在ul的位置，同时使ul的z-index比canvas大。由于本次画线时只是9个点之间的处理，数据比较少，因此我记下了9个点的位置，在程序中体现在全局变量pointPos上，当手指触摸第一个点时，不予以画线，在这个是通过查询arr数组的长度实现，当触摸非第一个点时，取出数组中最后一个和倒数第二个点对应的pointPos里面的位置数据（目标点位置进数组在画线之前进行），进行canvas画线。

5.

最后进行的就是操作有效性的判断。最开始先初始化一个提示语对象，其存放着使用的所有提示语，在程序中的体现在全局对象markWords中。其次，当使用者进去页面，先判断使用者是否在其使用的平台第一次打开，即判断localStorage.password的值是否为空，若为空，则提示设置密码，若不为空，通过判断使用者选择的是哪个功能（设置密码或者验证密码），进行接下来的操作。若使用设置密码功能，则让使用者自行输入手势密码，其密码存放在之前定义的全局数组arr中，然后对数组进行检查是否其长度小于5，若小于5，则提示长度过小，重新输入，在程序中的体现是inputCheckOnce函数。若第一次检查通过，把arr数组的值传递给arr1数组，然后把arr置空。接着提示使用者第二次输入，然后把用户触摸目标点的位置记录在arr数组中通过程序中的inputCheckTwice对arr，arr1进行比较，若相同，则提示设置成功，把arr的值传递给localStorage.password，若不同，则清空arr，arr1，提示使用者重新输入。当使用者使用验证密码功能时，将其输入的手势密码数组和localStorage.password进行比较，若校沟通，则提示正确，若不相同，则提示重新输入

*注：每次使用者输入完，记录下arr之后，都会初始化li样式，会清空画布。

当然，因为考虑到9个点是固定的，所以才这记录9个点的位置，也可以进行动态canvas绘画