Blogger Information
Blog 38
fans 1
comment 0
visits 28736
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
12月18日_JavaScript基础(对象的创建与使用以及匿名函数和定时器)
fkkf467
Original
569 people have browsed it

一、JavaScript对象

对象的创建与使用

定义并创建对象的实例

  1. var obj = new Object();
  2. obj.name = '猪小明';
  3. obj.age = 18;
  4. obj.weight = 55;
  5. obj.person = function(){
  6. console.log(this.name+',今年'+this.age+'岁,体重'+this.weight+'kg');
  7. };
  8. console.log(obj);
  9. obj.person();


定义并创建对象时直接添加上属性

  1. var obj = {
  2. name:"猪小明",
  3. age:18,
  4. person:function () {
  5. console.log("姓名:"+obj.name+",年龄:"+obj.age);
  6. }
  7. };
  8. console.log(obj);
  9. console.log(obj.name);
  10. obj.person();


注意:无论是以上哪种创建对象的方式,都可以在外部动态的添加对象的属性
例如:

  1. var obj = {name:'猪小明',age:18};
  2. obj.sex = '男';
  3. obj.getInfo = function () {
  4. console.log(obj.name+', '+obj.age+', '+obj.sex);
  5. };
  6. console.log(obj);
  7. console.log(obj.sex);
  8. obj.getInfo();


对象中的方法传参

  1. var obj = {
  2. name:'张三',
  3. age:21,
  4. getInfo:function (status) {
  5. console.log(this.name+'是'+status);
  6. }
  7. };
  8. obj.getInfo('学生');

二、匿名函数

  1. var func = function () {
  2. alert("我是匿名函数");
  3. };
  4. func();

三、定时器

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

语法:

  • setTimeout(code, milliseconds, param1, param2, ...)
  • setTimeout(function, milliseconds, param1, param2, ...)
参数 描述
code/function 必需。要调用一个代码串,也可以是一个函数。
milliseconds 可选。执行或调用 code/function 需要等待的时间,以毫秒计。默认为 0。
param1, param2, … 可选。 传给执行函数的其他参数(IE9 及其更早版本不支持该参数)。
  1. setTimeout("console.log('123')", 3000);

  1. setTimeout(function () {
  2. console.log("哈哈哈");
  3. }, 2000);

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式

语法

  • setInterval(code, milliseconds);
  • setInterval(function, milliseconds, param1, param2, ...)
参数 描述
code/function 必需。要调用一个代码串,也可以是一个函数。
milliseconds 必须。周期性执行或调用 code/function 之间的时间间隔,以毫秒计。
param1, param2, … 可选。 传给执行函数的其他参数(IE9 及其更早版本不支持该参数)。

返回值: 返回一个 ID(数字),可以将这个ID传递给clearInterval(),clearTimeout() 以取消执行。

  1. setInterval('console.log("你好")',3000);

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作

语法

  • clearInterval(id_of_setinterval)
参数 描述
id_of_setinterval 调用 setInterval() 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setInterval() 所设定的定时执行操作。
  1. var i = 1;
  2. var t = setInterval(function () {
  3. if (i == 10){
  4. clearInterval(t);
  5. }
  6. console.log(i);
  7. i++;
  8. },1000);

  1. <button id="btn" onclick="test()">发送验证码</button>
  2. <script type="text/javascript">
  3. function test() {
  4. var t = document.getElementById('btn').textContent;
  5. var second = 5;
  6. var time = setInterval(function () {
  7. document.getElementById('btn').textContent = second + '秒后重试';
  8. second--;
  9. if (second < 0) {
  10. document.getElementById('btn').textContent = t;
  11. clearTimeout(time);
  12. }
  13. }, 1000);
  14. }
  15. </script>

四、总结

学会了JS对象的创建与使用,掌握了setTimeout()、setInterval()、clearInterval()的基本使用。

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:定时器是window上的最重要的几个属性之一
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments