前端JavaScript-面向对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            /*函数不能重名定义 会覆盖*/
            /*this 相当于self*/                
            //在 JavaScript中函数是一等公民.
            //创造对象的构造器方法*/
            function Student(name,age) {
                this.name = name;
                this.age = age;
            }
                Student.prototype.study =function(courseName) { /*将学生绑定在学习行为上*/
                    window.alert(this.name +'正在学习' +courseName + '.');
                };
                Student.prototype.watchAv = function() {    /*将学生绑定在看电视行为上*/
                    if (this.age >= 18) {
                        window.alert(this.name + '正在观看到过电影.');
                    }else {
                        window.alert(this.name + '只能观看《熊出没》');
                    }
                };

            var stu1 = new Student('孙潇',28); /*这里的new一定要写*/
            var stu2 = new Student('王大锤',17);
            stu1.study('python')
            stu2.watchAv();
        </script>
    </body>
</html>

打开浏览器如下弹框：
这里写图片描述

这是一个生活中上网经常遇到的，等待倒计时后去到相应网站跳转：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p><span id = 'counter'>5</span>秒钟后自动跳转到百度...</p>
        <script>
            var seconds=5;
            window.setTimeout ( function ()  {
                seconds -= 1;
                if (seconds == 0){
                    location.href='http://www.baidu.com';
                }else {
                    document.getElementById('counter').textContent = seconds;
                    window.setTimeout(arguments.callee,1000);
                }
            },1000);


        </script>
    </body>
</html>

// 下面是要给弹框的效果，但是已经被淘汰了，太多浏览器会屏蔽这个东东了：
//          
//          window.open('http://www.baidu.com','此处是广告')
//          /*以前的广告 但是现在很多浏览器都会屏蔽弹框的功能*/
//          /*弹框是比较差的用户体验，尽量不要弹*/
//          var name = window.prompt('请输入你的名字');
//      
//          if (!!name && name != 'null') {
//              window.alert('你好，' + name +'!');
//          }else {
//              window.alert('大家好！');
//          }
//          if (window.confirm('确定要退出吗？')){
//              window.close(); /*有些浏览器不支持这个close*/
//          }
//      }

然后会做一个完整简单的网页。先到这里吧，好多东西还得研究研究

前端JavaScript-面向对象

猜你喜欢