• HTML、CSS、JS课后习作——痛风诊断APP源代码


    我自己也感到这些代码非常不成熟,一定有很多可以优化的地方,就当做一个反面教材,供大家剖析、批评。

    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;
    340px;
    margin-left: auto;
    margin-right: auto;
    }

    #p2
    {color: #29436E;
    font-family: "宋体";
    font-size:22px;
    340;
    margin-left: auto;
    margin-right: auto;
    }

    #p3
    {color: #29436E;
    font-family: "宋体";
    font-size:22px;
    340px;
    margin-left: auto;
    margin-right: auto;
    }

  • 相关阅读:
    .NET平台下Web树形结构程序设计李洪根
    [总结]Asp.net中的页面乱码的问题
    [原创]Datagrid中绑定DropDownList的例子
    [原创]TreeView的递归问题!FAQ
    [个人]我所有的Email地址!
    心情随笔(一)
    [原创]用JS做的一个打字程序(为网友qixiao)
    [转贴]一个通用的数据分页的存储过程
    [转贴]怎么样写一个XML文件到客户端
    [原创]用JS给DropDownList添加新项!
  • 原文地址:https://www.cnblogs.com/hjzou/p/4868818.html
Copyright © 2020-2023  润新知