上周，股份公司突然需要问卷调查功能，要的很着急。和一同事用了大约两天时间，将该功能完成。
项目情况是：要求在PC、微信端可以填写内容；微信端根据二维码打开问卷页面。
UI框架： bootstrap
效果如下：
代码如下：
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
p{font-size: 16px;line-height:1.4;
}
.indent{text-indent: 2em;}
</style>
<title>中国XX股份有限公司2017年度企业风险评估调查问卷</title>
</head>
<body class="container">
<div class="panel panel-default" style="margin:30px 0;">
<div class="panel-body">
<div style="text-align:center;"><img src="<%=basePath%>/page/pf/login/logo.png" /><h4 class="page-header">中国XX股份有限公司<br>2017年度企业风险评估调查问卷</h4>
</div>
<spring:form id="defaultForm" οnsubmit="return check();" class="form-horizontal" modelAttribute="questionnaireDto" action="wx/questionnaire/save.do" method="post"><p class="indent">非常感谢您抽出宝贵时间参加风险评估问卷调查。本问卷共含6项一级风险及56项二级风险，请您结合企业实际情况对各二级风险发生可能性和影响程度作出判断并认真填写，为全面、客观辨识股份公司2017年生产经营管理中可能面临的风险状况提供依据。</p><hr style="height:3px;border:none;border-top:3px solid skyblue;" /><p id="tag57" class="text-capitalize"><label for="a570">姓名</label><span style="color:red;font-size: 14px;display: none;" id="msg57">请输入姓名</span><spring:input class="form-control" path="name"/></p><p id="tag58" class="text-capitalize"><label for="a580">您的职务</label><span style="color:red;font-size: 14px;display: none;" id="msg58">请选择您的职务</span><spring:select class="form-control" path="position"><option value="">--请选择您的职务--</option><option value="主管领导">主管领导</option><option value="分管领导">分管领导</option></spring:select></p><p id="tag59" class="text-capitalize"><label>所在单位</label> <span style="color:red;font-size: 14px;display: none;" id="msg59">请选择您所在单位</span></p><p class="text-capitalize"><label class="radio-inline" style="width: 100px;"><input type="radio" name="orgFullpath" value="股份公司"> 股份公司</label><label class="radio-inline"><input type="radio" name="orgFullpath" value="xx"> XX</label></p><p class="text-capitalize">一、战略风险评估（共计14个二级风险项）</p><p id="tag1" class="text-capitalize">1.宏观经济风险：国内外经济环境或政府政策发生重大变化，以及新的重要举措、法规出台，引起市场发生较大波动，从而影响企业生产经营及战略目标的风险。</p><p style="color:red;font-size: 14px;display: none;" id="msg1">请为所有选项打分</p><span class="help-block">发生可能性（低->高）</span><div class="panel panel-default"><div class="panel-body" style="height: 40px;position:relative;"><spring:input type="hidden" id="economyRisk_a1" path="economyRisk" value="0"/><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:10px;" id="a10" οnclick="show('a1',0,'economyRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:60px;" id="a11" οnclick="show('a1',1,'economyRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:110px;" id="a12" οnclick="show('a1',2,'economyRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:160px;" id="a13" οnclick="show('a1',3,'economyRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:210px;" id="a14" οnclick="show('a1',4,'economyRisk')"></span></div></div><span class="help-block">影响重大性（轻->重）</span><div class="panel panel-default"><div class="panel-body" style="height: 40px;position:relative;"><spring:input type="hidden" id="ecoAffectRisk_b1" path="ecoAffectRisk" value="0"/><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:10px;" id="b10" οnclick="show('b1',0,'ecoAffectRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:60px;" id="b11" οnclick="show('b1',1,'ecoAffectRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:110px;" id="b12" οnclick="show('b1',2,'ecoAffectRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:160px;" id="b13" οnclick="show('b1',3,'ecoAffectRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:210px;" id="b14" οnclick="show('b1',4,'ecoAffectRisk')"></span></div></div><p id="tag2" class="text-capitalize">2.政策风险：政府有关政策发生重大变化或是有重要的举措、法规出台，引起市场发生较大波动，从而给企业带来的风险。</p><p style="color:red;font-size: 14px;display: none;" id="msg2">请为所有选项打分</p><span class="help-block">发生可能性（低->高）</span><div class="panel panel-default"><div class="panel-body" style="height: 40px;position:relative;"><spring:input type="hidden" id="policyRisk_a2" path="policyRisk" value="0"/><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:10px;" id="a20" οnclick="show('a2',0,'policyRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:60px;" id="a21" οnclick="show('a2',1,'policyRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:110px;" id="a22" οnclick="show('a2',2,'policyRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:160px;" id="a23" οnclick="show('a2',3,'policyRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:210px;" id="a24" οnclick="show('a2',4,'policyRisk')"></span></div></div><span class="help-block">影响重大性（轻->重）</span><div class="panel panel-default"><div class="panel-body" style="height: 40px;position:relative;"><spring:input type="hidden" id="polAffectRisk_b2" path="polAffectRisk" value="0"/><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:10px;" id="b20" οnclick="show('b2',0,'polAffectRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:60px;" id="b21" οnclick="show('b2',1,'polAffectRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:110px;" id="b22" οnclick="show('b2',2,'polAffectRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:160px;" id="b23" οnclick="show('b2',3,'polAffectRisk')"></span><span class="glyphicon glyphicon-star-empty" style="font-size:30px;position:absolute;top:5px;left:210px;" id="b24" οnclick="show('b2',4,'polAffectRisk')"></span></div></div><div style="text-align: center;"><button type="submit" class="btn btn-success btn-lg">提交</button></div><div style="text-align: center;"><br>中国XX<br>北京XXXX信息技术有限公司<br>提供支持</div>
</spring:form></div>
</div>
</body>
</html>
<script type="text/javascript">
//重新设置样式
function resetColor(name){for(var j=0;j<=5;j++){$("#"+name+j).css("color","black");}
}
// 重新设置提示信息
function resetInfo(){for(var i=1;i<=60;i++){$("#msg"+i).css("display","none");}
}
// 将点击之前的样式都设置为蓝色
function show(name,index,dbName){resetColor(name);for(var j=0;j<=index;j++){$("#"+name+j).css("color","#ea0000");}$("#"+dbName+"_"+name).val(index+1);
}
// 验证
function check(){resetInfo();// 验证职务var position = $("#position").val();if(!position){window.location.href="#tag58";$("#msg58").css("display","block");return false;}// 验证单位var position = $('input[name="orgFullpath"]:checked');if(!position.length){window.location.href="#tag59";$("#msg59").css("display","block");return false;}for(var i=1;i<=56;i++){var v1 = $("#a"+i+"0").css("color");var v2 = $("#b"+i+"0").css("color");if(rgb2hex(v1) == "#333333" || rgb2hex(v2) == "#333333" ){window.location.href="#tag"+i;$("#msg"+i).css("display","block");return false;}}}
// 颜色转换：RGB转成字符串
function rgb2hex(rgb) {rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
</script>
