HTML、CSS、JS课后习作——痛风诊断APP源代码
来源:互联网 发布:网络语wink是什么意思 编辑:程序博客网 时间:2024/06/10 01:07
我自己也感到这些代码非常不成熟,一定有很多可以优化的地方,就当做一个反面教材,供大家剖析、批评。
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
- HTML、CSS、JS课后习作——痛风诊断APP源代码
- js+html+css 开发App
- 用CSS诊断HTML代码
- 【转载】VML习作——扇形图
- 仿京东商城H5主页面源代码,html、css、js
- ReactMix:基于HTML+JS+CSS写APP的最佳实践
- hbuilder(js+html+css)开发的APP效果实例
- iOS开发之网络篇——HTML+CSS+JS
- 学习整理——html+css+js可拖动进度条
- iOS开发之网络篇——HTML+CSS+JS
- HTML与CSS练习——js选择器
- 计算机编译原理习作——LL(1)语法分析器
- python习作——简易24点计算器
- 痛风爱找“工作狂”——多加休息少喝啤酒
- html,css.js
- html+css+js+struts
- js html css
- 文件操作
- LeetCode:Summary Ranges
- 一个自己编写的象棋程序,可实现走棋谱(如炮二平五),工程完成度%96,跟大家分享一下,下一步要做残局,欢迎交流
- Android动画之属性动画(Property Animation)(一)
- 关于透明状态栏的使用以及与软键盘冲突的解决办法
- HTML、CSS、JS课后习作——痛风诊断APP源代码
- Win32平台下出现中文乱码问题的解决方案
- PSU-11g RAC 11.2.0.3.0 升级到11.2.0.3.1
- HTML、CSS、JS课后习作——痛风诊断APP
- iOS-- UIView中的坐标转换
- LightOJ 1003 Drunk
- @property,下划线
- java 调用打印机程序
- Ambari系列(二):编译安装Ambari