自定义函数及其调用

约定不等于承诺〃 2024-04-06 10:55 33阅读 0赞

自定义函数需要使用function关键字 例如：

> <!DOCTYPE html>  
> <html>  
> <head>  
> <meta charset="utf-8">  
> <title></title>  
> </head>  
> <body>  
> <script type="text/javascript">  
> function函数名(\[参数列表\])  
> \{  
> 程序语句  
> ...  
> \[return 返回值;\]  
> \}  
> </script>  
> </body>  
> </html>

函数的定义需要注意以下事项。  
(1)函数名区分大小写，且不能相同，  
更不能使用 JavaScript的关键字。  
(2)在function 关键字之前不能指定返  
回值的数据类型。  
(3)函数定义中\[\]是指可选的，也就是  
是说，自定义的函数可以带参数，也可以不带参  
数。如果有参数，参数可以是变量、常量或  
或表达式。自定义函数可以有返回值，也可以没  
有，如果省略了 return 语句，则函数返回 u andefined。  
(4)函数必须放在<script></script>标签之间。  
(5)函数的定义最好放在网页的<head></head>部分。  
(6)定义函数时并不执行组成该函数的代码，只有调用函数时才执行代码。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		第一个数：<input  type="text"  id="one"  />+
    		第二个数：<input  type="text"  id="two" />=
    		<input type="text" name="result" id="result" value=""/>
    		<input type="button" name="" id="" value="运算" onclick="cal()" />
    		<script type="text/javascript">
    			function cal(){
    				// 获取第一个文本内容
    				 var one =document.getElementById("one").value
    				 // 获取第二个文本内容
    				 var two=document.getElementById("two").value
    				 var result=parseFloat(one)+parseFloat(two)
    				 
    				document.getElementById("result").value=result
    			}
    		</script>
    	</body>
    </html>

## 内置函数 ##

这些函数也称为内部方法，程序可以直接调用这些函数来完成某些功能。  
1. parselnt()函数  
parseIntO函数将一个字符串按指定的进制转换为一个整数。语法格式如下(其中“0”中的内容为可选项):parseInt(numString,\[radíx\])  
第一个参数numString为要进行转换的字符串，第二个参数radix是可选的，用于指定转换后的整数的进制，默认是十进制。如果numString不能转换为一个数字，该函数将返回Na例如，parseInt("123”)、parseInt("123.45")和parseInt("123ab”)都将返回数字 123， parseInt("ab和parseInt("ab123")都将返回NaN。  
2. parseFloat()函数  
parseFloat()函数将一个字符串转换为对应的浮点数。语法格式如下:  
parseFloat(numString)  
参数numString为要转换的字符串。如果numString不能转换为一个数字，该函数将返回 NaN。例如，parseFloat("123.45")和parseFloat(123.45ab)都将返回数字 123.45，parseFloat("ab")和parseFloat("ab123.45")都将返回 NaN。  
3.isNaN()函数  
isNaN(is Not a Number)函数用于检测一个变量或一个字符串是否为 NaN。如果是，则返回 true:如果不是，则返回 false。例如，isNaN(parseInt(“ab"))将返回 true，isNaN("12”将返回 false。

下面给大家演算模拟下计算器

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		第一个数：<input  type="text"  id="one"  /><br/>
    		第二个数：<input  type="text"  id="two" /><br/>
    		运算方式：<input type="button" name="" id="" value="+" onclick="cal_1(+)"/>
    		<input type="button" name="" id="" value="-" onclick="cal_2('-')"/>
    		<input type="button" name="" id="" value="*" onclick="cal_3()"/>
    		<input type="button" name="" id="" value="/" onclick="cal_4()"/><br/>
    		运算结果: <input type="text" name="result" id="result" value=""  />
    		<script type="text/javascript">
    			function cal_1(y){
    				// 获取第一个文本内容
    				 var one =document.getElementById("one").value
    				 // 获取第二个文本内容
    				 var two=document.getElementById("two").value
    				 // 先判断输入的是否是数字
    				 // isNaN（）： 判断是否为数字，当结果为ture，表是不是数字，反之是 数字
    				 if(isNaN(one)){
    					 alert("输入的第一个不是数字")
    					 return
    				 }if(isNaN(two)){
    					 alert("输入的第二格不是数字")
    					 return
    				 }
    				var result=0
    				if(y=="+"){
    					result=parseFloat(one)+parseFloat(two)
    				}else if(y=="-"){
    					result=parseFloat(one)-parseFloat(two)
    				}
    				// 也可以用switch...case来实现
    				 // alert（result）
    				document.getElementById("result").value=result
    			}
    		</script>
    	</body>
    </html>