jquery女性月经安全期计算器代码.zip资源-CSDN文库

共18个文件

png：5个

jpg：4个

css：4个

版权申诉

javascript

html5

jQuery

67 浏览量 2022-11-21 11:32:55 上传评论收藏 158KB ZIP 举报

这个压缩包文件“jquery女性月经安全期计算器代码.zip”包含了一个使用前端技术构建的月经安全期计算器应用。这个应用基于jQuery库，一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。接下来，我们将深入探讨这个应用可能涉及的几个关键知识点。我们来讨论HTML5。HTML5是网页内容的结构标准，提供了更多的语义化元素，如`<header>`、`<footer>`、`<article>`和`<section>`，这些元素有助于提高页面的可读性和可访问性。在这个月经安全期计算器中，可能会用到`<form>`元素来创建用户输入月经周期信息的表单，以及`<input>`元素来收集用户数据，如月经开始日期等。 CSS（层叠样式表）用于定义网页的外观和布局。在计算器应用中，CSS可能包括了各种样式规则，以使界面美观、易用。可能会有选择器来定位特定的HTML元素，例如`.calculator`或`.button`，并应用相应的样式属性，如颜色、字体、边框和布局。此外，CSS3还引入了新的功能，如过渡、动画和Flexbox或Grid布局，这可能被用来实现动态效果和更灵活的布局。再者，JavaScript是这个应用的核心部分，负责处理用户交互、数据验证和计算逻辑。jQuery库简化了JavaScript的使用，通过提供链式调用、事件处理和便利的DOM操作等功能。在这个月经安全期计算器中，开发者可能使用了jQuery的`$(document).ready()`函数来确保在页面加载完成后执行某些代码。此外，`change`、`click`等事件监听器可能被用来响应用户输入和按钮点击，从而触发相应的计算。 jQuery的`$.ajax()`方法也可能被用于异步请求，比如，如果应用需要与服务器通信以获取更精确的月经周期数据或存储用户的个人设置。当然，考虑到这是一个本地应用，可能没有实际的网络请求，而是直接使用JavaScript处理和存储用户输入的数据。月经安全期的计算逻辑会涉及到生物学知识，尤其是女性生理周期。一般来说，安全期是指月经周期中的非排卵期，通常包括月经期和月经结束后的几天。计算方法可能包括基础体温法、宫颈黏液观察法等，但在这个应用中，最简单的方法可能是根据用户提供的月经周期长度，计算出大致的排卵日，并推算出安全期。总结来说，这个“jquery女性月经安全期计算器代码.zip”涵盖了前端开发中的多个重要方面，包括HTML5的结构设计、CSS的样式控制、jQuery的JavaScript功能利用，以及与生物学知识相结合的计算逻辑。对于想要学习和理解前端开发的初学者，这是一个很好的实践案例。

资源推荐

资源详情

资源评论

收起资源包目录

jquery女性月经安全期计算器代码.zip （18个子文件）

jquery女性月经安全期计算器代码

jiaoben3477

css

blue.css 9KB

public_v2.css 2KB

base.css 386B

userLogin.css 5KB

images

input_long_light.jpg 4KB

tri.gif 1KB

bg_safe_calendar_blue.png 3KB

buttom.png 2KB

input_long.jpg 8KB

box_bottom.png 348B

fixed_02.png 12KB

input.jpg 2KB

box_top.png 2KB

index.html 10KB

newfemale.js 19KB

userLogin.js 4KB

jquery-1.7.2.js 247KB

jquery女性月经安全期计算器代码.jpg 54KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery女性月经安全期计算器代码 - 网页模板</title> <link type="text/css" rel="stylesheet" href="css/public_v2.css" /> <link type="text/css" rel="stylesheet" href="css/base.css" /> <link type="text/css" rel="stylesheet" href="css/blue.css" /> <link href="css/userLogin.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript" src="js/newfemale.js"></script> <script language='javascript' src="js/userLogin.js"></script> <meta http-equiv="Cache-Control" content="no-transform" /> </head> <body> <INPUT style="DISPLAY: none" id=nowElement type=hidden> <div class="wrapper">   <div class="main"> <div class="mod_2b"> <h2>女性月经周期与排卵期计算器</h2> <div class="health clearfix"> <div class="mod_1b mod_safe"> <div class="time_lag clearfix"> <span>平常两次月经大概相隔：</span> <a class="minus" onclick='female.fallOff();'></a> <input type="text" id='minMensesPriod' readonly value="28"/> <INPUT type='hidden' id=minMensesing class=circleCss value=5> <a onclick='female.increase();' class="plus"></a> <a onclick='female.creset();' id='acrest' class="again" style="display:none">重新测试</a> </div> <div class="safe_detail" id='womensafeDateCon'> <div class="safe_calendar" id='chosecal'> <span class="date_first" id='popCss'>请点击选择月经第一天</span> <div class="date_select"> <span class="year" id="leftYear">2012</span> <b>年</b> <a href='javascript:void(0);' id='yearLink'></a> <span id='leftMonth' class="month">10</span> <b>月</b> <a href='javascript:void(0);' id='monthLink' class=""></a> </div> <ul class="date_detail" id='leftTable'> <li class="week">日</li> <li class="week">一</li> <li class="week">二</li> <li class="week">三</li> <li class="week">四</li> <li class="week">五</li> <li class="week">六</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> </div> <div class="safe_calendar safe_calendar_right" style='display:none' id ='rightCal'> <div class="date_select" > <span class="year" id='rightYear'>2012</span> <b>年</b> <a href='javascript:void(0);' id="rYearLink"></a> <span class="month" id='rightMonth'>10</span> <b>月</b> <a href='javascript:void(0);' id="rMonthLink"></a> </div> <ul class="date_detail" id='rightTable'> <li class="week">日</li> <li class="week">一</li> <li class="week">二</li> <li class="week">三</li> <li class="week">四</li> <li class="week">五</li> <li class="week">六</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> </div> <div class="rightLogin"> <div class="loginTitle">安全期订阅</div> <div class="userLogin">  <div class='box_main'> <div id="register" class="register"> <form id="form" action="http://www.xwcms.net/" method="post" onSubmit="return check();"> <div id="form_submit" class="form_submit"> <div class="fieldset"> <div class="field-group"> <label class="required title">订阅方式</label> <span class="control-group" style="line-height:28px;"> <input id="way_mobile" type="radio" value="mobile" name="username" id="username" checked onclick="__changeUserName('mobile');"> 手机号码 <input id="way_email" type="radio" value="email" name="username" id="username" onclick="__changeUserName('email');"> 邮箱 </span> </div> <div class="field-group" id="telSend"> <label class="required title">手机号码</label> <span class="control-group" id="mobile_input"> <div class="input_add_long_background"> <input class="register_input" type="text" id="mobile" name="mobile" maxLength="11" value="" onBlur="__changeUserName('mobile');"> </div> </span> </div> <div class="field-group" style="display:none;" id="emailSend"> <label class="required title">订阅邮箱</label> <span class="control-group" id="email_input"> <div class="input_add_long_background"> <input class="register_input" type="text" id="email" name="email" maxLength="50" value="" onBlur="__changeUserName('email');"> </div> </span> </div> <div class="field-group"> <label class="required title">通知时间</label> <span class="control-group" id="notificationTime_input"> <div class="input_add_long_background"> <input class="register_input" type="text" id="notificationTime" name="notificationTime" maxLength="50" value=""> </div> </span> </div> <div class="field-group" id="telYzm"> <label class="required title">验证码</label> <span class="control-group" id="code_input"> <div class="input_add_background" style="margin-right:15px;"> <input class="register_input_ot" type="text" id="code" name="code" max_length="6" value="" onBlur="checkAuthCode(this.value);"> </div> </span> </div> </div> </div> <div id="div_submit" class="div_submit"> <div class='div_submit_button'> <input id="submit" type="submit" value="确定" class='button_button disabled'> </div> </div> </form> </div> <script type="text/javascript"> function __changeUserName(of){ var username=$('#'+of).val(); if(of=='email'){ $("#telSend").hide(); $("#telYzm").hide(); $("#emailSend").show(); if (username.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) { showTooltips('email_input','请输入正确的Email地址!'); return; } } else{ $("#telSend").show(); $("#telYzm").show(); $("#emailSend").hide(); if(username=='' || !isMobilePhone(username)) { showTooltips('mobile_input','请输入正确的手机号码'); return; } } } function checkEmail(email) { if (email.search(/^.+@.+$/) == -1) { showTooltips('email_input','邮箱格式不正确'); }else { hideTooltips('email_input'); } } function checkAuthCode(authcode) { if (authcode == '' || authcode.length != 6) { showTooltips('code_input','验证码不正确'); }else { hideTooltips('code_input'); } } function check() { var ckh_result = true; var getSelectValue= $("input[name='username']:checked").val(); if(getSelectValue=='mobile') { hideAllTooltips(); if($('#mobile').val()=='' || !isMobilePhone($('#mobile').val())) { showTooltips('mobile_input','手机号码不正确'); ckh_result = false; } if ($('#code').val() == '' || $('#code').val().length !=6) { showTooltips('code_input','验

评论收藏

内容反馈

版权申诉