在html页面中使用js输出一由“*”组成绕顺时针旋转90度的三角形
时间: 2024-05-03 08:20:36 浏览: 13
请参考下面的代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>绕顺时针旋转90度的三角形</title>
<style>
.rotate-90 {
transform: rotate(90deg);
transform-origin: top right;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(90deg);
-moz-transform-origin: top right;
-o-transform: rotate(90deg);
-o-transform-origin: top right;
-ms-transform: rotate(90deg);
-ms-transform-origin: top right;
}
</style>
</head>
<body>
<script>
var str = '*****\n**** \n*** \n** \n* ';
var rows = str.split('\n');
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
for (var j = 0; j < row.length; j++) {
var char = row.charAt(j);
if (char === ' ') {
document.write(' ');
} else {
document.write('*');
}
}
document.write('<br>');
}
</script>
<div class="rotate-90">
<script>
var str = '*****\n**** \n*** \n** \n* ';
var rows = str.split('\n');
for (var i = rows.length - 1; i >= 0; i--) {
var row = rows[i];
for (var j = 0; j < row.length; j++) {
var char = row.charAt(j);
if (char === ' ') {
document.write(' ');
} else {
document.write('*');
}
}
document.write('<br>');
}
</script>
</div>
</body>
</html>
```
这个代码中,我们先定义了一个旋转90度的CSS样式,然后通过JavaScript输出了一个由星号组成的绕顺时针旋转90度的三角形。具体来说,首先我们把三角形用一个含有换行符的字符串表示出来,然后使用`split()`方法按照换行符将它分割成数组,接着循环遍历数组的每一行,并对每一行中的每一个字符进行判断,如果是空格则输出` `,否则输出星号。循环结束后,将整个三角形包裹在一个使用了旋转90度的CSS样式的`div`元素中,再次遍历三角形数组进行输出,此时需要注意遍历顺序,因为我们要实现顺时针旋转90度的效果,所以需要从最后一行开始输出,并且每一行从右往左输出。