一个儿童身高测试的js特效实例-JS特效-爱易网页

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

日期：2014-05-18　浏览次数：20249 次

以下是程序代码

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(){</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="2218">下一篇：一则考试测试题实时答题进度js特效代码</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34128' title='传苹果已告知鸿海：两款新iPhone下月发货' target="_blank">
                        传苹果已告知鸿海：两款新iPhone下月发货</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10842' title='诺基亚仍是第二大手机商：功用机有利可图' target="_blank">
                        诺基亚仍是第二大手机商：功用机有利可图</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34346' title='中兴引进黑莓三个核心团队' target="_blank">
                        中兴引进黑莓三个核心团队</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10809' title='阿里马云：我觉得互联网还有十年可以做 ' target="_blank">
                        阿里马云：我觉得互联网还有十年可以做 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34151' title='京东封杀财付通：终极目标是电商生态圈' target="_blank">
                        京东封杀财付通：终极目标是电商生态圈</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34161' title='HTC曝出特大丑闻：高管诈骗＋商业间谍' target="_blank">
                        HTC曝出特大丑闻：高管诈骗＋商业间谍</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/676' title='惠普中国转型只是缩影 未来开展不可预期' target="_blank">
                        惠普中国转型只是缩影 未来开展不可预期</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34243' title='华为野心布局未来：投资研发5G对赌1毫秒连接' target="_blank">
                        华为野心布局未来：投资研发5G对赌1毫秒连接</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6908' title='小米2S试水高端化 纯“性价比”玩法已成过去式' target="_blank">
                        小米2S试水高端化 纯“性价比”玩法已成过去式</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：261人　
        网站在11时20分33秒内访问总人数：157110人
    当前 49.56%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>