<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>
横向图条表实现办法
原创
©著作权归作者所有:来自51CTO博客作者qidizi的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:百度地图api定位不准解决
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
移动端 实现ul横向滚动条
隐藏滚动条
块级元素 ios -
JavaScript来实现横向滚动效果 js控制横向滚动条
<template> <div id="div"> <!-- 左边元素 --> <div id="div1"> 字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76
JavaScript来实现横向滚动效果 javascript vue.js elementui 用户管理