• 定时器、运动、日历

    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.倒计时器？
                       
  • 相关阅读:
    MySQL如何利用索引优化ORDER BY排序语句 【转载】
    c++拼接字符串效率比较（+=、append、stringstream、sprintf）
    Mysql 的字符编码机制、中文乱码问题及解决方案【转载】
    Java连接MySQL中文乱码处理【转载】
    Java 接口
    Java 抽象类和Final关键字
    Java 对象转型
    Java 动态绑定和多态
    Java 继承和访问控制
    Java Class Object
  • 原文地址：https://www.cnblogs.com/CafeMing/p/6412251.html
Copyright © 2020-2023  润新知