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

最新推荐文章于 2024-04-24 09:22:16 发布

宁静_致远_

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量375

点赞数 1

分类专栏：前端开发文章标签：动画 javascript css3

本文链接：https://blog.csdn.net/tiantianzs/article/details/124599480

版权

前端开发专栏收录该内容

25 篇文章 3 订阅

订阅专栏

title: 长方形面积 + 鼠标跟随动画
tags: codepen
category: 前端开发

参考内容

https://www.bilibili.com/video/BV1Fy4y1g71h?spm_id_from=333.337.top_right_bar_window_history.content.click

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

宁静_致远_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
长方形面积+鼠标跟随动画

title: 长方形面积 + 鼠标跟随动画tags: codepencategory: 前端开发参考内容https://www.bilibili.com/video/BV1Fy4y1g71h?spm_id_from=333.337.top_right_bar_window_history.content.clickhttps://codepen.io/tiansztiansz/pen/BaJEBxK效果演示https://codepen.io/tiansztiansz/pen/QWQbYpg.
复制链接

扫一扫