IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> js练习4 --- 对象继承、setTimeout、setInterval -> 正文阅读

[JavaScript知识库]js练习4 --- 对象继承、setTimeout、setInterval

第一题

已知父对象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>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-08 07:59:01  更:2022-05-08 08:00:15 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 22:14:18-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码