- <html>
- <head>
- <title>顶层元素</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <script src="prototype.js">
- </script>
- <script>
- var Person = Class.create();
- Person.prototype = {
- initialize: function(){
- },
- name: '',
- birthday: '',
- age: '',
- Show: function(){
- alert("This is " + this.name);
- }
- };
- function TestPerson(){
- var p = new Person();
- p.name = "Tom";
- p.age = 4;
- p.birthday = "1983-6-1";
- p.Show();
- };
- var User = Class.create();
- User.prototype = {
- initialize: function(){
- },
- userid: '',
- Report: function(){
- alert("UserID:" + this.userid + " Name:" + this.name + " Age:" + this.age + " Birthday:" + this.birthday);
- }
- };
- Object.extend(User.prototype, Person.prototype);
- function TestUser(){
- var user = new User();
- user.name = "Jim";
- user.age = 4;
- user.userid = 2396
- user.birthday = "1983-9-1";
- user.Show();
- user.Report();
- }
- function ShowPrototypeInfo(){
- alert(Prototype.Version + " " + Prototype.ScriptFragment);
- }
- function TestInspect(){
- var s = "51cto";
- alert(Object.inspect(s));
- }
- //-------------------------------------------------------
- function testFunctionBind(){
- var person = new Person();
- person.name = "Charli";
- person.age = 4;
- person.birthday = "1983-10-1";
- var user = new User();
- user.name = "Tom";
- user.age = 5;
- user.userid = 2396
- user.birthday = "1988-12-25";
- var handler = user.Report.bind(person);
- handler();
- }
- var Listener = new Class.create();
- Listener.prototype = {
- initialize: function(btn, message){
- $(btn).onclick = this.showMessage.bindAsEventListener(message);
- },
- showMessage: function(message){
- alert(message);
- }
- };
- var listener = new Listener("testEventListener", "点击！");
- </script>
- <body>
- <input type=button value="ShowPrototypeInfo" onclick='return ShowPrototypeInfo();'/>显示Prototype的基本信息
- <br>
- <hr><input type=button value="TestPerson" onclick='return TestPerson();'/>利用我们创建的Person类生成一个p对象 检测一下是否成功
- <br>
- <input type=button value="TestUser" onclick='return TestUser();'/>User类继承Person类，生成一个User对象 检测一下是否成功
- <br>
- <input type=button value="TestInspect" onclick='return TestInspect();'/>测试一下Object的Inspect方法
- <br>
- <input type=button value="testFunctionBind" onclick='return testFunctionBind();'/>测试一下Object的FunctionBind方法
- <br>
- <input type=button value="testEventListener" id="testEventListener" />testEventListener
- <br>
- <script>
- var Listener = new Class.create();
- Listener.prototype = {
- initialize: function(btn, message){
- this.message = message;
- $(btn).onclick = this.showMessage.bindAsEventListener(this);
- },
- showMessage: function(){
- alert(this.message);
- }
- };
- var listener = new Listener("testEventListener", "点击！");
- </script>
- <hr>
- <script>
- function TimeExe(){
- var timerExe = new PeriodicalExecuter(showTime, 1);
- }
- function showTime(){
- var time = new Date();
- var d = $('myDiv');
- d.innerHTML = time;
- }
- </script>
- <div id="myDiv">
- <p>
- This is a paragraph
- </p>
- <input type="button" value=定时器测试 onclick="TimeExe();">
- <br>
- </div>
- <hr>
- <script>
- function TestNumber(){
- var n = 50;
- var b = 3;
- alert(n.toColorPart());
- alert(n.succ());
- alert(b.toPaddedString());
- //b.times(alert());
- }
- </script>
- <input type="button" value='Number测试' onclick="return TestNumber();"/>
- <br>
- </body>
- </html>
本文转自sucre03 51CTO博客，原文链接：http://blog.51cto.com/sucre/413328，如需转载请自行联系原作者
