第一题
已知父对象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>
|