注册 | 登陆

您的位置：阿里西西 > 网页特效 > 实例特效 > 详细内容

一个儿童身高测试的js特效实例

稿源：互联网 2022-04-02 21:38:20 点击： 5811 撤稿纠错

注解：<br> 儿子成年身高=[(父身高+母身高)/2]×1.08 女儿成年身高=(父身高×0.923+母身高)/2 错误提示有：没选择儿童性别！输入父母身高不是数字！输入父母身高要都是55-250之间！

以下讨论的是和儿童相关的一个儿童身高测试的js特效实例教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<style type="text/css">

body,td,th {font-size: 12px;}
a {color:#006699; text-decoration:none;}
a:hover {color:#f60;text-decoration:underline;}
dd,dl,ul,li,p,form{ margin:0; padding:0;list-style-type:none;}
h1,h2,h3,h4,h5{font-size:14px;margin:0; padding:0; line-height:28px;}
.but{color:#FF8320; border:1px solid #ccc; background:#fff;cursor:pointer;height:25px; line-height:25px;width:80px;}

.checkbox{border:1px solid #FFD7B7; margin:5px auto; background:#FFFBF4; padding:15px; width:600px;}
.Test ul{ margin:0; padding:0;}
.Test li{ border:1px solid #FFFBF4; margin-bottom:4px; cursor:pointer; width:100%; height:30px; line-height:30px; padding-left:5px; background:#FFFBF4}
.Test li.myBox{ border:1px solid #e7e7e7; background:#f7f7f7;}
.Problem{}
.hidden{ display:none;}
#Result p{ margin:8px; padding:8px; line-height:25px;background:#FFF; width:560px; border:1px dotted #FF8E20;}
#Result i{ color:red; font-size:16px; font-style:normal;}
#fu,#mu{ color:#ccc;}
</style>
<div class="checkbox">
<div class="Test">
    <div id="Problem" >
        <h3>儿童身高预测</h3>
   <form action="" method="get">
  <ul>
   <li>儿童性别：<input name="gender" type="radio">男孩<input name="gender" type="radio"> 女孩 </li>
 　　　　<li>爸爸的身高：<input type="text" size="8" maxlength="8" id="fu" fu="例：175" value="例：175" onClick="if(this.getAttribute('value')==this.getAttribute('fu'))this.value=''" onBlur="if(this.value=='')this.value=this.getAttribute('fu');"> 厘米</li>
 　　　　<li>妈妈的身高：<input type="text" size="8" maxlength="8" id="mu" mu="例：165" value="例：165" onClick="if(this.getAttribute('value')==this.getAttribute('mu'))this.value=''" onBlur="if(this.value=='')this.value=this.getAttribute('mu');"> 厘米</li>
  </ul>
        <input type="button"  class="but"  id="btn" value="查看结果" />　
  <input type="button"  class="but"  id="reset" value="重新测试" onclick=""/>
 </form>
    </div>

    <div id="Result" >
       <h3>测试结果</h3>
    <p>
　   小孩未来的身高是：<i id="Result2">未知</i> 厘米
    </p>
    </div>
</div>
</div>
<script type="text/javascript">
 var inputs = document.getElementsByTagName("input");
 var gender_man = inputs[0],gender_woman = inputs[1],father = inputs[2],mother = inputs[3];
 var btn = document.getElementById("btn"),reset = document.getElementById("reset"),result = document.getElementById("Result2");
 
 var isNum = /^-?d+(?:.d*)?(?:e[+-]?d+)?$/i;
 

 
 btn.onclick = function(){
 var parseF = parseInt(father.value);
 var parseM = parseInt(mother.value);
 if(parseF>=250||parseF<=55||parseM>=250||parseM<=55)
    {
     alert("您好 ！输入父母身高要都是55-250之间！");
     }
     else if(!isNum.test(father.value)||!isNum.test(mother.value))
     {
      alert('输入父母身高不是数字！');
      }
     else
     {
  if(gender_man.checked){
   if(!isNum.test(father.value)) return;
   result.innerHTML = parseInt(((parseF+parseM)/2)*1.08);
   
  }else if(gender_woman.checked){
   if(!isNum.test(mother.value)) return;
   result.innerHTML = parseInt((parseF*0.923+parseM)/2);
  }else{
   alert('请选择性别！');
  }
     }
 };
 reset.onclick = function(){
  result.innerHTML = '未知';
  father.value = '例：175';
  mother.value = '例：165';

 };
 
</script>

注解：<br>


儿子成年身高=[(父身高+母身高)/2]×1.08<br>

女儿成年身高=(父身高×0.923+母身高)/2<br>


错误提示有提示：<br>
没选择儿童性别！<br>
输入父母身高不是数字！<br>
<font color="red">输入父母身高要都是55-250之间！</font> 这条提示怎么加上去呀<br>
</body>
</html>

关于一个儿童身高测试的js特效实例的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011121777310.shtml方便下次再访问哦。

·上一篇： 根据滚动条位置逐屏动态加载内容的JS特效
·下一篇： 一则考试测试题实时答题进度js特效代码

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

最新新闻