자 바스 크 립 트 를 이용 하여 출력 지 정 된 줄 의 정사각형 도안 을 실현 하 다

javascript 출력 지정 줄 수의 정사각형 도안 실현: 그림 생 성 을 클릭 하면 2 개의 알림 상자 가 있 습 니 다. 1. 그림 의 구성 문 자 를 입력 하면 1 글자 만 입력 할 수 있 습 니 다. 2. 정사각형 줄 수 를 입력 하고 10 이상 지나 면 10 줄 로 설정 합 니 다.
 
 
 
효과 그림:
1. 도안 문자: +, 줄 수: 5
 
2. 도안 문자: s   줄 수: 10
 
 
 
html 파일:
 

 
  
 
 //        ，    ，  span，      ，  
function get_width(zifu){
if(cwidth.innerHTML.length>0)cwidth.innerHTML='';//     ，  
var oldwidth=cwidth.offsetWidth;
cwidth.innerHTML=zifu;
var zifu_width=cwidth.offsetWidth-oldwidth;
cwidth.innerHTML='';
//alert(zifu_width);
return zifu_width;
}
  //       
function create(){
var tuxing=prompt('     ，  1   ');//  ，  a 
if(tuxing==null||tuxing==''||tuxing.length>1){
alert('      ,    1   ');
return false;
}
//   ，    
var count=prompt('         ');
if(count==null||count==''||count<1||isNaN(count)){
alert('           ，1.   2.  1 3.      ');
return false;
}
//    ，        
if(count>10){count=10;alert('       10，     10');}
var hangstr='';
for(i=1;i<=count;i++){
hangstr+=tuxing+'  ';
//           
if(get_width(hangstr)>maxw-100){
alert('    ');
count=i-1;
hangstr=oldhangstr;
break;
}
oldhangstr=hangstr;
}


//       
var tustr='';//     
for(i=1;i<=count;i++)tustr+=hangstr+'<br/>';
//           
zengfang.innerHTML=tustr;
}


 

 

 
      
 




  
  var maxh=document.body.clientHeight;//            
  var maxw=document.body.clientWidth;//   ，       
  //alert(maxh);
//  alert(maxw);