JavaScript允许你模仿其他语言的编程模式和惯用法。它也形成了自己的一些变成模式和惯用法。那些较为传统的服务器语言具有的面向对象的特性，JavaScript都有。
下面列举几种简单的JavaScript面向对象的例子来实现一个简单的计时器。
所有例子共用此Html ，各个例子main.js
<!DOCTYPE html>
<html>
<head>
<title>Demo-01</title>
<script src="./main.js"></script>
</head>
<body>
<button onclick="Test1()">开始计时</button>
<div class="time">
<span id="t_d">00天</span>
<span id="t_h">00时</span>
<span id="t_m">00分</span>
<span id="t_s">00秒</span>
</div>
<button onclick="Test2()">结束计时</button>
</body>
</html>
1.方法一
function GetRTime() {
var EndTime = new Date(‘2017/01/20 00:00:00‘);
var NowTime = new Date();
var t = Math.abs(EndTime.getTime() - NowTime.getTime());
var d = 0;
var h = 0;
var m = 0;
var s = 0;
if (t >= 0) {
d = Math.floor(t / 1000 / 60 / 60 / 24);
h = Math.floor(t / 1000 / 60 / 60 % 24);
m = Math.floor(t / 1000 / 60 % 60);
s = Math.floor(t / 1000 % 60);
}
document.getElementById("t_d").innerHTML = d + "天";
document.getElementById("t_h").innerHTML = h + "时";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}
//setInterval(GetRTime, 0);
var main = function() {
}
var timer1;
main.prototype.start = function() {
timer1 = setInterval(GetRTime, 0);
}
main.prototype.stop = function() {
window.clearInterval(timer1)
}
var Test1 = function() {
var b = new main();
b.start();
}
var Test2 = function() {
var b = new main();
b.stop();
}
2.方法二
function GetRTime() {
var EndTime = new Date(‘2017/01/20 00:00:00‘);
var NowTime = new Date();
var t = Math.abs(EndTime.getTime() - NowTime.getTime());
var d = 0;
var h = 0;
var m = 0;
var s = 0;
if (t >= 0) {
d = Math.floor(t / 1000 / 60 / 60 / 24);
h = Math.floor(t / 1000 / 60 / 60 % 24);
m = Math.floor(t / 1000 / 60 % 60);
s = Math.floor(t / 1000 % 60);
}
document.getElementById("t_d").innerHTML = d + "天";
document.getElementById("t_h").innerHTML = h + "时";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}
//setInterval(GetRTime, 0);
var main = function() {
}
var timer1;
main.prototype = {
start: function() {
timer1 = setInterval(GetRTime, 0);
},
stop: function() {
window.clearInterval(timer1);
}
};
var Test1 = function() {
var b = new main();
b.start();
}
var Test2 = function() {
var b = new main();
b.stop();
}
3.方法三
function GetRTime() {
var EndTime = new Date(‘2017/01/20 00:00:00‘);
var NowTime = new Date();
var t = Math.abs(EndTime.getTime() - NowTime.getTime());
var d = 0;
var h = 0;
var m = 0;
var s = 0;
if (t >= 0) {
d = Math.floor(t / 1000 / 60 / 60 / 24);
h = Math.floor(t / 1000 / 60 / 60 % 24);
m = Math.floor(t / 1000 / 60 % 60);
s = Math.floor(t / 1000 % 60);
}
document.getElementById("t_d").innerHTML = d + "天";
document.getElementById("t_h").innerHTML = h + "时";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}
//setInterval(GetRTime, 0);
Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
}
var main = function() {
}
var timer1;
main.method(‘start‘, function() {
timer1 = setInterval(GetRTime, 0);
});
main.method(‘stop‘, function() {
window.clearInterval(timer1);
});
var Test1 = function() {
var b = new main();
b.start();
}
var Test2 = function() {
var b = new main();
b.stop();
}
4.方法四
function GetRTime() {
var EndTime = new Date(‘2017/01/20 00:00:00‘);
var NowTime = new Date();
var t = Math.abs(EndTime.getTime() - NowTime.getTime());
var d = 0;
var h = 0;
var m = 0;
var s = 0;
if (t >= 0) {
d = Math.floor(t / 1000 / 60 / 60 / 24);
h = Math.floor(t / 1000 / 60 / 60 % 24);
m = Math.floor(t / 1000 / 60 % 60);
s = Math.floor(t / 1000 % 60);
}
document.getElementById("t_d").innerHTML = d + "天";
document.getElementById("t_h").innerHTML = h + "时";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}
//setInterval(GetRTime, 0);
Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
return this;
}
var main = function() {
}
var timer1;
main.method(‘start‘, function() {
timer1 = setInterval(GetRTime, 0);
}).method(‘stop‘, function() {
window.clearInterval(timer1);
});
var Test1 = function() {
var b = new main();
b.start();
}
var Test2 = function() {
var b = new main();
b.stop();
}
在JavaScript中，函数是一等对象。它们可以存储在变量中，可以作为参数传递给其他函数，可以作为返回值从其他函数传出，还可以在运行时进行构造，这些特性带来了极大的灵活性和极强的表达能力。
时间： 2024-10-29 11:35:13