先决条件:
- 文档对象模型 (DOM)
- ES6中类的使用
如果您是 JavaScript 的初学者并且具有基本的编程知识,那么请不要担心,您已经到达了一个完美的地方。
让我们将问题分成多个部分:
- 使用HTML实现一个简单的结构。
- 使用CSS提供基本的显示样式。
- 主要实现编程,行为使用JavaScript
- onclick=”….( )” :触发函数
- 创建一个名为Counter的类
- 使用构造函数初始化类
- 为动画创建名为shot( )的方法/函数
- 从调用类的计数器的方法拍摄
第 1 步:实现 HTML
HTML
_______
CSS
.container {
display: flex;
padding:20px;
}
.main{
padding:20px;
}
button{
width:100px;
height:45px;
background-color:#33ff33;
border-radius:10px;
}
Javascript
// Creating the Class: Object Prototype
class Counter {
// Countructor: Initializing the Class
constructor(data) {
this.start = data["start"];
this.end = data["end"];
this.frames = data["frames"];
this.step = data["step"];
this.target = data["target"];
}
// Method for Animation
shoot() {
// Variables
var count = 0;
var stepArray = [];
// Putting the starting Value
document.getElementById(this.target)
.innerHTML = this.start;
// Storing the step value in Array
while (this.end > this.start) {
this.start += this.step;
stepArray[count++] = this.start;
}
// Doing Countup Animation
var functional_target = this.target;
for (let i = 0; i < count; i++) {
setTimeout(function () {
document.getElementById(functional_target)
.innerHTML = stepArray[i];
}, (i + 1) * this.frames);
}
// Placing the final value
setTimeout(function () {
document.getElementById(
functional_target).innerHTML = this.end;
}, count * frames);
}
}
// Creating object from class
var animate = new Counter({
start: 100000,
end: 2000000,
frames: 1,
step: 1000,
target: "counter"
});
// Triggering the Class Method
function trigger() {
// Calling the shoot() method of the class
animate.shoot();
}
第 2 步:实现 CSS
CSS
.container {
display: flex;
padding:20px;
}
.main{
padding:20px;
}
button{
width:100px;
height:45px;
background-color:#33ff33;
border-radius:10px;
}
第 3 步:JavaScript
Javascript
// Creating the Class: Object Prototype
class Counter {
// Countructor: Initializing the Class
constructor(data) {
this.start = data["start"];
this.end = data["end"];
this.frames = data["frames"];
this.step = data["step"];
this.target = data["target"];
}
// Method for Animation
shoot() {
// Variables
var count = 0;
var stepArray = [];
// Putting the starting Value
document.getElementById(this.target)
.innerHTML = this.start;
// Storing the step value in Array
while (this.end > this.start) {
this.start += this.step;
stepArray[count++] = this.start;
}
// Doing Countup Animation
var functional_target = this.target;
for (let i = 0; i < count; i++) {
setTimeout(function () {
document.getElementById(functional_target)
.innerHTML = stepArray[i];
}, (i + 1) * this.frames);
}
// Placing the final value
setTimeout(function () {
document.getElementById(
functional_target).innerHTML = this.end;
}, count * frames);
}
}
// Creating object from class
var animate = new Counter({
start: 100000,
end: 2000000,
frames: 1,
step: 1000,
target: "counter"
});
// Triggering the Class Method
function trigger() {
// Calling the shoot() method of the class
animate.shoot();
}
输出:
主要使用的功能:
- document.getElementById(目标 ID ).innerHTML
- setTimeout( 函数() { 函数 Here } , timedelay )
概述
这是我们可以使用 JavaScript 中 Class 的概念实现的自定义 countUp.js 的基本原型。
还可以使用自己的函数以特定方式呈现值。