使用jQuery高效制作网页特效第四章习题

最新推荐文章于 2021-10-03 21:18:07 发布

原创最新推荐文章于 2021-10-03 21:18:07 发布 · 1k 阅读

CC 4.0 BY-SA版权

本文通过JavaScript创建对象来展示个人信息及动物信息，并利用DOM操作实现动态展示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建对象显示自我介绍</title>
</head>
<body>
<script>
     var Student={
         name:"高乐乐",
         age:15,
         intro:"我叫高乐乐,我是一个初中三年级的学生,我非常喜欢音乐和打篮球",
         showInfo:function () {
             return "姓名:"+this.name+"<br/>"+
                 "年龄:"+this.age+"<br/>"+
                 "自我介绍:"+this.intro;
         }
     }
             document.write(Student.showInfo())
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建对象显示自我介绍</title>
    <style>
        div{
            line-height: 30px;
        }
    </style>
</head>
<body>
<div id="div">
</div>
<script>
       function Student(name,age,intro){
            this.name=name;
            this.age=age;
            this.intro=intro;
          this.show=function (){
           var p=document.createElement("p");
           var info= "姓名:"+this.name+"<br/>"+
                "年龄:"+this.age+"<br/>"+
                "自我介绍:"+this.intro;
           document.getElementById("div").appendChild(p).innerHTML=info;
          }
       }
       var student1=new Student("王小明",16,"我是高中一年级的学生,身高1.8米,很帅,我喜欢学习语文和英语。");
       student1.show();
       var student2=new Student("黄妞妞",6,"我今年6岁了,非常可爱,马上就可以上小学了,我可能有好多好多的小朋友了。");
       student2.show();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="div">
</div>
<script>
        function Animal(color,kind,old){
             this.color=color;
             this.kind=kind;
             this.old=old;
        }
          function Poultry(color,kind,old,legnum) {
              this.legnum=legnum;
              Animal.call(this,color,kind,old)
              this.info=function () {
                  var p=document.createElement("p");
                  var msg="我是一个"+this.color+"的"+this.kind+","
                      +"我已经"+this.old+"岁了，"+"我有"+this.legnum+"条腿"
                  document.getElementById("div").appendChild(p).innerHTML=msg;
              }
          }
          Poultry.prototype=new Animal();
          var Poultry1=new Poultry("灰色","小狗狗",1,4);
        Poultry1.info();
        var Poultry2=new Poultry("白色","茶杯猫",2,4);
        Poultry2.info();
        var Poultry3=new Poultry("红色","母鸡",1,2);
        Poultry3.info();
</script>
</body>
</html>