前端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>

打开浏览器如下弹框：
前端JavaScript-面向对象

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

<!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-面向对象

相关文章