JS Demo

    技术2022-05-18  15

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>

      <title> New Document </title>

      <meta content="text/html;charset=gbk">    <script type="text/javascript">  window.οnlοad=function(){  //根据用户的性别相应的显示  document.getElementById("male").οnclick=function(){   document.getElementById("man").style.display="block";      document.getElementById("woman").style.display="none";  }  document.getElementById("female").οnclick=function(){   document.getElementById("woman").style.display="block";   document.getElementById("man").style.display="none";  }    //计算结果的函数 function getResult(){  //用变量存储复选框被选择的情况,得到布尔型值  var sex1=document.getElementById("male").checked;  var sex2=document.getElementById("female").checked;    var yourmoney=document.getElementById("yourmoney").value;  if(sex1){   var yoursmoke=document.getElementById("yoursmoke").value;   var yourdrink=document.getElementById("yourdrink").value;  }  else{   var yourface=document.getElementById("yourface").value;   var yourcloth=document.getElementById("yourcloth").value;  }  var result=0;  if(sex1){   result=yourmoney-yoursmoke-yourdrink;  }else if(sex2){   result=yourmoney-yourface-yourcloth;  }  return result;   } function showResult(name,age,money,result){  var str=name+"您好,您的年龄是"+age+",您的月收入是"+money+".<br>根据计算您的月结余为"+result+",感谢参与!";  var div=document.createElement("div");  div.innerHTML=str;  document.body.appendChild(div); } document.getElementById("submit").οnclick=function(){  var isok=confirm("是否确认提交数据?点【确定】提交,点【取消】放弃");  if(isok){   var name=document.getElementById("name").value;   var age=document.getElementById("age").value;   var yourmoney=document.getElementById("yourmoney").value;   var yourresult=getResult();   showResult(name,age,yourmoney,yourresult);  } }   }  </script> 

     </head>

     <body>    <form> 性别:<input type="radio" name="sex" id="male">男 <input type="radio" name="sex" id="female">女<br> 姓名:<input type="text" id="name" value=""><br> 年龄:<input type="text" id="age" value=""><br>    月收入:<input type="text" id="yourmoney" value=""><br> <div id="man" style="display:none"> 月抽烟花费:<input type="text" id="yoursmoke" value=""><br> 月喝酒花费:<input type="text" id="yourdrink" value=""><br>     </div> <div id="woman" style="display:none"> 月美容花费:<input type="text" id="yourface" value=""><br> 月购置衣物花费:<input type="text" id="yourcloth" value=""><br> </div> <hr /> <input type="button" id="submit" value="提交"><input type="reset" value="重置"><br>  </form>   </body></html>


    最新回复(0)