js练习4 --- 对象继承、setTimeout、setInterval_对象与继承编程js代码练习-优快云博客

本文链接：https://blog.youkuaiyun.com/YINZHE__/article/details/124617088

第一题

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