countdown-plugin
Version:
153 lines (117 loc) • 2.95 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>countdown demo</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
color: #333;
font-size: 14px;
}
.title {
padding-left: 10px;
}
.content-box {
margin: 10px;
}
</style>
</head>
<body>
<h3 class="title">默认（距离：2030/01/01）</h3>
<div class="content-box">
<div id="box1"></div>
<button id="btn1">暂停1</button>
</div>
<hr>
<h3 class="title">自定义：格式化 + 毫秒（距离：2019/01/01）</h3>
<div class="content-box">
<div id="box2"></div>
<button id="btn2">暂停2</button>
</div>
<hr>
<h3 class="title">自定义：时间戳 - 10秒倒计时</h3>
<div class="content-box">
<div id="box3"></div>
<button id="btn3">开始10秒倒计时</button>
</div>
<script>
// 默认（距离：2030/01/01）
var c1 = new Countdown({
change: function(res, elapsed) {
var str = '', num = 0, type = '年天时分秒';
for (var i in res) {
str += res[i] + ' ' + type.charAt(num++) + ' ';
}
document.getElementById('box1').innerHTML = str;
console.log(res, elapsed)
}
});
c1.start();
document.getElementById('btn1').onclick = function() {
if (c1.starting) {
c1.stop();
this.innerHTML = '继续1';
} else {
c1.start();
this.innerHTML = '暂停1';
}
};
// 自定义：格式化 + 毫秒（距离：2020/01/01）
var c2 = new Countdown({
end: '2020/01/01',
isFormat: true,
isMilliSecond: true,
change: function(res) {
var str = '', num = 0, type = '年天时分秒';
for (var i in res) {
str += res[i] + ' ' + type.charAt(num++) + ' ';
}
document.getElementById('box2').innerHTML = str;
}
});
c2.start();
document.getElementById('btn2').onclick = function() {
if (c2.starting) {
c2.stop();
this.innerHTML = '继续2';
} else {
c2.start();
this.innerHTML = '暂停2';
}
};
// 自定义：时间戳 - 10秒倒计时
var c3 = new Countdown({
isMilliSecond: true,
timestamp: 10,
change: function(res) {
var str = '', num = 0, type = '年天时分秒';
for (var i in res) {
str += res[i] + ' ' + type.charAt(num++) + ' ';
}
document.getElementById('box3').innerHTML = str;
},
over: function() {
document.getElementById('btn3').setAttribute('disabled', 'disabled');
}
});
document.getElementById('btn3').onclick = function() {
if (this.innerHTML === '开始10秒倒计时') {
c3.start();
this.innerHTML = '暂停3';
} else {
if (c3.starting) {
c3.stop();
this.innerHTML = '继续3';
} else {
c3.start();
this.innerHTML = '暂停3';
}
}
};
</script>
</body>
</html>