JavaScript隐藏效果的实现

最新推荐文章于 2024-08-13 08:52:29 发布

conwinner

最新推荐文章于 2024-08-13 08:52:29 发布

阅读量334

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/kangnianguo/article/details/86639279

版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

写三个文件，然后实现四则计算和计算长方形的面积

1、Cat.class.php
定义一个类，类名为Cat；
2、Cat.view.php
定义html的界面
3、Cat.php
处理结果

当时犯的错误：

1、忘记引入文件
require_once ‘Cat.class.php’;
2、变量名没有对应，以及忘记 $ ;

关键思路：

定义两个 radio ，然后通过这两个 radio ，可以分别定义不同的显示样式（通过JavaScript的onclick事件），实现一个显示一个隐藏的效果；然后通过点击 radio 时提交的 name ，判断执行哪个过程。

关键代码：

1、嵌入 radio 的事件

onclick="seltype('jisuan')" 
<input type="radio" name="typ" value="jisuan" onclick="seltype('jisuan')" />

2、JavaScript部分代码，实现一个显示，一个隐藏效果

<script lanuage="javascript">
	function seltype(val){
		if(val=="jisuan")
		{
			div1.style.display="block";
			div2.style.display="none";
		}
｝
</csript>

代码如下

###########Cat.view.php#########

<!DOCTYPE HTML>
<html>
<head>
<title>计算结果</title>
<script lanuage="javascript">
	function seltype(val){
		if(val=="jisuan")
		{
			div1.style.display="block";
			div2.style.display="none";
		}
		else if(val=="calArea")
		{
			div1.style.display="none";
			div2.style.display="block";
		}
	}
</script>
</head>

<body>
<h1>聪明猫</h1>
<form action="Cat.php" method="post">
<input type="radio" name="typ" value="jisuan" onclick="seltype('jisuan')" />四则运算
<input type="radio" name="typ" value="calArea" onclick="seltype('calArea')" />计算矩形<br/>
<div style="display:block" id="div1">

请输入第一个数<input type="text" name="num1"/><br/>
请输入第二个数<input type="text" name="num2"/><br/>
请选择运算符号
<select name="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<br/>
<input type="submit" value="四则运算"/>
</div>
<br/>
<div style="display:none" id="div2">
请输入长<input type="text" name="long"/><br/>
请输入宽<input type="text" name="width"/><br/>

<input type="submit" value="计算面积"/>
</div>
</form>


</body>
</html>

##################Cat.class.php##################

 <?php
	class Cat{
		public function jisuan($num1,$num2,$op){
			
			$res=0;
			switch($op)
			{
				case '+':$res=$num1+$num2;break;
				case '-':$res=$num1-$num2;break;
				case '*':$res=$num1*$num2;break;
				case '/':$res=$num1/$num2;break;
				default:echo "运算符有误";
			}
			return $res;
		}
		
		public function calArea($long,$width){
			return $long*$width;
		}
	}

			
?>

######################Cat.php###############

<?php
	require 'Cat.class.php';
	$cat1= new Cat();
	
	$typ=$_REQUEST["typ"];
	
	if($typ=="jisuan")
	{
		
		$num1=$_REQUEST["num1"];
		$num2=$_REQUEST["num2"];
		$op=$_REQUEST["op"];
		echo "计算结果是：".$cat1->jisuan($num1,$num2,$op);
	}
	else if($typ=="calArea")
	{
		$width=$_REQUEST["width"];
		$long=$_REQUEST["long"];
		echo "长方形面积是：".$cat1->calArea($long,$width);
	}
	


?>