我自己也感到这些代码非常不成熟，一定有很多可以优化的地方，就当做一个反面教材，供大家剖析、批评。
index.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>痛风诊断评分</title>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/common.css" />
</head>
<body background="img/pink.jpg">
<div align="center" id="p1"> <br/><br/> <p>2015年ACR/EULAR</p><p>痛风诊断评分</p> <br/>
<input type="button" value="点击开始计算" onclick="s1()"> </div>
</body>
</html>
page1.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>是否满足纳入条件</title>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/common.css" />
</head>
<body background="img/yellow.jpg">
<div align="center" id="p2"> <br/><br/><br/>
<p>至少有一次外周关节或滑囊发作性肿胀、疼痛或痛觉过敏。</p><br/>
<p><input type="button" value="不符合" onclick="s2()"></p>
<p><input type="button" value="符合" onclick="s3()"></p>
</div>
</body>
</html>
page2.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>是否符合充分条件</title>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/common.css" />
</head>
<body background="img/yellow.jpg">
<div align="center" id="p3"> <br/><br/><br/>
<p>经偏振光显微镜检查证实：有症状的关节或滑囊存在MSU晶体，或者“痛风石”中发现MSU晶体</p><br/>
<p><input type="button" value="符合" onclick="s4()"></p>
<p><input type="button" value="不符合" onclick="s5()"></p>
</div>
</body>
</html>
page3.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开始评分</title>
<script src="js/common.js"></script>
</head>
<body>
<table align="center" border="1px" cellspacing="0px" width="330px">
<tr> <td colspan="2" bgcolor="#FFFF66"> <b>临床指标：症状发作曾累及的关节、滑囊</b></td></tr>
<tr> <td colspan="2" bgcolor="#CCFFFF"></td></tr>
<tr> <td>踝关节或足弓（单关节或寡关节的一部分发作而没有累及第一跖趾关节）</td><td><input type="radio" name="ques1" value="1"/> </td></tr>
<tr> <td>累及第一跖趾关节（单关节或寡关节发作的一部分）</td><td><input type="radio" name="ques1" value="2"/></td></tr>
<tr> <td colspan="2" bgcolor="#FFFF66"><b>*受累关节“潮红”（患者自述或体检发现）</b><br/><b>*受累关节不能忍受触摸、按压</b><br/><b>*受累关节疼痛以致难以行走或活动</b>
</td></tr>
<tr> <td colspan="2" bgcolor="#CCFFFF"></td></tr>
<tr> <td>符合上述1个特点</td><td><input type="radio" name="ques2" value="1"/> </td></tr>
<tr> <td>符合上述2个特点</td><td><input type="radio" name="ques2" value="2"/></td></tr>
<tr> <td>符合上述3个特点</td><td><input type="radio" name="ques2" value="3"/></td></tr>
<tr> <td colspan="2" bgcolor="#FFFF66"><b>关节痛发作时间特点</b><br/><b>*关节痛在24小时内达到高峰</b><br/><b>*2周内（含2周）关节疼痛消失</b><br/><b>*2次发作间隙期或者仅有的1次发作之后，关节症状完全恢复（达到基线水平）</b>
</td></tr>
<tr> <td colspan="2" bgcolor="#CCFFFF"></td></tr>
<tr> <td>有过1次关节炎发作符合上述特征</td><td><input type="radio" name="ques3" value="1"/> </td></tr>
<tr> <td>有过2次以上关节炎发作符合上述特征</td><td><input type="radio" name="ques3" value="2"/></td></tr>
<tr> <td colspan="2" bgcolor="#FFFF66"><b>痛风石证据：皮肤下的皮下结节有浆液或粉笔灰样，常伴有表面血管覆盖，位于典型的部位：关节，耳廓，鹰嘴粘液囊，指腹，肌腱（如，跟腱）</b>
</td></tr>
<tr> <td colspan="2" bgcolor="#CCFFFF"></td></tr>
<tr> <td>没有痛风石</td><td><input type="radio" name="ques4" value="0"/> </td></tr>
<tr> <td>有痛风石</td><td><input type="radio" name="ques4" value="4"/></td></tr>
<tr> <td colspan="2" bgcolor="#FFFF66"><b>血尿酸：患者没有接受降尿酸治疗的时候及从复发开始4周后进行评分（如：发作缓解期），如果可行，在这些条件下进行复测，并统计最高的数值。</b>
</td></tr>
<tr> <td colspan="2" bgcolor="#CCFFFF"></td></tr>
<tr> <td>小于4mg/dL<br/>（小于0.24mmol/L）</td><td><input type="radio" name="ques5" value="-4"/> </td></tr>
<tr> <td>大于等于4 mg/dL – 小于6 mg/dL <br/>(大于等于0.24 – 小于0.36 mmol/L)</td><td><input type="radio" name="ques5" value="0"/></td></tr>
<tr> <td>6–小于8 mg/dL <br/>(0.36–小于0.48 mmol/L)</td><td><input type="radio" name="ques5" value="2"/> </td></tr>
<tr> <td>8–小于10 mg/dL <br/>(0.48–小于0.60 mmol/L)</td><td><input type="radio" name="ques5" value="3"/></td></tr>
<tr> <td>大于等于10 mg/dL (大于等于0.60 mmol/L)</td><td><input type="radio" name="ques5" value="4"/> </td></tr>
<tr> <td colspan="2" bgcolor="#FFFF66"><b>受累关节滑液穿刺检查</b> </td></tr>
<tr> <td colspan="2" bgcolor="#CCFFFF"></td></tr>
<tr> <td>没有发现尿酸盐晶体</td><td><input type="radio" name="ques6" value="-2"/> </td></tr>
<tr> <td>没有检查过</td><td><input type="radio" name="ques6" value="0"/></td></tr>
<tr> <td colspan="2" bgcolor="#FFFF66"><b>影像学：超声、双能CT检查</b> </td></tr>
<tr> <td colspan="2" bgcolor="#CCFFFF"></td></tr>
<tr> <td>超声发现双规征或者双能CT发现尿酸盐晶体沉着</td><td><input type="radio" name="ques7" value="4"/> </td></tr>
<tr> <td>未见上述异常，或没有检查过</td><td><input type="radio" name="ques7" value="0"/></td></tr>
<tr> <td colspan="2" bgcolor="#FFFF66"><b>影像学：X线关节平片</b> </td></tr>
<tr> <td colspan="2" bgcolor="#CCFFFF"></td></tr>
<tr> <td>X线平片有典型的骨侵蚀（骨质的破坏伴硬化的边缘和突出的边缘，包括远端指间关节和鸥翼样表现。）</td><td><input type="radio" name="ques8" value="4"/> </td></tr>
<tr> <td>未见上述异常，或没有检查过</td><td><input type="radio" name="ques8" value="0"/></td></tr>
<tr> <td colspan="2" bgcolor="#FF0000"></td></tr>
<tr> <td colspan="2" align="center" style="padding: 10px;"><input type="button" onclick="s6()" value="请再次确认没有遗漏选择后提交计算" ></td></tr>
</table>
</body>
</html>
common.js代码：
// JavaScript Document
function s1(){
window.open("page1.html")
}
function s2(){
alert("不符合评分纳入条件，系统将返回首页。");
window.open("index.html");
}
function s3(){
window.open("page2.html")
}
function s4(){
alert("已符合充分条件，可诊断为痛风！");
window.open("index.html");
}
function s5(){
window.open("page3.html");
}
function s6()
{
var ntotal=0;
var obj=document.getElementsByName("ques1");
for (i=0;i<obj.length;i++){ //遍历Radio
if(obj[i].checked){
ntotal=ntotal+Number((obj[i].value));
}
}
var obj=document.getElementsByName("ques2");
for (i=0;i<obj.length;i++){ //遍历Radio
if(obj[i].checked){
ntotal=ntotal+Number((obj[i].value));
}
}
var obj=document.getElementsByName("ques3");
for (i=0;i<obj.length;i++){ //遍历Radio
if(obj[i].checked){
ntotal=ntotal+Number((obj[i].value));
}
}
var obj=document.getElementsByName("ques4");
for (i=0;i<obj.length;i++){ //遍历Radio
if(obj[i].checked){
ntotal=ntotal+Number((obj[i].value));
}
}
var obj=document.getElementsByName("ques5");
for (i=0;i<obj.length;i++){ //遍历Radio
if(obj[i].checked){
ntotal=ntotal+Number((obj[i].value));
}
}
var obj=document.getElementsByName("ques6");
for (i=0;i<obj.length;i++){ //遍历Radio
if(obj[i].checked){
ntotal=ntotal+Number((obj[i].value));
}
}
var obj=document.getElementsByName("ques7");
for (i=0;i<obj.length;i++){ //遍历Radio
if(obj[i].checked){
ntotal=ntotal+Number((obj[i].value));
}
}
var obj=document.getElementsByName("ques8");
for (i=0;i<obj.length;i++){ //遍历Radio
if(obj[i].checked){
ntotal=ntotal+Number((obj[i].value));
}
}
if(ntotal>=8){
alert("分值为："+ntotal+"分， 符合痛风分类标准！")
}
else {
alert("分值为："+ntotal+"分， 尚不符合痛风分类标准")
}
common.CSS代码:
#p1
{color: darkblue;
font-family: "宋体";
font-size:30px;
width: 340px;
margin-left: auto;
margin-right: auto;
}
#p2
{color: #29436E;
font-family: "宋体";
font-size:22px;
width: 340;
margin-left: auto;
margin-right: auto;
}
#p3
{color: #29436E;
font-family: "宋体";
font-size:22px;
width: 340px;
margin-left: auto;
margin-right: auto;
}
