Effect:
Input data in the input box, click the display button to display the form information, the displayed information is related to the content entered in the input box, and different input displays different form information. Click the Hide button to hide the form information.
Code:
<!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>
Online test tool;
Greenleaf Learning Network