jquery实现一个问答式疾病健康诊断效果代码
代码语言：html
所属分类：布局界面
代码描述：jquery实现一个问答式疾病健康诊断效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<style>
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
.answer {
overflow: hidden;
padding: 20px 0;
}
.large-box {
border-radius: 10px;
padding: 0 10px;
background: linear-gradient(-30deg, #0084ad, #39beab);
}
.ans-ul {
margin: 0 auto;
overflow: hidden;
}
.large-box .edge {
width: 100%;
background: #fff;
height: 14px;
margin: 0px -10px 44px -10px;
padding: 0px 10px;
float: left;
position: relative;
}
.large-box .edge div:nth-child(1), .large-box .edge div:nth-child(2), .large-box .edge div:nth-child(3), .large-box .edge div:nth-child(4) {
display: block;
width: 14px;
height: 14px;
border-radius: 50px;
background: #fff;
border: 1px solid #FFFFFF;
position: absolute;
}
.large-box .edge div:nth-child(1) {
top: -22px;
left: 50px;
}
.large-box .edge div:nth-child(2) {
top: -22px;
right: 50px;
}
.large-box .edge div:nth-child(3) {
bottom: -22px;
left: 50px;
}
.large-box .edge div:nth-child(4) {
bottom: -22px;
right: 50px;
}
.large-box .edge div:nth-child(5), .large-box .edge div:nth-child(6) {
display: block;
width: 2px;
height: 42px;
background: #43c4c7;
position: absolute;
}
.large-box .edge div:nth-child(5) {
left: 57px;
top: -14px;
}
.large-box .edge div:nth-child(6) {
right: 57px;
top: -14px;
}
.large-box p {
color: #fff;
margin: 20px 0;
}
.large-box li {
color: #fff;
}
.large-box li a {
color: #fffcb2;
font-size: 16px;
}
.large-box a.ans-li {
width: 40%;
text-align: center;
height: 40px;
line-height: 40px;
border-radius: 20px;
margin: 20px 0 50px 0;
display: block;
border: 1px solid #FFFFFF !important;
}
.ans-no {
background: rgba(0, 0, 0, 0);
color: #fff;
transition: .5s;
}
.large-box a.ans-li:active {
background: #fff;
color: #43c4c7;
transition: .5s;
}
.ans-on {
background: #fff;
color: #43c4c7;
}
.large-box .ans-y {
float: left;
}
.large-box .ans-n {
float: right;
}
.ans-again {
width: 100% !important;
}
.mask {
width: 100%;
float: left;
margin: 0px -10px;
display: none;
opacity: 0;
}
.mask-hide {
position: fixed;
top: 0;
left: 0;
height: 0px;
width: 100%;
border-bottom-right-radius: 500px;
border-bottom-left-radius: 500px;
background: #00FFFF;
overflow: auto;
opacity: 0;
transition: .5s;
}
.test {
width: 90vw;
height: 40px;
background: #0072FF;
margin: 10px auto;
color: #FFF;
background: #39beab;
border: none;
border-radius: 10px;
text-align: center;
line-height: 40px;
}
.close {
width: 30px;
height: 30px;
position: fixed;
top: 20px;
right: 20px;
color: #fff;
line-height: 30px;
text-align: center;
border-radius: 20px;
background: rgba(0, 0, 0, .5);
}
.mask-show {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background: #191919;
overflow: auto;
opacity: 1;
transition: .5s;
z-index: 1;
}
/*不可点击按钮样式*/
#mask01 .large-box .ans-not {
border: 1px solid #999 !important;
color: #999999 !important;
}
</style>
<title></title>
</head>
<body>
<!--可重复选择JS-->
<script type="text/javascript">
$(function() {
$("#mask .h-button").click(function() {
//这里是点击按钮使内容区自动滚动到相应位置
var ph = $(this).parent().outerHeight(true); //获取下一个出现的内容区域高度
var ch = $(".answer").height(); //获取class answer的现有高度
var vh = window.innerHeight; //获取一屏幕高度
//可很具情况计算你需要的滚动方法
$("#mask").animate({
scrollTop: ch + ph
}, 500);
});
$('#test').click(function() {
$('#mask').removeClass('mask-hide').addClass('mask-show');
});
$('#close').click(function() {
$('#mask').removeClass('mask-show').addClass('mask-hide');
});
$("#mask .ans-y").click(function() {
$(this).parent().children(".y01").css({
"display": "block",
"opacity": "1"
});
$(this).parent().children(".n01").css({
"opacity": "0",
"display": "none"
});
});
$("#mask .ans-n").click(function() {
$(this).parent().children(".y01").css({
"opacity": "0",
"display": "none"
});
$(this).parent().children(".n01").css({
"display": "block",
"opacity": "1"
});
});
$("#mask .ans-li").click(function() {
$(this).addClass("ans-on");
$(this).siblings().removeClass("ans-on");
});
$("#mask .ans-again").click(function() {
$("#mask #first .large-box").css("display", "none");
$("#mask .ans-li").removeClass("ans-on");
$("#mask .ans-li").removeClass("ans-on");
$('#mask').animate({
scrollTop: 500
}, 250); //重置所有按钮并回到顶部500px处，可根据需求修改位置
});
});
</script>
<!--不可重复选择js-->
<script type="text/javascript">
$(function() {
$("#mask01 .h-button").click(function() {
//这里是点击按钮使内容区自动滚动到相应位置
var ph = $(this).parent().outerHeight(true); //获取下一个出现的内容区域高度
var ch = $("#mask01 .answer").height(); //获取class answer的现有高度
var vh = window.innerHeight; //获取一屏幕高度
//可很具情况计算你需要的滚动方法
$("#mask01").animate({
scrollTop: ch + ph
}, 500);
});
$('#test01').click(function() {
$('#mask01').removeClass('mask-hide').addClass('mask-show');
});
$('#close01').click(function() {
$('#mask01').removeClass('mask-show').addClass('mask-hide');
});
$("#mask01 .ans-y").click(function() {
$(this).parent().children(".y01").css({
"display": "block",
"opacity": "1"
});
$(this).parent().children(" .n01").css({
"opacity": "0",
"display": "none"
});
});
$("#mask01 .ans-n").click(function() {
$(this).parent().children(".y01").css({
"opacity": "0",
"display": "none"
});
$(this).parent().children(".n01").css({
"display": "block",
"opacity": "1"
});
});
$("#mask01 .ans-li").click(function() {
$(this).addClass("ans-on");
$(this).siblings("a").addClass("ans-not").unbind("click"); //点击按钮后同级按钮改变样式并清除点击事件
});
$("#mask01 .ans-again").click(function() {
//宠幸定义点击显示事件过程
var hy = $(function() {
$("#mask01 .ans-y").click(function() {
$(this).parent().children(".y01").css({
"display": "block"
}).animate({
"opacity": "1"
});
$(this).parent().children(".n01").css({
"display": "none"
}).animate({
"opacity": "1"
});
});
$("#mask01 .ans-n").click(function() {
$(this).parent().children(".n01").css({
"display": "block"
}).animate({
"opacity": "1"
});
$(this).parent().children(".y01").css({
"display": "none"
}).animate({
"opacity": "1"
});
});
$("#mask01 .ans-li").click(function() {
$(this).addClass("ans-on");
$(this).siblings("a").addClass("ans-not").unbind("click");
});
});
$("#mask01 #first .large-box").css({
"display": "none",
"opacity": "0"
});
$("#mask01 #first").find(".ans-li").removeClass("ans-on ans-not").bind("click", function() {
hy
}); //复原所有样式并添加点击事件
$("#mask").animate({
scrollTop: 500
}, 250);
});
});
</script>
<div id="test" class="test">
开始可随意点击
</div>
<div id="test01" class="test">
开始限制只能选择一次
</div>
<!--可重复选择HTML-->
<div id="mask" class="mask-hide">
<div id="close" class="close">
X
</div>
<div class="large-box ans-ul " style="display: block;">
<p>
睡眠障碍：入睡困难、容易醒
</p>
<p>
<span style="color:#ffff33;">请您根据实际情况逐步点击“是”或“否”回答问题</span>，系统将根据您的回答和美国家庭医生智库的科学数据推算出导致您当前症状最可能的原因和专业解决方案，<span style="color:#ffff33;">按照引导点击相关链接</span>还可获得更详细的指导。
</p>
</div>
<div class="answer" onmousemove="" ontouchstart="">
<div class="large-box ans-ul onebox" id="first" style="display: block;">
<p>
夜晚你是否经常感到入睡困难？
</p>
<a class="h-button ans-li ans-no ans-no ans-y">是</a> <a class="h-button ans-li ans-no ans-n">否</a>
<div class="large-box mask y01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
白天是否感到精神紧张或压力大？
</p>
<a class="h-button ans-li ans-no ans-y">是</a> <a class="h-button ans-li ans-no ans-n">否</a>
<div class="large-box mask y01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
你很可能是因为最近压力太大而导致的入睡困难。尝试放松自己，有效管控压力。更多知识，请点击：
</p>
<ul>
<li> <a href="A6B3C1-2">控制压力的13个技巧</a> </li>
</ul>
<a class="h-button ans-li ans-no ans-again">重新开始</a>
</div>
<div class="large-box mask n01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
你是否在晚上或早晨很早的时候经常会醒来，且醒来之后很难再次入睡？
</p>
<a class="h-button ans-li ans-no ans-y">是</a> <a class="h-button ans-li ans-no ans-n">否</a>
<div class="large-box mask y01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
醒来之后，你是否会陷入胡思乱想之中，且对生活中存在的问题耿耿于怀，感到毫无办法去改变现实，觉得自己毫无价值？
</p>
<a class="h-button ans-li ans-no ans-y">是</a> <a class="h-button ans-li ans-no ans-n">否</a>
<div class="large-box mask y01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
你很可能是因为最近遇到了难以解决的事情，导致压力过大或是患上了焦虑症或抑郁症。如果这种状态持续很久，建议去看精神科医生。了解更多疾病知识，请点击：
</p>
<ul>
<li> <a href="ZZRXWAA367">抑郁症</a> </li>
<li> <a href="JBA1B4-2-1">图解广泛性焦虑症</a> </li>
<li> <a href="A19B7-8">如何治疗焦虑症？</a> </li>
</ul>
<a class="h-button ans-li ans-no ans-again">重新开始</a>
</div>
<div class="large-box mask n01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
你是否在晚上会经常醒来且感到呼吸短促？
</p>
<a class="h-button ans-li ans-no ans-y">是</a> <a class="h-button ans-li ans-no ans-n">否</a>
<div class="large-box mask y01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
某些肺部疾病或者心脏疾病，例如充血性心理衰竭会导致躺下时出现呼吸短促的症状
</p>
<a class="h-button ans-li ans-no ans-again">重新开始</a>
</div>
<div class="large-box mask n01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
你的年龄是否超过了60岁？
</p>
<a class="h-button ans-li ans-no ans-y">是</a> <a class="h-button ans-li ans-no ans-n">否</a>
<div class="large-box mask y01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
年龄增大后，很多人会出现睡眠障碍的问题，这是正常现象，但可以通过一些方法帮助自己更好睡眠。详细知识，请点击：
</p>
<ul>
<li> <a href="ZTZLNJK0001">中老年人睡眠专题导读</a> </li>
</ul>
<a class="h-button ans-li ans-no ans-again">重新开始</a>
</div>
<div class="large-box mask n01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
你是否怀孕？
</p>
<a class="h-button ans-li ans-no ans-y">是</a> <a class="h-button ans-li ans-no ans-n">否</a>
<div class="large-box mask y01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
怀孕期间出现睡眠障碍是正常现象，尤其是在临产前的几周内。更多知识，请点击：
</p>
<ul>
<li> <a href="MYDXWBA7B1-2">孕期睡眠问题</a> </li>
</ul>
<a class="h-button ans-li ans-no ans-again">重新开始</a>
</div>
<div class="large-box mask n01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
最近是否喝了更多的咖啡、茶、可乐或者其他含咖啡因的饮品？
</p>
<a class="h-button ans-li ans-no ans-y">是</a> <a class="h-button ans-li ans-no ans-n">否</a>
<div class="large-box mask y01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
咖啡因是一种会导致睡眠减少的兴奋剂。如果出现了睡眠问题，尽可能不再喝或者少喝含咖啡因的饮品，尤其是在半晚时分和夜晚。
</p>
<a class="h-button ans-li ans-no ans-again">重新开始</a>
</div>
<div class="large-box mask n01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
最近在日间是否吃了太多东西或者喝了很多酒？
</p>
<a class="h-button ans-li ans-no ans-y">是</a> <a class="h-button ans-li ans-no ans-n">否</a>
<div class="large-box mask y01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
尝试将晚餐稍微提前一点并吃的少一点，尽可能减少饮酒量。
</p>
<a class="h-button ans-li ans-no ans-again">重新开始</a>
</div>
<div class="large-box mask n01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
最近是否停止服用镇静剂、其他帮助睡眠的药物或减少了服用的量？
</p>
<a class="h-button ans-li ans-no ans-y">是</a> <a class="h-button ans-li ans-no ans-n">否</a>
<div class="large-box mask y01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<p>
如果你一直在服用镇静剂或其他帮助睡眠的药物，突然停药或者减少服药量会打乱以往的睡眠习惯且会引起其他问题。请及时与医生联系，让医生帮助你在尽可能控制住副作用的前提下，逐渐较少药物量。
</p>
<a class="h-button ans-li ans-no ans-again">重新开始</a>
</div>
<div class="large-box mask n01">
<div class="edge">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0