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

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

长方形面积+鼠标跟随动画相关推荐

鼠标跟随动画，粒子效果
鼠标跟随动画,粒子效果 canvas动画,鼠标跟随项目下载地址:项目包下载实现逻辑: a.需要引入创建粒子背景的 JavaScript 库: particles.js b. 配置动画参数,鼠标跟随 ...
html++鼠标跟随动画,5分钟实现Canvas鼠标跟随动画背景
关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧前言相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到 ...
html++鼠标跟随动画,css3动画过渡实现鼠标跟随导航效果
本篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果,分享给大家,具体如下: 鼠标跟随导航效果效果知识点:html/css布局思维, div+css讲解,css3动画,盒子模型, 浮动与定位,鼠标 ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
用缓动动画实现鼠标跟随
鼠标跟随是为了更好的用户体验而存在,鼠标移动到某个元素的位置,一张代表鼠标的图也移到当前元素的位置,用户能更好的看到自己的鼠标位置,也能用这个做普通特效.当鼠标移动到某个位置,那张图也移动到某个位置, ...
html飞机动画,html5 canvas纸飞机跟随鼠标飞行动画
这是一款效果很酷的html5 canvas纸飞机跟随鼠标飞行动画.插件中使用了paper.js来构建场景中的各种元素. HTML html结构只需要一个canvas,并给它一个id triangle- ...
前端canvas粒子动画背景（带鼠标跟随和点击散开）
目录闲聊看下效果先贴下代码吧大概说一下流程下面让我来详细说一下 1.初始化基础属性 2.添加鼠标移动事件并实时更新鼠标坐标 3.通过随机数生成粒子的坐标和横纵轴速度 4.渲染粒子并将粒子对象 ...
彩色圆点气泡跟随鼠标光标动画特效
彩色圆点气泡跟随鼠标光标动画特效效果图如下: 泡泡会根据鼠标的移动在鼠标下方会生成泡泡然后缓缓上升. 可以父子以下代码看一下实际效果. 1.下面是HTML结构 HTML结构很简单,主要是靠css ...
#计算长方形的周长和面积公式_Animate如何制作动态计算长方形面积及周长
前面讲了如何制作一个动态计算三角形面积的小程序,这里再讲一下如何制作一个动态计算长方形面积及周长的小程序. Animate如何制作动态计算三角形面积的程序(1)-百度经验jingyan.baidu. ...

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

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

参考内容

效果演示

html 代码

css 代码

js 代码

长方形面积+鼠标跟随动画相关推荐

最新文章

热门文章

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

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

参考内容

效果演示

html 代码

css 代码

js 代码

长方形面积+鼠标跟随动画相关推荐

最新文章

热门文章

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