在现代网页开发中,动态效果的实现是一个必不可少的部分。GSAP(GreenSock Animation Platform)是一个非常流行的JavaScript动画库,可以轻松地实现各种动画效果,包括TweenMax,TimelineMax,Draggable等。在本文中,我们将使用GSAP.js实现一个简单的加减乘除计算器网页工具。
为了实现我们的计算器,我们需要创建一个HTML页面和一些基本的CSS样式。在本例中,我们将使用以下HTML和CSS代码:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
#calculator {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
border: 2px solid #ccc;
box-shadow: 0 0 10px #ccc;
border-radius: 5px;
}
.calculator__button {
width: 80px;
height: 80px;
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
color: #333;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.calculator__button:hover {
background-color: #ccc;
color: #fff;
border-color: #666;
}
.calculator__input {
width: 100%;
padding: 10px;
font-size: 24px;
font-weight: bold;
color: #333;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 5px;
text-align: right;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="input" class="calculator__input" readonly>
<button id="add" class="calculator__button">+</button>
<button id="subtract" class="calculator__button">-</button>
<button id="multiply" class="calculator__button">×</button>
<button id="divide" class="calculator__button">÷</button>
<button id="one" class="calculator__button">1</button>
<button id="two" class="calculator__button">2</button>
<button id="three" class="calculator__button">3</button>
<button id="four" class="calculator__button">4</button>
<button id="five" class="calculator__button">5</button>
<button id="six" class="calculator__button">6</button>
<button id="seven" class="calculator__button">7</button>
<button id="eight" class="calculator__button">8</button>
<button id="nine" class="calculator__button">9</button>
<button id="zero" class="calculator__button">0</button>
<button id="clear" class="calculator__button">C</button>
<button id="equals" class="calculator__button">=</button>
</div>
</body>
</html>
我们将使用GSAP.js实现计算器的动态效果。我们将创建一个JavaScript文件,并将其链接到我们的HTML页面中。在这个JavaScript文件中,我们将使用TweenMax和TimelineMax实现以下功能:
1、按钮点击效果
2、输入框数字更新效果
3、计算器清空效果
以下是完整的JavaScript代码:
const input = document.getElementById("input");
const add = document.getElementById("add");
const subtract = document.getElementById("subtract");
const multiply = document.getElementById("multiply");
const divide = document.getElementById("divide");
const one = document.getElementById("one");
const two = document.getElementById("two");
const three = document.getElementById("three");
const four = document.getElementById("four");
const five = document.getElementById("five");
const six = document.getElementById("six");
const seven = document.getElementById("seven");
const eight = document.getElementById("eight");
const nine = document.getElementById("nine");
const zero = document.getElementById("zero");
const clear = document.getElementById("clear");
const equals = document.getElementById("equals");
let num1 = "";
let num2 = "";
let operator = "";
let result = "";
// 创建Timeline
const tl = new TimelineMax();
// 按钮点击效果
function buttonClick(button) {
tl.to(button, 0.1, { scale: 0.9 }).to(button, 0.1, { scale: 1 });
}
// 输入框数字更新效果
function updateInput() {
tl.to(input, 0.2, { scale: 1.2 }).to(input, 0.2, { scale: 1 });
input.value = result;
}
// 计算器清空效果
function clearInput() {
tl.to(input, 0.5, { rotation: 360, opacity: 0 }).to(input, 0.5, { rotation: 0, opacity: 1 });
num1 = "";
num2 = "";
operator = "";
result = "";
input.value = "";
}
// 数字按钮点击事件
one.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
num1 += "1";
result = num1;
} else {
num2 += "1";
result = num2;
}
updateInput();
});
two.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
num1 += "2";
result = num1;
} else {
num2 += "2";
result = num2;
}
updateInput();
});
three.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
num1 += "3";
result = num1;
} else {
num2 += "3";
result = num2;
}
updateInput();
});
four.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
num1 += "4";
result = num1;
} else {
num2 += "4";
result = num2;
}
updateInput();
});
five.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
num1 += "5";
result = num1;
} else {
num2 += "5";
result = num2;
}
updateInput();
});
six.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
num1 += "6";
result = num1;
} else {
num2 += "6";
result = num2;
}
updateInput
});
seven.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
num1 += "7";
result = num1;
} else {
num2 += "7";
result = num2;
}
updateInput();
});
eight.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
num1 += "8";
result = num1;
} else {
num2 += "8";
result = num2;
}
updateInput();
});
nine.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
num1 += "9";
result = num1;
} else {
num2 += "9";
result = num2;
}
updateInput();
});
zero.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
num1 += "0";
result = num1;
} else {
num2 += "0";
result = num2;
}
updateInput();
});
// 运算符按钮点击事件
add.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
operator = "+";
} else {
calculate();
operator = "+";
}
});
subtract.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
operator = "-";
} else {
calculate();
operator = "-";
}
});
multiply.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
operator = "";
} else {
calculate();
operator = "";
}
});
divide.addEventListener("click", function() {
buttonClick(this);
if (operator === "") {
operator = "/";
} else {
calculate();
operator = "/";
}
});
// 清空按钮点击事件
clear.addEventListener("click", function() {
buttonClick(this);
clearInput();
});
// 计算结果
function calculate() {
let num1Float = parseFloat(num1);
let num2Float = parseFloat(num2);
switch(operator) {
case "+":
result = num1Float + num2Float;
break;
case "-":
result = num1Float - num2Float;
break;
case "*":
result = num1Float * num2Float;
break;
case "/":
result = num1Float / num2Float;
break;
default:
break;
}
num1 = result.toString();
num2 = "";
}
// 等于号按钮点击事件
equals.addEventListener("click", function() {
buttonClick(this);
if (operator !== "") {
calculate();
operator = "";
updateInput();
}
});
我们已经成功实现了使用GSAP.js创建动态效果的计算器。我们使用了TweenMax和TimelineMax来创建按钮点击效果、输入框数字更新效果和计算器清空效果。我们还创建了点击数字和运算符按钮时的事件处理程序,并使用calculate函数计算结果。我们还创建了一个点击等于号按钮的事件处理程序来计算最终结果。我们可以在浏览器中打开HTML文件并尝试使用我们的动态计算器了。在本教程中,我们了解了如何使用GSAP.js创建动态效果,并在一个加减乘除计算器的实例中演示了它的用法。