首页JS实现倒直角三角形

JS实现倒直角三角形

时间: 2024-10-28 08:15:24 浏览: 23

在JavaScript中，你可以使用HTML、CSS以及一些简单的JavaScript来创建一个动态的倒三角形。这里是一个基本的例子：首先，创建一个HTML结构，包含一个空的`<div>`元素，这将作为我们的三角形容器： ```html <!DOCTYPE html> <html lang="en"> <head> <style> /* 预定义样式 */ .triangle { position: relative; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; } </style> </head> <body> <div id="triangle" class="triangle"></div> <script src="triangle.js"> </script> </body> </html> ``` 然后，在一个名为`triangle.js`的外部JavaScript文件中，添加一个函数来改变三角形的角度： ```javascript // JavaScript部分 document.addEventListener('DOMContentLoaded', function () { const triangle = document.getElementById('triangle'); const changeTriangleDirection = () => { if (triangle.classList.contains('flipped')) { triangle.classList.remove('flipped'); triangle.style.borderTop = '50px solid #f00'; // 顶部边框颜色 } else { triangle.classList.add('flipped'); triangle.style.borderTop = '0'; triangle.style.borderBottom = '50px solid #f00'; // 底部边框颜色 } }; // 初始状态为直角 changeTriangleDirection(); }); ``` 在这个例子中，我们有一个名为`.flipped`的CSS类，它隐藏了原本的顶部边框，并显示底部边框，实现了三角形翻转的效果。点击按钮或触发其他事件时，调用`changeTriangleDirection`函数切换三角形的方向。如果你想让三角形随着用户的交互动态变化方向，比如鼠标悬停或点击，只需调整事件监听器即可。

阅读全文