HTML、CSS、JS課後習作——痛風診斷APP原始碼

最後更新：2015-10-11 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

我自己也感到這些代碼非常不成熟，一定有很多可以最佳化的地方，就當做一個反面教材，供大家剖析、批評。

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;
}

HTML、CSS、JS課後習作——痛風診斷APP原始碼

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

HTML、CSS、JS課後習作——痛風診斷APP原始碼

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support