HTML、CSS、JS課後習做——痛風診斷APP源代碼

時間  2019-12-01
標籤 html css 課後 痛風 診斷 app 源代碼 欄目 HTML 简体版
原文   原文鏈接

我本身也感到這些代碼很是不成熟，必定有不少能夠優化的地方，就當作一個反面教材，供你們剖析、批評。css

index.html代碼：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>es6

 

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>es5

 

page2.html代碼：spa

<!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>scala

 

page3.html代碼：htm

<!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>ip

 

common.js代碼：utf-8

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程