表单的显示与隐藏

效果:

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

表单的显示与隐藏_第1张图片 表单的显示与隐藏_第2张图片

代码:

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:30td>
		                <td bgcolor="#FFFFFF">起床之际先喝杯<font id="per0" color="#ff0000">font>CC的水td>
		            tr>
		            <tr>
		                <td bgcolor="#F5F5F5">AM8:30td>
		                <td bgcolor="#FFFFFF">给自己一杯至少<font id="per1" color="#ff0000">font>CC的水!td>
		            tr>
		            <tr>
		                <td bgcolor="#F5F5F5">AM11:00td>
		                <td bgcolor="#FFFFFF">再给自己一天里的第三杯水(<font  id="per2" color="#ff0000">font>CC)td>
		            tr>
		            <tr>
		                <td bgcolor="#F5F5F5">PM12:50td>
		                <td bgcolor="#FFFFFF">用完午餐半小时后,喝一些水(<font id="per3" color="#ff0000">font>CC)你维持身材。td>
		            tr>
		            <tr>
		                <td bgcolor="#F5F5F5">PM3:00td>
		                <td bgcolor="#FFFFFF">喝上一大杯<font id="per4" color="#ff0000">font>CC的水td>
		            tr>
		            <tr>
		                <td bgcolor="#F5F5F5">PM5:30td>
		                <td bgcolor="#FFFFFF">再喝一杯水(<font id="per5" color="#ff0000">font>CC)。td>
		            tr>
		            <tr>
		                <td bgcolor="#F5F5F5">PM10:00td>
		                <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的表单中设置点击输入,然后在此处设置如下语句实现。(效果略微不同)
			//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>

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

你可能感兴趣的:(前端,html,javascript,css,jquery)