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

最新推荐文章于 2016-12-18 10:00:14 发布
最新推荐文章于 2016-12-18 10:00:14 发布
阅读量609 收藏
点赞数
分类专栏： 手机APP应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hejianzou/article/details/49864517
版权

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

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="点击开始计算" οnclick="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="不符合" οnclick="s2()"></p>
<p><input type="button" value="符合" οnclick="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="符合" οnclick="s4()"></p>
<p><input type="button" value="不符合" οnclick="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/>&lt;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" οnclick="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;
}

Jack-ZOU
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
美食网站js+html+css
01-03
利用js+html，简单的美食网站设计，完整源代码+网站图片
HTMl+CSS登录小实例
03-21
一个实用的HTML+CSS的登录界面，小实战案例
html+css+js clock钟表
07-13
动态时钟 body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;} .box{ width: 400px; height: 400px; border:10px solid #8bf2f1;margin:100px auto; border-radius: 50%; box-shadow: 0px 0px 20px 3px #444 inset; position: relative;} /*原点*/ .origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;} /* 指针 */ .clock_line{ position: absolute;position:absolute;z-index:20;} .hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px; transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;} .minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000; transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;} .second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60; transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;} .dot_box{width: inherit; height: inherit;} /*时钟数*/ .dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;} .clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7; position:absolute;top:199px;left:200px;} .scale-show{ width:12px;height:2px;background-color:#555;float:left;} .scale-hidden{width:183px;height:2px;float:left;} /*日期*/ .date_info{width:160px;height:28px; line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555; font-weight:bold;} .time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; } .time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;} #minute_time{border-left:1px solid #fff;border-right:1px solid #fff;} <div class
HTML+CSS经典案例
09-12
想学好这块的朋友，可以去看看，很适合初学者，希望对你 有所帮助
js综合案例
03-22
js综合案例 包含了一些简单常用的页面特效实现的方法。
html+css+js网页设计源代码.zip
05-31
计软院和巨耀通杯网页设计大赛作品，一个猫站。
21天精通HTML 5+CSS 3网页设计——源代码
03-21
《21天精通HTML 5+CSS 3网页设计》源代码，包括所有章节例子涉及的源代码。
基于HTML+CSS+JavaScript实现的QQ音乐界面+源代码+文档
最新发布
04-11
基于HTML+CSS+JavaScript实现的QQ音乐界面+源代码+文档
html css JavaScript 烧香网源代码
08-30
烧香网提供网上烧香拜佛，可以应用到大学毕业设计，适合初学者学习和网页设计师参考。
HTML5+CSS3+JS入门教程 + 源代码 pdf
03-28
HTML5+CSS3+JS，教程，源代码 javascript 很好的开发编辑教程 下载试读
HTML+CSS+JS模仿win10亮度调节效果的示例代码
01-19
HTML+CSS+JS模仿win10亮度调节效果 代码 <!doctype html> <html> <head> <meta charset=utf-8> <title>模仿win10的亮度调节</title> <style> .control_bar{ height:200px; width:500px; border-bottom:3px solid #888888; } .control_bar_cursor{ height:25px; width:8px; background: #505151;
HTML5+CSS3+JavaScript网页设计案例课堂-课本源代码.zip
04-14
HTML5+CSS3+JavaScript网页设计案例课堂-课本源代码.zip
HTML5与CSS3实例教程 第二版 源代码
03-10
HTML5与CSS3实例教程 第二版 源代码
仿京东商城H5主页面源代码，html、css、js 下载
02-05
仿京东商城H5主页面源代码，html、css、js 仿京东商城H5主页面源代码，html、css、js 仿京东商城H5主页面源代码，html、css、js 仿京东商城H5主页面源代码，html、css、js
一个用weui+html+css页面的例子
03-26
卖鲜花的网站的html页面，只有html和js但是很完整，拿下来就能用
精通html5+CSS3+Javascrip源代码
12-20
《精通THML5+CSS3+JavaScript网页设计》的源代码
HTML5开发实例大全源代码2
03-18
HTML5开发实例大全源代码2 200多个实例，涵盖了html5的技术各个方面
安卓、苹果手机备忘录同步
热门推荐
Dr. ZOU的博客
11-16 1万+
安卓、苹果的备忘录互不相通，安卓的备忘录叫记事本。你有两只手机，怎么样把安卓和苹果手机的备忘录同步起来了?现在有了一个安卓的APP，用安卓上的豌豆荚去收索“备忘录”，排在第一的那个，下载量9.7万，900多K的就是。注意：有很多叫备忘录的app，不要弄错，app图表上有个notes的就是。安装后，用icloud邮箱建一个账号，就可以同步苹果和安卓的备忘录了。(原创)
使用微信时提示网络连接错误
Dr. ZOU的博客
12-18 8657
昨天晚上在使用微信时，点击微信中的图片、视频都不能打开，提示网络连接错误。用的是无线网络，其他人手机微信没有问题，我自己手机关闭无线连接，用流量，同样显示网络连接错误。打开腾讯视频，一切正常。心理有底了，问题出在微信中。卸载微信，重新安装，问题解决。 在微信里没有相关的网络设置，不存在误设的问题，可能是一个APP使用久了，会出现软件上的问题。 以后遇到类似问题，在排除网络问题后，就要想到APP
html+css+javascript网页制作案例教程源代码
08-01
以下是一个简单的HTML CSS JavaScript网页制作案例教程的源代码： HTML部分： ``` <!DOCTYPE html> <html> 网页制作案例教程 <link rel="stylesheet" type="text/css" href="style.css"> <h1>HTML CSS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值