js 学习案例

1.模拟京东快递单号查询案例

注：

 快递单号输入内容时， 上面的大号字体盒子(con)显示(这里面的字号更大)
 表单检测用户输入： 给表单添加键盘事件
 同时把快递单号里面的值(value)获取过来赋值给 con盒子(innerText)做为内容
 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子

2.倒计时案例

    
    
    
    
    



    1
    2
    3
    

注：

①这个倒计时是不断变化的，因此需要定时器来自动变化(setlnterval)

② 三个黑色盒子里面分别存放时分秒

③ 三个黑色盒子利用innerHTML放入计算的小时分钟秒

④第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
⑤最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问
题

3.发送短信案例

    
    
    
    
    



    

        
        发送
    
    

注：

① 按钮点击之后，会禁用disabled为true
② 同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
③里面秒数是有变化的，因此需要用到定时器
④定义一个变量，在定时器里面，不断递减
⑤ 如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态。

4.offset概述

offset翻译过来就是偏移量，我们使用offset系列的相关属性可以动态的得到元素的位置，大小等。

注：获得元素距离带有定位父元素的位置

        获得元素自身大小（宽度，高度）

        返回值不带单位

常用属性：

5.定时器

 1.setTimeout()定时器

window.setTimeout(调用函数，[延迟的毫秒数])；
setTimeout0方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
注意：
1.window可以省略。
2.这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
3.延迟的毫秒数省略默认是0，如果写，必须是毫秒。
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

2.setInterval()定时器

window.setInterval(回调函数，[间隔的毫秒数])；
setInterval()方法重复调用一个函数，每隔这公时间，就去调用一次回调函数。
注意：
1.window可以省略。
2.这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名)”三种形式。
3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

6.window对象常见事件

1. 窗口加载事件

window.onload= function(){}
或者
window.addEventListener("load",function(){});

window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)，就调用的处理函数。
注意：
(1).有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
(2).window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
(3).如果使用addEventListener 则没有限制

2.调整窗口大小事件

window.onresize = function()(
window.addEventListener("resize", function()());

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数。注意：
(1).只要窗口大小发生像素变化，就会触发这个事件。
(2).我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度

7.元素可视区 client 系列

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client系列属性                      作用
element.clientTop         返回元素上边框的大小
element.clientLeft        返回元素左边框的大小
element.clientWidth     返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位element.clientHeight    返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

8.立即执行函数

写法 1.（function(){}）（）

        2. （function（）{}（））

9.动画函数

    
    
    
    
    


    
123456789