这原是同创蓝宇的一道js机试题，同事的同学想去同创蓝宇面试，让我帮忙看看他们面试题的难度等级，刚看到这道题时以为是考智力，给出一个数让在纸上画方块和三角，原谅我从业这么多年从来没做过什么面试题。。。
demo演示地址：https://521lbx.github.io/simExample/diamondCV.html
原题如下：
输入整数（3-16），输出满足条件的图形：
例如：输入3输出如下图形
□□▲□□
□▲□▲□
▲□□□▲
□▲□▲□
□□▲□□
输入4输出如下图形：
□□□▲□□□
□□▲□▲□□
□▲□□□▲□
▲□□□□□▲
□▲□□□▲□
□□▲□▲□□
□□□▲□□□
输入5输出如下图形
□□□□▲□□□□
□□□▲□▲□□□
□□▲□□□▲□□
□▲□□□□□▲□
▲□□□□□□□▲
□▲□□□□□▲□
□□▲□□□▲□□
□□□▲□▲□□□
□□□□▲□□□□
知道是让写个页面实现功能，一切都变得那么简单了！
首先，实心三角输出的是个菱形，那就对称；以输入4为例,先看前4行（前四行的倒序排列就是后四行）；实心三角在每行所处的位置依次是（4),(3,5),(2,6),(1,7)；行号依次是0,1,2,3;所以实心三角所处位置为：输入数值减行数或输入数值加行数；
总行数 = 每行的位数=(4-1)*2+1=(输入数值-1)*2+1;
ok，分析完毕，可以写代码了：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="userinput" placeholder="请输入" />
<button onclick="cal()" style="width:100px;height:30px;">确定</button>
<div id="showData" style="width:500px;height:500px;"></div>
<script>
function cal(a){
a = parseInt(document.getElementById("userinput").value)||a;
var x = '□';
var y = '▲';
var t_arr = [];
var tlen = (a-1)*2+1;
var reduce = a;
var t_arr = []
for(var i=0;i<a;i++){
var str1 = '';
for(var j=1;j<tlen+1;j++){
if(j == a-i||j == a+i){
str1 += '▲';
}else{
str1 += '□';
}
}
t_arr.push(str1);
}
var t_arr2 = JSON.parse(JSON.stringify(t_arr)).reverse();
t_arr2.shift();
var t_arr3 = t_arr.concat(t_arr2);
var divhtml = "";
t_arr3.forEach(cols=>{
console.log(cols)
divhtml = divhtml + cols +'<br/>' ;
})
document.getElementById("showData").innerHTML = divhtml;
}
//cal(4);
</script>
</body>
</html>
浙公网安备 33010602011771号