表单的显示与隐藏

xiaoyu_alive

已于 2024-01-04 14:42:26 修改

阅读量8k

点赞数 32

分类专栏：前端文章标签： html javascript css jquery 前端

于 2022-02-10 22:30:40 首次发布

本文链接：https://blog.csdn.net/xiaoyu_alive/article/details/122870024

版权

前端专栏收录该内容

7 篇文章

订阅专栏

效果：

输入框输入数据，点击显示按钮显示表单信息，显示的信息和输入框输入的内容有关，不同的输入显示不同的表单信息。 点击隐藏按钮，可以隐藏表单信息。

代码：

<!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>

在线测试工具;
绿叶学习网