定时器、运动、日历

1.定时器（js中内置的一个方法）

 每隔一段时间或者延迟一段时间就执行一段指定的代码

  

 

2.重复执行定时器

  

             * 定时器的分类

             *     1、重复执行定时器

             *         setInterval()

             *         作用

             *             每隔一段时间就会去执行指定的函数，重复的执行

             * 

             *         语法

             *             setInterval(function(){

             *                 每隔一段时间就会执行这里的代码

             *             },时间)

             *         参数

             *             1、要执行的函数：当时间到了就会执行

             *                 注意：如果函数是在外面定义的，这里面调用的话只能写函数的名字，不能加括号

             *             2、时间：间隔的时间

             *                 单位是毫秒

             *                 1s=1000ms

         

1. 1. box.onclick=function(){
2. setInterval(function(){
3. i++
4. box.innerHTML=i;
5. },1000);
6. }
7.    2.函数在外部。

8. 1. box.onclick=function(){
   2. setInterval(action,1000);
   3. }
   4. function action(){
   5. i++;
   6. box.innerHTML=i;
   7. }
    

 

3.延迟执行定时器

             *         setTimeout()

             *         作用

             *             当延迟时间到达后，会执行指定的函数，这个函数只执行一次

             *         语法

             *             setTimeou(function(){

             *                 当时间到达后，会执行这里的代码

             *             },时间);

             *         参数

             *             1、要执行的函数：当时间到达后会执行这个函数

             *                 注意：如果函数是写在外面的，在这里调用的时候只用写函数的名字，不能加括号

             *             2、时间：延迟时间

             *                 时间单位也是毫秒

             *                 1s=1000ms

             *         什么时候用

             *             当需要延迟一段时间后去做一件事情，就用setTimeout

                           延迟执行不同于重复执行，延迟实行只做一次

1. box.onclick=function(){
2. setTimeout(function(){
3. i++
4. box.innerHTML=i;
5. },1000);
6. }
7. 2.外部调用函数
8. 1. box.onclick=function(){
   2. setTimeout(action,1000);
   3. }
   4. function action(){
   5. i++;
   6. box.innerHTML=i;
   7. }
    

 

4.定时器里面的this

    定时器里的this是指向window的，因为定时器是window身上的一个方法，所以this指向window

     

1. setInterval(function(){
2. //console.log(this); //window 这里的this指向window
3. },1000);

5.定时器的清除

   1.首先每一个定时器本身是具有编号的。

       console.log(setInterval(function(){},1000)); //Chrome下显示01

           但是每一个浏览器对定时器的编号解析不一样，所以需要给定时器的返回值一个变量，用这个变量去代表定时器的编号  

    2.给定时的返回值存一个变量

       var  time=setInterval(function(){},1000)    这样定时器还能执行吗？

           存的是定时器的返回值（编号），而不是定时器的本身，所以定时器能够执行。

    3.   清除定时器的方法

             *     1、清除重复执行定时器

             *         clearInterval(定时器的返回值)

             *     2、清除延迟执行定时器

             *         clearTimeout(定时器的返回值)  

                        因为延迟执行定时器只执行一次，所以有时候不清楚也没问题

1. var n=0;
2. function action(){
3. n++
4. if(n==8){
5. clearInterval(time);
6. }
7. console.log(n);
8. }
9. var time=setInterval(action,1000); time在下面声明，而在上面能够用到吗？
10. 无论time在调用的上面还是下面都是能够用到的，因为，js是同步模型，在执行上面的代码的时候也会执行下面的代码，
11. 并且要清除定时器是在n等于8时、

6.定时器不断修改属性

  

1. var time; 一般的都是这样写，并且声明写在最外面 全局变量
2. action.onclick=function(){
3. var l=parseInt(getComputedStyle(box).left); getComputedStyle()获取元素的属性
4. var t=parseInt(getComputedStyle(box).top);
5. var w=parseInt(getComputedStyle(box).width);
6. var h=parseInt(getComputedStyle(box).height);
7. time=setInterval(function(){ 如果声明写在这里，即 var time= 那么，这个time就是局部变量了
8. w++;
9. h++;
10. l++;
11. t++;
12. box.style.width=w+'px';
13. box.style.height=h+'px';
14. box.style.left=l+'px';
15. box.style.top=t+'px';
16. },16);
17. }
18. stop.onclick=function(){
19. clearInterval(time); 那么这里点击的时候 time是局部变量就起不了作用
20. }

7.重复执行与延迟执行定时器结合

1. window.onload=function(){
2. var box=document.getElementById("box");
3. var time;
4. var time1;
5. var l=parseInt(getComputedStyle(box).height);
6. 把第一个定时器的编号赋给timetime=setInterval(function(){ 第一个重复执行定时器
7. l++;
8. box.style.height=l+'px';
9. if(l==250){
10. clearInterval(time); 停止第一个重复执行器
11. setTimeout(function(){ 延迟执行定时器
12. 把第二个定时器的编号赋给time1time1=setInterval(function(){ 第二个重复执行定时器
13. l--;
14. box.style.height=l+'px';
15. if(l==100){
16. clearInterval(time1); 停止第二个重复执行器
17. }
18. },16);
19. },3000);
20. }
21. },16);
22. }

8.什么时候的变量能够写在定时器里面，什么时候变量不能写在里面

 

9.运动的问题

             *     1、如果每次的步长如果与目标值不成倍数的话，就到达不了目标值

             *         解决：把判断条件改成大于等于就可以

1. t=setInterval(function(){
2. var l=parseInt(getComputedStyle(box).left);
3. l+=7;
4. //当box走到300的时候，就让它停下来
5. //console.log(l);
6. if(l>=300){
7. clearInterval(t);
8. l=300;
9. }

 

                    

             *     2、如果用户连续点击开始按钮的话速度就会越来越快

             *         原因：用户不断去点击按钮话会重复开启多个定时器，造成速度累加

             *         解决：在点击的时候先把上一个定时器给它清除了

1. begin.onclick=function(){
2. clearInterval(t); //清除一个不存在的定时器是不会有问题的
3. t=setInterval(function(){
4. var l=parseInt(getComputedStyle(box).left);
5. l+=7;
6. //当box走到300的时候，就让它停下来
7. //console.log(l);
8. if(l>=500){
9. clearInterval(t);
10. l=500;
11. }

                      3、多物体利用一个定时器运动，

                        问题：如何把一个定时器精准分配给不同的物体

                        解决：利用函数的参数，自定义属性，把定时器的编码赋值

1. var btn=document.getElementById("btn");
2. var box1=document.getElementById("box1");
3. var box2=document.getElementById("box2");
5. function move(obj,attr,target){
6. clearInterval(obj.t); //一上来只清除自己身上的定时器，不会清除别人的定时器
7. obj.t=setInterval(function(){ 相当于var obj.t= 把定时器编号赋值给不同的obj
8. var value=parseInt(getComputedStyle(obj)[attr]); //获取到属性的值
9. value+=7; //让属性不断的加个7
10. //如果属性的值已经超过目标了，要清除定时器，同是为了避免越界，要把它拉回来
11. if(value>=target){
12. clearInterval(obj.t);
13. value=target;
14. }
15. //修改元素的属性值
16. obj.style[attr]=value+'px';
17. },16);
18. }
19. btn.onclick=function(){
20. move(box1,'left',300);
21. move(box2,'left',400);
22. }
23. };

                        4.当运动没有结束之前都不能点击

1. <style>
2. input{
3. font:24px/30px"微软雅黑";
4. position:relative;
5. transition:2s ease-in-out;
6. }
7. input.action{
8. transform:translateY(300px);
9. }
10. </style>
11. <script>
12. window.onload=function(){
13. var btn=document.querySelectorAll("input");
14. var canclick=true;//自定义一个属性
15. for(var i=0;i<btn.length;i++){
17. btn[i].onclick=function(){
18. if(canclick==false){
19. return;//判断运动走完没有，如果没有就return函数
20. }
21. canclick=false;
22. this.className='action';
23. this.addEventListener('transitionend',function(){
24. canclick=true;//当最后一个元素走完之后，修改自定义属性（DOM元素对象，DOM事件对象）
25. })
26. }
27. }
28. }
29. </script>
30. </head>
31. <body>
32. <div>
33. <inputtype="button"value='点击一'/>
34. <inputtype="button"value='点击二'/>
35. <inputtype="button"value='点击三'/>
36. <inputtype="button"value='点击四'/>
37. </div>
38. </body>

 

                          

10.运用move.js库作运动的语法           

   1.<script src="js/move.js"></script>   路径代码不能在这里面编辑

   2.语法

       move(obj, attrs, duration, fx, callback)  

           obj:对象 

           attrs:需要改变的key和值

           duration:时间 （毫秒）

           fx: 运动模式  

           callback:回调函数（可写可不写）

      例：

     move(box,{left:300},1000,'linear',function(){

           move(box,{top:300},1000,'linear');

     });

                 

11.日期对象

             * 日期对象

             *     js中的一个内置方法，用于处理日期与时间相关的操作

             * 

             * 创建日期对象

             *     new Date()

             *         创建一个跟日期有关系的对象

             * 

             *     new Date()里可以接收参数

             *         1、没有参数

             *             它是以本机的时间做为参考，创建一个日期对象

             *         2、new Date(年,月,日,时,分,秒)

             *             参数是数字，每个参数用逗号隔开

             *             注意：参数是可以省略，省略的部分默认为0，队了日期（默认为1）

             *                因为星期的第一天是从周日开始，代表的数字为0

                              月份的第一月也是代表的数字也是从0开始

             *         3、new Date('June 10,2013 12:12:12')

             *             参数是字符串，外国人常用的日期表示方式

             *         4、new Date(时间戳)

             *             参数为是时间戳

             *             时间戳：从1970年1月1日0时0分0秒到指定一个时间点之间的毫秒数

             *                     new Date().getTime()

             * 

             *     注意：你拿到的date对象只是本机的时间，修改的是date对象的日期，而不是本机的日期

             *             本机的日期只能获取不能修改

12.获取日期对象的一些方法

             *     日期对象.getFullYear()            获取年

             *     日期对象.getMonth()                获取月，月份是从0开始的

             *     日期对象.getDate()                获取日

             *     日期对象.getDay()                获取星期，从0开始，0代表周日

             *     日期对象.getHours()                获取小时

             *     日期对象.getMinutes()            获取分钟

             *     日期对象.getSeconds()            获取秒钟

             *     日期对象.getMilliseconds()        获取毫秒

             *     日期对象.getTime()                获取1970-01-01 00:00:00到目前日期对象的时间差（单位:毫秒）

             *     1s=1000ms

13.设置日期的方法

             *     日期对象.setFullYear()            设置年

             *     日期对象.setMonth()                设置月(月份从0开始计算) 0代表1月

             *     日期对象.setDate()                     设置日

             *     日期对象.setHours()               设置小时

             *     日期对象.setMinutes()                  设置分钟

             *     日期对象.setSeconds()                  设置秒钟

             *     日期对象.setMilliseconds()              设置毫秒

             *     日期对象.setTime()                设置时间戳

             * 

             *     注意：设置日期里面没有设置星期（Day），因为设置了年月日以后就知道了那天是星期几

 

                1.想要知道这个月份一共有多少天？

                       把月份设置到下个月，然后把日期写成0，因为没有0号，所以Date对象会自动把日期回滚到上个月最后一天

1. d1.setDate(0);
2. console.log(d1.getDate());

                2.想知道这个月第一天是星期几？

1. d1.setDate(1);
2. console.log(d1.getDay());

                3.今天是今年的第几周？

1. //用现在的日期减7，一直减。直到把今年减到去年，
2. //还有一个需要判断的是今天是星期几，如果今天的星期大于今年第一天的星期，那么数据才正确，如果小于第一天的星期，那么会少一周还要把这一周加回来
3. var d=new Date();
4. var d2=new Date(2017,0,1).getDay();
5. console.log(d2);
6. var n=0;
7. while(d.getFullYear()==2017){
8. n++;
9. d.setDate(d.getDate()-7);
10. }
11. if(d.getDay()<d2){
12. n++;
13. }
14. console.log(n);
15. </script>

                   4.历史上今天是星期几？

                   5.倒计时器？

                   

null