SailorM - 博客园

2020年5月27日

摘要：案例分析： 1.我们在盒子内点击，想要获得鼠标距离盒子左右的距离； 2.首先得到鼠标在页面中的坐标（e.pageX,e.pageY)； 3.其次得到盒子在页面中的距离（box.offsetLeft，box.offsetTop)； 4.用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标阅读全文

posted @ 2020-05-27 15:47 SailorM 阅读(730) 评论(0) 推荐(0) 编辑

案例-获取URL参数

摘要：案例分析： 1.第一个登录页面，里面有提交表单，action提交到index.html页面； 2.第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果； 3.第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的locaition.search参数； index.h 阅读全文

posted @ 2020-05-27 09:29 SailorM 阅读(281) 评论(0) 推荐(0) 编辑

2020年5月25日

案例-5s之后跳转页面

摘要：案例分析： 1.利用定时器做倒计时效果； 2.利用 location.href 跳转页面。效果：代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>5s之后自动跳转页面</tit 阅读全文

posted @ 2020-05-25 20:11 SailorM 阅读(531) 评论(0) 推荐(0) 编辑

2020年5月21日

发送短信案例

摘要：案例分析： 1.按钮点击之后，会禁用按钮，disabled为true； 2.同时按钮里面的内容会变化，注意button按钮里面的内容通过innerHTML修改； 3.里面的秒数是有变化的，因此需要用到定时器； 4.定义一个变量，在定时器里面，不断递减； 5.如果变量为0，说明时间到了，我们需要停止定阅读全文

posted @ 2020-05-21 10:17 SailorM 阅读(173) 评论(0) 推荐(0) 编辑

2020年5月20日

倒计时效果

摘要：案例分析： 1.这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）； 2.三个黑色盒子分别存放时分秒； 3.三个黑色盒子利用innerHTML放入计算的小时分钟秒数； 4.第一次执行也是间隔毫秒数，因此刚刷新页面会有空白； 5.最好采取封装函数的方式，这样可以先调用一次这个函阅读全文

posted @ 2020-05-20 16:35 SailorM 阅读(229) 评论(0) 推荐(0) 编辑

回调函数之5s自动关闭广告

摘要：案例分析： 1. 5s之后就把广告因擦擦那个起来； 2. 用定时器setTimeout; 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 阅读全文

posted @ 2020-05-20 10:27 SailorM 阅读(193) 评论(0) 推荐(0) 编辑

2020年5月19日

模拟京东快递单号查询

摘要：案例分析： 1.快递单号输入时，上面的大号字体盒子（con）显示（这里面的字体更大）； 2.表单检测用户输入：给表单添加键盘事件； 3.同时把快递单号里面的值（value）获取过来赋值给con盒子（innerText）做为内容； 4.如果快递单号里面内容为空，则隐藏大号字体盒子（con）盒子。 5. 阅读全文

posted @ 2020-05-19 19:47 SailorM 阅读(1857) 评论(0) 推荐(0) 编辑

2020年5月18日

模拟京东按键输入内容

摘要：案例分析： 1.检测用户是否按下s键，如果按下s键，就把光标定位到搜索框里面； 2.使用键盘事件对象里面的keyCode判断用户按下的是否是s键； 3.搜索框获得焦点：使用js里面的focus()方法。效果（按下键盘上s键，搜索框会获得焦点）：代码： 1 <!DOCTYPE html> 2 <h 阅读全文

posted @ 2020-05-18 14:44 SailorM 阅读(215) 评论(0) 推荐(0) 编辑

2020年5月15日

鼠标事件-跟随鼠标移动

摘要：案例分析： 1.鼠标不断移动，使用鼠标移动事件 mousemove； 2.在页面中不断移动，给document注册事件； 3.图片要移动距离，而且不占位置，我们使用绝对定位； 4.核心原理：每次鼠标移动，都会获得最新的鼠标坐标，把这个xy坐标作为图片的left和top值就可以移动图片。效果： 1 阅读全文

posted @ 2020-05-15 17:27 SailorM 阅读(652) 评论(0) 推荐(0) 编辑

2020年5月13日

DOM的重点核心

摘要：一、DOM（文档对象模型），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 1.对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的阅读全文

posted @ 2020-05-13 11:01 SailorM 阅读(264) 评论(0) 推荐(0) 编辑