web前端——4 JavaScript代码画图（菱形）
程序员文章站
2024-03-17 11:11:52
...
我们在学习数学的时候就接触过杨辉三角，今天我们要用代码来画出它的样子：
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//输出五行的杨辉三角
var max = 5;
for(var x = 0;x<= max;x++){ //行数
for (var y = 0;y <= 6 - x ; y++) { //空格
document.write(" ");
}
for (var z = 0;z < x ;z++) { //字符
document.write(" "+"*"+" ");
}
document.write("<br>");
}
for(var x = 0;x<= max;x++){ //行数
for (var y = 0;y <= x+2 ; y++) { //空格
document.write(" ");
}
for (var z = 0;z < max - x -1;z++) { //字符
document.write(" "+"*"+" ");
}
document.write("<br>");
}
</script>
<hr />
<script type="text/javascript">
for (var i = 0;i < 6;i++) { //
for (var j = 6; j >= i;j--) { // *
document.write(" ") // * *
} // * *
for (var k = 1;k <= ( 2 * i - 1 );k++) {// * *
if(k==1 || k == ( 2 * i - 1 )){ // * *
document.write("*");
}else{
document.write(" ")
}
}document.write("<br>");
}
for (var i = 4;i > 0;i--) { //行数
for (var j = 6; j >= i;j--) {//空格符
document.write(" ") // * *
} // * *
for (var k = 1;k <= ( 2 * i - 1 );k++) { // * *
if(k == 1 || k == ( 2 * i - 1 )){ // *
document.write("*");
}else {
document.write(" ")
}
}document.write("<br>");
}
</script>
<script type="text/javascript">
for (var i = 0;i < 6;i++) { // *
for (var j = 6; j >= i;j--) { // ***
document.write(" ") // *****
} // *******
for (var k = 1;k <= ( 2 * i - 1 );k++) {// *********
document.write("*");
}document.write("<br>");
}
</script>
<hr />
<script type="text/javascript">
var i,j;
var s = 4;
for( i = 0;i < s;i++){ //行数：4
for (j = s;j > i;j--) { //第一个*之前有多少空格符
document.write(" "); // *
} // * *
for (j = 0;j < 5;j++) { // * *
if(j == 0 || j == 2*i - 1 || i == 3){ //* *** *
document.write("*");
}else{
document.write(" ");
}
}
document.write("<br>");
}
</script>
<hr />
//设置input框，用户可以动态输入行数，写入数字几就可以显示几行
<input type="text" id="txt" placeholder="请输入数字……" />
<button onclick="txt()">点下获取</button>
<script type="text/javascript">
function txt(){
//DOM节点获取input框中的值
var n = document.getElementById("txt").value;
for(var i = 0;i < n;i++){ // 此处的n为用户输出的number类型的数字（控制行数）
for(var j = n;j >i -1 ;j--){
document.write(" "); //控制空格 空格从上到下依次减少
}
for(var k = 0;k < 2 * i - 1;k++){
document.write("*");
}
document.write("<br>");
}
};
</script>
<hr />
<input type="text" id="tt" placeholder="请输入数字……" />
<button onclick = "tt()">点击获取</button>
<script type="text/javascript">
function tt(){
var m = document.getElementById("tt").value;
for(var i = m; i > 0;i--){ //控制正反
for(var j = m;j >i-1 ;j--){
document.write(" ");
}
for(var k = 1;k <= 2*i-1 ;k++){ // *号呈1,3，5,7，9……的个数排列
document.write("*");
}
document.write("<br>");
}
};
</script>
<hr />
<script type="text/javascript">
for(var i = 0;i < 5;i++){
for(var j = 5;j > i - 1;j--){ // 当 j >0为直角三角形, j > i-1空格多一行显示
document.write(" ");
}
for(var k = 1;k <= 2*i -1;k++){ //k<=2*i-1 *会直接从第二行开始打印
if(k == 1 || i == 4 || k == 2*i -1 ){ //k==1 都为左面的* ，i==4表示第四行显示 ，右边显示为k==2*i-1
document.write("*");
}
else{
document.write(" ");
}
}
document.write("<br>");
};
</script>
<hr />
<script type="text/javascript">
for(var i = 5;i >0;i--){
for(var j = 5;j > i-1;j--){
document.write(" ")
}
for(var k = 1;k <= 2*i-1;k++){
if(k == 1 || k == 2*i-1 || i == 5){
/* i==5表示第五行 总体构思：输出左边所有的*号，
①左边都是从1开始，那也就是说必须满足k等于1，
②输出所有右边的*号，与k等于一道理相似，即满足k == 2*i-1
③左右的*都构思完成后，就要想我要输出几行，那么就要用到行数i，这里的i==5就是输出的5行
——最后的结果显示的就是一个反着的“V”字状 */
document.write("*");
}
else{
document.write(" ");
}
}
document.write("<br>")
}
</script>
</body>
</html>
上一篇： python CSV 文件的读写
下一篇： C#读写文本文件源码片段