title: 长方形面积 + 鼠标跟随动画
tags: codepen
category: 前端开发
参考内容
https://codepen.io/tiansztiansz/pen/BaJEBxK
效果演示
https://codepen.io/tiansztiansz/pen/QWQbYpg
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>长方形面积 + 鼠标跟随动画</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>计算长方形面积</h1>
<div>
<form id="form">
<input type="text" placeholder="请输入长方形的长度" id="length">
<input type="text" placeholder="请输入长方形的宽度" id="width">
<button>计算</button>
</form>
<p id="lengthResult"></p>
<p id="widthResult"></p>
<p id="result"></p>
</div>
<script src="./script.js" type="text/javascript"></script>
</body>
</html>
css 代码
body {
background: linear-gradient(35deg, #ccffff, #ffcccc);
}
h1 {
text-align: center;
font-size: 30px;
font-weight: 600;
padding-top: 30px;
padding-bottom: 20px;
font-family: "楷体";
}
input,
button {
display: block;
font-size: 17px;
margin: 30px auto;
height: 2em;
}
div {
background-color: #f0f0f0;
width: 50vw;
height: 400px;
margin: auto;
padding-top: 50px;
}
input {
text-indent: 0.25em;
}
button {
width: 13em;
background-color: #dcefef;
border-radius: 5px;
border-width: 1px;
}
button:hover {
background: #f1d9d9;
}
p {
text-align: center;
color: red;
margin-bottom: 20px;
font-family: "楷体";
font-weight: bold;
font-size: 23px;
}
js 代码
const length = document.getElementById("length");
const width = document.getElementById("width");
const form = document.getElementById("form");
const lengthOrWidthResult = document.getElementById("lengthResult");
const result = document.getElementById("result");
// 点击“计算”触发该监听器
form.addEventListener("submit", (e) => {
e.preventDefault();
validataForm();
});
// 主要函数
const validataForm = function () {
const lengthValue = length.value.trim();
const widthValue = width.value.trim();
let trueLengthValue;
let trueWidthValue;
// 判断输入是否存在错误，然后输出相应提示文本
if (lengthValue === "") {
lengthOrWidthResult.innerText = "请输入长方形的长度或宽度";
} else if (widthValue === "") {
lengthOrWidthResult.innerText = "请输入长方形的长度或宽度";
} else if (!validata(lengthValue)) {
lengthOrWidthResult.innerText = "请正确输入长方形的长度或宽度";
} else if (!validata(widthValue)) {
lengthOrWidthResult.innerText = "请正确输入长方形的长度或宽度";
} else {
trueLengthValue = lengthValue;
trueWidthValue = widthValue;
lengthOrWidthResult.innerText = "";
}
// 将提取出的正确长度和宽度进行面积计算
if (trueLengthValue & trueWidthValue) {
let area = String(trueWidthValue * trueLengthValue);
result.innerText = "当前设置的长方形面积为" + area;
} else {
result.innerText = "";
}
};
// 验证是否含有非数字字符的函数
const validata = function (str) {
const regex = /^[0-9]*$/;
return regex.test(str);
};
// 以下是鼠标跟随动画：
(function (window, document, undefined) {
var aaa;
var hearts = [];
window.requestAnimationFrame = (function () {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
}
);
})();
init();
function init() {
css(".heart{width: 1px;height: 1px;position: fixed;");
attachEvent();
gameloop();
}
function gameloop() {
for (var i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
continue;
}
hearts[i].y++;
hearts[i].x += hearts[i].xx;
hearts[i].scale -= 0.01;
hearts[i].alpha -= 0.008;
hearts[i].el.style.cssText =
"left:" +
hearts[i].x +
"px;top:" +
hearts[i].y +
"px;opacity:" +
hearts[i].alpha +
";transform:scale(" +
hearts[i].scale +
"," +
hearts[i].scale +
") rotate(45deg);color:" +
hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent() {
var old =
typeof window.onmousemove === "function" && window.onmousemove;
window.onmousemove = function (event) {
old && old();
createHeart(event);
};
}
function createHeart(event) {
var d = document.createElement("samp");
d.className = "heart";
d.innerHTML = "*";
hearts.push({
el: d,
x: event.clientX - 8,
y: event.clientY - 13,
xx: Math.pow(-1, Math.round(Math.random())) * Math.random(),
scale: 1,
alpha: 1,
color: randomColor()
});
document.body.appendChild(d);
}
function css(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName("head")[0].appendChild(style);
}
function randomColor() {
return (
"rgb(" +
~~(Math.random() * 255) +
"," +
~~(Math.random() * 255) +
"," +
~~(Math.random() * 255) +
")"
);
}
})(window, document);
