js练习4 --- 对象继承setTimeoutsetInterval
Posted 劳埃德·福杰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js练习4 --- 对象继承setTimeoutsetInterval相关的知识，希望对你有一定的参考价值。
第一题
已知父对象Student,其属性有id,name,class,age,hobbies,方法showHobbies()和addHobbies()。
请使用原型链，借用构造函数，组合继承三种方式创建对象UnderGraduate,其继承父对象的属性和方法，并增加属性university,major和方法showInform()。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//一、原型链继承
// 父类Student
function Student()
Student.prototype =
construct : Student,
id : '',
name : '',
class : '',
age : '',
hobbies : [],
showHobbies: function()
console.log(this.hobbies);
,
addHobbies: function(newHobbies)
this.hobbies = [...this.hobbies,...newHobbies];
// 子类UnderGraduate
function UnderGraduate()
UnderGraduate.prototype =
construct : UnderGraduate,
university : "",
major : ""
UnderGraduate.prototype = new Student(); // 继承Student类
UnderGraduate.prototype.showInform = function()
console.log("姓名：" + this.name + "\\n学号:" + this.id + "\\n班级:" + this.class +
"\\n年龄:" + this.age + "\\n爱好:" + this.hobbies + "\\n大学:" + this.university + "\\n专业:" + this.major)
UnderGraduate.constructor = UnderGraduate;
let undergraduate = new UnderGraduate();
undergraduate.id = "190350203";
undergraduate.name = "张三";
undergraduate.class = "1908013";
undergraduate.age = 21;
undergraduate.hobbies = ["吃饭","睡觉"];
undergraduate.university = "北大";
undergraduate.major = "计科";
undergraduate.addHobbies(["编程","看电影"]);
undergraduate.showInform();
// 二、借用构造函数
// 父类Student2
function Student2(id,name,classNo,age,hobbies)
this.id = id;
this.name = name;
this.class = classNo;
this.age = age;
this.hobbies = hobbies;
this.showHobbies = function()
console.log(this.hobbies);
this.addHobbies = function(newHobbies)
this.hobbies = [...this.hobbies,...newHobbies];
// 子类UnderGraduate2
function UnderGraduate2(id,name,classNo,age,hobbies,university, major)
Student2.call(this,id,name,classNo,age,hobbies); // 调用父类构造函数,继承父类属性和方法
this.university = university;
this.major = major;
this.showInform = function()
console.log("姓名：" + this.name + "\\n学号:" + this.id + "\\n班级:" + this.class +
"\\n年龄:" + this.age + "\\n爱好:" + this.hobbies + "\\n大学:" + this.university + "\\n专业:" + this.major)
UnderGraduate2.prototype = new Student2(); // 继承Student2类
let undergraduate2 = new UnderGraduate2("190350202","李四","1908012",22,["打游戏","看动漫"],"清华","软工");
undergraduate2.addHobbies(["编程","看电影"]);
undergraduate2.showInform();
// 三、组合继承
// 父类Student3
function Student3(id,name,classNo,age,hobbies)
this.id = id;
this.name = name;
this.class = classNo;
this.age = age;
this.hobbies = hobbies;
Student3.prototype =
construct : Student3,
showHobbies: function()
console.log(this.hobbies);
,
addHobbies: function(newHobbies)
this.hobbies = [...this.hobbies,...newHobbies];
// 子类UnderGraduate3
function UnderGraduate3(id,name,classNo,age,hobbies,university, major)
Student3.call(this,id,name,classNo,age,hobbies); // 调用父类构造函数,继承父类属性
this.university = university;
this.major = major;
UnderGraduate3.prototype = new Student3(); // 继承Student3类
UnderGraduate3.constructor = UnderGraduate3;
UnderGraduate3.prototype.showInform = function()
console.log("姓名：" + this.name + "\\n学号:" + this.id + "\\n班级:" + this.class +
"\\n年龄:" + this.age + "\\n爱好:" + this.hobbies + "\\n大学:" + this.university + "\\n专业:" + this.major)
let undergraduate3 = new UnderGraduate3("190350201","王五","1908011",23,["听音乐","长跑"],"中科院","电信");
undergraduate3.addHobbies(["编程","看电影"]);
undergraduate3.showInform();
</script>
</body>
</html>第二题
使用超时调用来代替间歇调用；
·首先，每隔1秒钟，弹出当前时间，连续显示10次，然后取消；
·接着，用超时调用替换间歇调用，实现同样功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
let max = 10;
//间歇调用：每秒弹出当前时间，一共弹出10次
let num = 0;
let intervalId = null;
function showTime()
num++;
if(num == max)
clearInterval(intervalId); // 取消间歇调用
let cur = new Date();
let h = cur.getHours(); //获取小时
let m = cur.getMinutes()<10?'0'+cur.getMinutes():cur.getMinutes(); //获取分
let s = cur.getSeconds()<10?'0'+cur.getSeconds():cur.getSeconds(); //获取秒
alert(h+':'+m+':'+s);
intervalId = setInterval(showTime, 1000);
// 用超时调用代替间歇调用
num2 = 0
function showTime2()
num2++;
let cur = new Date();
let h = cur.getHours(); //获取小时
let m = cur.getMinutes()<10?'0'+cur.getMinutes():cur.getMinutes(); //获取分
let s = cur.getSeconds()<10?'0'+cur.getSeconds():cur.getSeconds(); //获取秒
alert(h+':'+m+':'+s);
if(num2 < max)
setTimeout(showTime2, 1000);
setTimeout(showTime2, 1000);
</script>
</body>
</html>第三题
实现短信倒计时的功能。(60秒输入验证码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<input type="button" id="btn" value="获取验证码" onclick="setTime(this)" />
<script>
let countdown=60;
function setTime(obj)
if (countdown == 0)
obj.removeAttribute("disabled");
obj.value="获取验证码";
countdown = 60;
return;
else
obj.setAttribute("disabled", true);
obj.value="重新发送(" + countdown + ")";
countdown--;
setTimeout(function()
setTime(obj);
,1000)
</script>
</body>
</html>以上是关于js练习4 --- 对象继承setTimeoutsetInterval的主要内容，如果未能解决你的问题，请参考以下文章
web前端练习23----js中延时执行函数setInterval()和setTimeout() 案例：倒计时，大小动画平移动画，轮播图
在js对象的方法里有setTimeout函数，在setTimeout里怎么调用该对象方法，用this没有用