zoukankan      html  css  js  c++  java
  • JS自定义对象以及相关成绩系统完整案例演示

    【自定义对象】
    1.基本概念
    ①对象是拥有一系列无无序属性和方法的集合
    ②键值对:对象中的数据,用以键值对的形式存在,对象的每个属性和方法,都对应一个键值,以键取值
    ③属性:描述对象特征的一系列变量称为属性【对象中的变量】
    ④方法:描述对象行为的一系列函数称为方法【对象中的函数】
    2.对象的声明:
    ①使用字面量声明:var obj = {
    key1:"value1",
    key2:"value2",
    func1:func(){}
    }
    对象的数据是以键值对形式存储,键与值之间用":"分隔,多个键值对之间用","分隔。
    对象中的键可以是出了数组对象以外的任何数据类型但是一般我们只用普通变量名为键。
    对象中的值可以是任何数据类型,包括数组和对象。
    ②使用new关键字声明
    var obj = new Object()
    obj.key1 = value1
    obj.key2 = value2
    obj.func = function(){}
    3.对象中属性和方法的读写
    ①.运算符:对象名.属性   对象名.方法();
    ②通过[“key]调用,对象名.["属性名"] 对象名.["方法名"]();
    如果键中包含其他字符,则只能用第②种方式。
    对象中直接写变量名默认为调用全局变量,如果需要调用对象自身的属性或者方法,需要使用对象名.属性。或者this.属性
    person.age this.age都可以,但推荐使用this关键字。
    ③删除对象属性的方法delete 对象名.属性名/方法名
     
    案例
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
       /*
        */
     var classes = {
      //先声明一个classes类
      className : "HTML5-1705",
      studentCount : 27,
      students : [
       {name:"张三",sex:"女",chinese:20,maths:30,english:80,sum:90},
       {name:"李四",sex:"女",chinese:80,maths:65,english:85,sum:75},
       {name:"王五",sex:"男",chinese:68,maths:48,english:75,sum:94}
      ],
      addStudent : function(){
       //添加学生信息的行为
       var name = prompt("请输入学员姓名:");
       var sex = prompt("请输入学员性别:");
       var chinese = parseFloat(prompt("请输入学员语文成绩:"));
       var maths = parseFloat(prompt("请输入学员数学成绩:"));
       var english = parseFloat(prompt("请输入学员英语成绩:"));
       var sum = chinese + maths + english;
       var student = {
        name : name,
        sex : sex,
        chinese : chinese,
        maths : maths,
        english : english,
        sum : sum
       }
       this.students.push(student);
       this.students.sort(function(a,b){
        return b.sum - a.sum;
       });
      },
      showStudent : function(){
       //显示学生信息的行为
       var arr = this.students;
       console.log(" HTML5-1705班成绩展示");
       console.log("序号 姓名 性别 语文 数学 英语 总分");
       arr.sort(function(a,b){
        return b.sum - a.sum;
       });
       arr.forEach(function(item,index){
        console.log((index+1)+" "+item.name+" "+item.sex+" "+item.chinese+" "+item.maths+" "+item.english+" "+item.sum);
       })
      },
      delStudent : function(){
       //删除学生信息的行为
       if(this.students.length<=0) {
        alert("没有学员数据,无法删除!");
        return;
       }
       var no = prompt("请输入要删除的学员序号:");
       if(no<1 || no> this.students.length){
        alert("序号输入有误!请确认学员序号重新输入!");
        return;
       }
       this.students.splice(no-1,1);
      },
      searchStudent : function(){
       //查询学生信息的行为
       var no = prompt("请输入要查询的学员序号:");
       var arr = this.students;
       if(no<1 || no > arr.length){
        alert("查无此人!请确认序号!");
       }else{
        console.log("查询完成!查询到学员信息如下:");
        console.log("序号 姓名 性别 语文 数学 英语 总分");
        console.log(no+" "+arr[no-1].name+" "+arr[no-1].sex+" "+arr[no-1].chinese+" "+arr[no-1].maths+" "+arr[no-1].english+" "+arr[no-1].sum);
       }
      },
      updateStudent : function(){
       //修改学生信息的行为
       if(this.students.length<=0) {
        alert("没有学员数据,无法修改!");
        return;
       }
       var no = prompt("请输入要修改的学员序号:");
       if(no<1 || no> this.students.length){
        alert("序号输入有误!请确认学员序号重新输入!");
        return;
       }
       if(!confirm("您确认修改学员是【"+this.students[no-1].name+"】吗?")){
        alert("操作已取消!");
        return;
       }
       var name = prompt("请输入学员姓名:");
       var sex = prompt("请输入学员性别:");
       var chinese = parseFloat(prompt("请输入学员语文成绩:"));
       var maths = parseFloat(prompt("请输入学员数学成绩:"));
       var english = parseFloat(prompt("请输入学员英语成绩:"));
       var sum = chinese + maths + english;
       var student = {
        name : name,
        sex : sex,
        chinese : chinese,
        maths : maths,
        english : english,
        sum : sum
       }
       this.students[no-1] = student;
      }
     }
     
     console.log(" 成绩管理系统");
     console.log("1、展示学员信息 2、学员信息录入 3、删除学员信息 4、查询学员信息 5、修改学员信息 6、退出系统");
     while (true){
      var num = parseInt(prompt("请输入操作序号"));
      var is = false;
      switch (num){
       case 1:
        classes.showStudent();
        break;
       case 2:
        classes.addStudent();
        console.log("信息录入成功!");
        classes.showStudent();
        break;
       case 3:
        classes.delStudent();
        console.log("信息删除成功!");
        classes.showStudent();
        break;
       case 4:
        classes.searchStudent();
        break;
       case 5:
        classes.updateStudent();
        console.log("信息修改成功!");
        classes.showStudent();
        break;
       case 6:
        console.log("系统退出成功!");
        is = true;
        break;
       default:
        alert("序号输入有误!");
        break;
      }
      if(is) break;
      
      console.log("是否继续?(输入N退出系统)");
      var isGo = prompt("请输入序号:N退出系统,其他字符继续");
      if(isGo == "N" || isGo == "n"){
       console.log("系统退出成功!");
       break;
      }
      
     } 
      </script>
     </head>
     <body>
     </body>
    </html>
  • 相关阅读:
    更改文件、图片名称思路,我们的名字在以后添加_2等待
    UIStepper使用的具体解释的控制
    ArcSDE10.1配置Oracle 监听器来使用SQL操作ST_Geometry(个人改动版)
    SDE ST_Geometry SQL st_intersects查询很慢的解决方法
    通过SQL直接插入、修改ArcGIS SDE空间表中的数据
    使用POI读写word docx文件
    Weblogic读不到Word文件
    POI写Word换行
    使用POI转换word doc文件
    POI生成Web版Word文件
  • 原文地址:https://www.cnblogs.com/zhanghaoxiaoan/p/7464384.html
Copyright © 2011-2022 走看看