长方形面积 + 鼠标跟随动画

.markdown

长方形面积 + 鼠标跟随动画

A Pen by tiansztiansz on CodePen.

License.

index.html

<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.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);

style.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;
}