js开发实例 —— 获取URL参数数据&模拟框拖拽

二十一、获取URL参数数据

思路：

①第一个登录页面,里面有提交表单，action提交到index.html页面。

②第二个页面,可以使用第一个页面的参数,这样实现了-个数据不同页面之间的传递效果。

③第二个页面之所以可以使用第一个页面的数据,是利用了URL里面的location.search参数。

④在第二个页面中,需要把这个参数提取。

⑤第一步去掉 ? 利用substr 。

⑥第二步利用 = 号分割键和值split( ‘ = ‘ ) 。

JS代码:

二十二、模拟框拖拽

思路：

① 点击弹出层，模态框和遮挡层就会显示出来display:block;

② 点击关闭按钮，模态框和遮挡层就会隐藏起来display:none;

③ 在页面中拖拽的原理:鼠标按下并且移动，之后松开鼠标。

④ 触发事件是鼠标按下mousedown，鼠标移动mousemove 鼠标松开mouseup。

⑤ 拖拽过程:鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了。

⑥ 鼠标按下触发的事件源是最上面一行，就是id为title。

⑦ 鼠标的坐标减去鼠标在盒子内的坐标，才 是模态框真正的位置。

⑧ 鼠标按下，我们要得到鼠标在盒子的坐标。

⑨ 鼠标移动，就让模态框的坐标设置为:鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面。

⑩ 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除。

JS 代码：