效果：
输入框输入数据，点击 显示按钮 显示表单信息，显示的信息和输入框输入的内容有关，不同的输入显示不同的表单信息。 点击隐藏按钮，可以隐藏表单信息。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
</style>
<script src="/js/jquery-1.12.4.min.js"></script>
</head>
<body>
<form>
<ul>
<li style="list-style-type: none;">
<div>
<span>体重：</span>
<input type="text" name="weight" required id = "txt">KG（公斤）
<!-- 点击一次按钮同时触发两个事件：在它上面再定义一个事件，点击时，会先触发它自己的事件再去执行父类的事件 -->
<span onclick = "demo()">
<input type="button" value="查看" id="btn"/>
</span>
</div>
</li>
<li id = "dv" style="display: none;">
<h3 class="sex-label">每日饮水量</h3>
共<font id="drinkGallons" color="#ff0000"></font>CC（毫升）
<h3 class="sex-label">喝水时间表</h3>
<div>
<table width="440" border="0" cellpadding="0" cellspacing="0" bgcolor="#C5D5C5" align="center">
<tbody>
<tr>
<td bgcolor="#F5F5F5" width="50">AM6:30</td>
<td bgcolor="#FFFFFF">起床之际先喝杯<font id="per0" color="#ff0000"></font>CC的水</td>
</tr>
<tr>
<td bgcolor="#F5F5F5">AM8:30</td>
<td bgcolor="#FFFFFF">给自己一杯至少<font id="per1" color="#ff0000"></font>CC的水！</td>
</tr>
<tr>
<td bgcolor="#F5F5F5">AM11:00</td>
<td bgcolor="#FFFFFF">再给自己一天里的第三杯水（<font id="per2" color="#ff0000"></font>CC）</td>
</tr>
<tr>
<td bgcolor="#F5F5F5">PM12:50</td>
<td bgcolor="#FFFFFF">用完午餐半小时后，喝一些水(<font id="per3" color="#ff0000"></font>CC)你维持身材。</td>
</tr>
<tr>
<td bgcolor="#F5F5F5">PM3:00</td>
<td bgcolor="#FFFFFF">喝上一大杯<font id="per4" color="#ff0000"></font>CC的水</td>
</tr>
<tr>
<td bgcolor="#F5F5F5">PM5:30</td>
<td bgcolor="#FFFFFF">再喝一杯水(<font id="per5" color="#ff0000"></font>CC)。</td>
</tr>
<tr>
<td bgcolor="#F5F5F5">PM10:00</td>
<td bgcolor="#FFFFFF">睡前一至半小时再喝上一杯水(<font id="per6" color="#ff0000"></font>CC)，目标达成！</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
</form>
<script>
function my(id){
return document.getElementById(id);
}
/*或者设置两个按钮
my("btn").οnclick=function(){
my("dv").style.display="none";
}
my("btn1").οnclick=function(){
my("dv").style.display="block";
}
*/
my("btn").onclick=function(){
if (this.value =="隐藏") {
my("dv").style.display="none";
this.value="查看";
} else if(this.value =="查看"){
my("dv").style.display="block";
this.value="隐藏";
}
}
</script>
<script>
function demo(){
var x;
var percentArr = [0.15,0.136,0.1454,0.136,0.1475,0.1461, 0.139];
//也可以在HTML的表单中设置<botton onclick = "demo()">点击输入</botton>，然后在此处设置如下语句实现。（效果略微不同）
//var user = prompt("输入")
//x = "您输入的" + user;
x = document.getElementById("txt").value; //一定要注意是DOM对象.value,不可以直接是DOM对象。
var drinkGallons=Math.round((((x*2.2)/2)/15)*450);
//document.getElementById("drinkGallons").innerHTML = drinkGallons;
$('#drinkGallons').text(drinkGallons);
for(var i=0; i<7; i++){
$('#per'+i).text(Math.round(drinkGallons*percentArr[i]));
}
}
</script>
</body>
</html>
在线测试工具;
绿叶学习网