定时器、运动、日历

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.函数在外部。
    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.外部调用函数
    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.倒计时器？
                   





【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/CafeMing/p/6412251.html