横向图条表实现办法_class

<html>
<head>
 <title>
 </title>
 <mce:style><!--
  
  
  .titleF
  {     
     padding-top:10px;
     margin-bottom:5px;
     border-bottom:1px black solid;
     font-size:12px;
     line-height:14px;
  }
  
  .imgSpan
  {      
     height:12px;
     font-size:0px;
     line-height:12px;
     border:0px;
  }
  
  .txt
  {     
     font-size:10px;
     line-height:12px;
  }
 
--></mce:style><style mce_bogus="1">  
  
  .titleF
  {     
     padding-top:10px;
     margin-bottom:5px;
     border-bottom:1px black solid;
     font-size:12px;
     line-height:14px;
  }
  
  .imgSpan
  {      
     height:12px;
     font-size:0px;
     line-height:12px;
     border:0px;
  }
  
  .txt
  {     
     font-size:10px;
     line-height:12px;
  }
 </style>
</head>
<body>
<div id="tabDiv" style="border-left:1px orange solid;" mce_style="border-left:1px orange solid;">
</div>

<mce:script type="text/javascript"><!--
function showTab()
{
   var manCount = 669;//总投票人数
   var c100 = "#000000";//100%的色
   var manCountw = 669;//个相当几个像素
   var tabArray = new Array();
   tabArray[tabArray.length] = new Array(
     "1、您所在的单位正在应用高性能的计算机吗?",//标题
     "#000000",//第一条的底色
     "#000eee",//连续图条变化色深
     "244=正在应用",//第一条图条
     "220=没有应用",//第二条图条
     "205=正在调研中"
   );
   tabArray[tabArray.length] = new Array(
     "2、 在高性能计算系统中,您所遇到的困难及问题主要有哪些?(多选)",//标题
     "#000000",//第一条的底色
     "#0000ee",//连续图条变化色深
     "331=成本太高",//第一条图条
     "335=部署太复杂",//第二条图条
     "315=能耗太大",//...条图条
     "325=节点计算性能不够",//...条图条
     "314=应用软件匮乏",//...条图条
     "308=节点互联效率低",//...条图条
     "309=软件并行效率不高",//...条图条
     "341=应用开发人员短缺",//...条图条
     "313=无项目时的系统闲置成本",//...条图条
     "308=服务支持不足"//...条图条
   );
   tabArray[tabArray.length] = new Array(
     "3、 如果已经部署了高性能计算系统,您所处在行业领域是什么?",//标题
     "#000000",//第一条的底色
     "#0000ee",//连续图条变化色深
     "48=能源",//第一条图条
     "52=金融",//第二条图条
     "50=电信",//...条图条
     "50=气象",//...条图条
     "43=生命/医学",//...条图条
     "51=化工",//...条图条
     "55=制造业",//...条图条
     "36=娱乐/3D/影视",//...条图条
     "51=科研院所",//...条图条
     "50=大学",//...条图条
     "39=交通",//...条图条
     "44=政府",//...条图条
     "45=军队",//...条图条
     "55=其他"//...条图条
   );
   tabArray[tabArray.length] = new Array(
     "4、 您所部署的HPC系统采用是的哪几家厂商的主处理器?(多选)",//标题
     "#000000",//第一条的底色
     "#0000ee",//连续图条变化色深
     "317=英特尔-至强家族",//第一条图条
     "352=AMD-皓龙家族",//第二条图条
     "329=IBM-POWER家族",//...条图条
     "364=Sun/Fujitsu-SPARC家族"
   );
   tabArray[tabArray.length] = new Array(
     "5、 在高性能计算领域,您正在关注哪些技术?(多选)",//标题
     "#000000",//第一条的底色
     "#0000ee",//连续图条变化色深
     "331=软件的多线程并行设计/优化技术",//第一条图条
     "308=新一代的CPU技术",//第二条图条
     "308=异构CPU混载技术",//...条图条
     "332=GPU/CPU混合计算技术",//...条图条
     "313=新一代的内存技术",//...条图条
     "326=新一代的节能技术",//...条图条
     "332=新一代的节点互联技术",//...条图条
     "312=新一代的存储技术"
   );
   
   var tabHtml = "<div class=titleF>" 
               + "图表说明:投票总人数为[" + manCount + "]人,图条100%表示选择的人数是全部投票人数."
               + "</div>/n"
               +"<input type=button  class=imgSpan style="/" mce_style="/""background-color:" 
               + c100
               + ";width:" + manCountw + "px;/">"
               + "<span class=txt> 100%(" + manCount + ")票"
               + " 长度"
               + "</span><BR>/n"; 
   
   for (var forI = 0 ; forI < tabArray.length; forI ++)
   {
      tabHtml += "<div class=titleF>" + tabArray[forI][0] + "</div>/n";
      var tenC = fto10(10,tabArray[forI][1].replace("#",""));//10进制色
      var tenca = fto10(16,tabArray[forI][2].replace("#",""));//10进制加色
      
      for (var forII = 3; forII < tabArray[forI].length; forII++)
      {
         var per = tabArray[forI][forII].split("=")[0];
         tabHtml += "<input type=button   class=imgSpan style="/" mce_style="/""background-color:#" 
                 + len2x(6,ten2x(16,tenC+tenca*(forII-3)))
                 + ";width:" + per*manCountw/manCount + "px;/">"
                 + "<span class=txt> " + Math.round(per*1000/manCount)/10 + "%(" + per + ")票"
                 + " " + tabArray[forI][forII].substr(per.length+1)
                 + "</span><BR>/n"; 
      }
   }  
   
   $e("tabDiv").innerHTML = tabHtml;
   //tabHtml+="<textarea style="/" mce_style="/""width:100%;height:100px;/">" + tabHtml + "</textarea>";
}
showTab();

function $e(theId)
{
   return document.getElementById(theId);
}


function len2x(len,str)
{
   while (str.length < len)
   {
     str += "0";
   }
   
   return str;
}

function ten2x(n,m)
{  
  var ss="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_@";
  m=String(m).replace(/ /gi,"");
  if(m=="")return "";
  if(parseInt(m)!=m){alert("请输入整数!");return "";}
  var t="";
  var a=ss.substr(0,n)
  while(m!=0)
  {
    var b=m%n
	  t=a.charAt(b)+t
	  m=(m-b)/n
  }
  return t;
}

function fto10(n,m)
{
  var ss="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_@";
  m=String(m).replace(/ /gi,"");
  if(m=="")return "";
  var a=ss.substr(0,n);
  if(eval("m.replace(/["+a+"]/gi,'')")!=""){alert("请输入"+n+"进制数!");return "";}
  var t=0,c=1;
  for(var x=m.length-1;x>-1;x--)
  {
    t+=c*(a.indexOf(m.charAt(x)));
    c*=n;
   }
   return t;
}
// --></mce:script>
</body>
</html>