专栏首页web前端JavaScript基础学习--10 return、定时器基础

JavaScript基础学习--10 return、定时器基础

Demos:   https://github.com/jiangheyan/JavaScriptBase

一、return

     1、返回值:数字、字符串、布尔、函数、对象({}、[]、元素、null)、未定义

     2、return值==fn();

function fn(a){
     return function (b){
              alert(a+b);      
          }
}
alert(fn())     //function (b){ alert(a+b);}
alert(fn(10)(20))     //30 

     3、所有函数默认返回值:undefined

     4、return后面所有代码不执行

二、arguments

     1、实参的集合

fn(1,2,3);
functon fn(){
     alert(arguments);     //[object arguments]          
     alert(arguments.length);
     alert(arguments[0]);
}

     2、当函数的参数个数无法确定时,用arguments

     3、arguments可读可写,arguments[0] = 123;

三、getComputedStyle、currentStyle     (只能获取,不能修改样式!!!

     1、获取计算机(浏览器)计算后的样式

          1.1     兼具复合样式(eg. background),所以最好不要用复合样式名词获取(可以获取单一样式),可以写成  id.getComputedStyle('backgroundColor');     // red |  rgb(xxx,xxx,xxx);     --->不要用此作为判断条件

          1.2     不要获取未设置的样式:因为不兼容(这是浏览器计算的值,每个浏览器计算方式都不一样)

          1.3     不要有空格

     2、window.getComputedStyle(id,canshu).width;     //IE6、7、8不兼容,标准浏览器兼容     //canshu是FF4.0以下中的bug(任何参数都行)

     3、id.currentStyle.width                        //标准浏览器不兼容,IE6、7、8兼容

     4、检测兼容性:

          4.1     版本检测法

          4.2     属性判断法

//getComputedStyle、currentStyle     并解决获取样式兼容性问题
 
if(id.currentStyle){     //属性判断法:判断是否认得该属性
     id.currentStyle.width;     
}else{
     id.getComputedStyle(id.width);
}

     5、获取行间样式(style属性只能获取行内样式)封装方法:(注意:不能用点操作法,只能用 [ ] 因为  js中允许所有(.)替换成(【】),且(.)后面的值无法修改(必须是非变量), )

function getStyle(obj, attr){
     return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];     //null是兼容FF4.0以下中的bug
}
 
var width = parseFloat(getStyle(oItem, 'width'));     //获取到的是带PX单位的值,所以需要用parseFloat---->最后设置dom.style.width = width + 'px';     //注意单位的回加

注:dom.style.attr 只能获取行内样式,嵌入样式和外联样式不能用style属性获取!此时用getComputedStyle || currentStyle 

四、setInterval 定时器     重复执行

     1、setInterval( function, time);     //时间以毫秒为单位,最好大于14毫秒,太小没有意义,浏览器也没有这个快响应

     2、clearInterval(timer);     //timer是定时器名称

//清除定时器法一:
var timer = setInterval(function, time);
clearInterval(timer);
 
//清除定时器法二:
var timer = setInterval(function(){
     ......
     clearInterval(timer);
}, time);

     3、定时器如果是由事件调用(用户操作),那么原则:先关后开,预防用户多次快速点击造成定时器叠加产生的bug

var arrUrl = ['images/1.jpg', 'images/1.jpg', 'images/1.jpg'];
var num = 0;
var timer = null;
id.onclick = function(){
     clearInterval(timer);
     timer = setInterval(function(){
          id.style.backgroung = 'url('+arrUrl(num)+')';
          num++;
          num %= arrUrl.length;
     }, 1000);
}

     4、函数调用方式

          4.1     直接调用 fn();

          4.2     事件调用 id.onclick = fn;                    (不能加括号,加括号是自己主动就执行了)

          4.3     定时器调用 setInterval(fn, 1000);      (不能加括号,加括号是自己主动就执行了)

五、setTimeout     执行一次

     1、setTimeout(function, time);

     2、clearTimeout(timer);     //timer 是定时器名称

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML+CSS基础

    第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

    用户1148399
  • JavaScript基础学习--12 日期对象、时钟倒计时

    Demos:   https://github.com/jiangheyan/JavaScriptBase 一、时间 var date = new Date...

    用户1148399
  • JavaScript基础学习--01热身

    一、js大致思路: 1、完成静态HTML+CSS 2、过一遍整体的大致js思路 3、按照从上到下的,从有至无的顺序完成js编写(包括先写大致轮廓,再细化细节部分...

    用户1148399
  • 笔记 | 大型网站的特点与设计宗旨

    假设服务器宕机了,用户就无法访问 我们就必须保证网站稳定的向用户提供7*24小时不间断的服务 哪怕有服务器节点宕机了,依然用备用集确保服务正常访问

    阿凯
  • ES6 系列之我们来聊聊 Promise

    Promise 的基本使用可以看阮一峰老师的 《ECMAScript 6 入门》。

    夜尽天明
  • Promise 源码分析

    then/promise项目是基于Promises/A+标准实现的Promise库,从这个项目当中,我们来看Promise的原理是什么,它是如何做到的,从而更加...

    用户2356368
  • Servlet的那些事

    用户2032165
  • 通过手机远程开/关机

    作为开发人员中的一员,我想我们都有这样的一个想法,就是让我们写的代码去实现我们生活中的一些日常事务,如远程开/关机。

    Hongten
  • SpringBoot系列教程web篇之过滤器Filter使用指南扩展篇

    前面一篇博文介绍了在 SpringBoot 中使用 Filter 的两种使用方式,这里介绍另外一种直接将 Filter 当做 Spring 的 Bean 来使用...

    小灰灰
  • 腾讯云服务器购买规格与配置选择(图文教程)

    国内的云服务器上知名的就那么几家,腾讯云是排名前列的云服务器提供商。而且腾讯云是国内互联网龙头企业,信得过,它们的产品是值得信任的。好了,废话不多说,我现在教下...

    用户2416682

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动