4.1如何调用函数
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function print(par1,par2,par3){
alert(par1+par2+par3);
}
</script>
</head>
<body>
<script type="text/javascript">
print("JavaScript函数","调用","方法");
</script>
</body>
image.png
4.2调用自定义函数计算三个参数的平均值
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function setValue(num1,num2,num3){
var avg=(num1+num2+num3)/3;
return avg;
}
function getValue(num1,num2,num3){
document.writeln("参数分别为："+num1+","+num2+","+num3);
var value=setValue(num1,num2,num3);
document.write("平均值为："+value);
}
</script>
</head>
<body>
<script type="text/javascript">
getValue(60,59,61);
</script>
</body>
image.png
4.3
4.4内置函数
<script type="text/javascript">
var num1="123abc";
var num2="abc123";
document.write("(1)使用parseInt函数<br>");
document.write("123abc转化结果："+parseInt(num1)+"<br>");
document.write("abc123转化结果："+parseInt(num2)+"<br><br>");
var num3="123.456abc";
document.write("(2)使用parseFloat函数<br>");
document.write("123.456abc转化结果："+parseFloat(num3)+"<br><br>");
document.write("(3)使用isNaN函数<br>");
document.write("123.456abc转化结果是否为NaN："+isNaN(parseFloat(num3))+"<br>");
document.write("abc123转化结果是否为NaN："+isNaN(parseInt(num2))+"<br><br>");
document.write("(4)使用isFinite函数<br>");
document.write("10除以10的结果是否无穷大："+isFinite(10/10)+"<br>");
document.write("10除以0的结果是否无穷大："+isFinite(10/0)+"<br><br>");
document.write("(5)使用encodeURI函数<br>");
document.write("转化为网络资源地址为："+encodeURI("http://127.0.0.1/index.html?name=测试")+"<br><br>");
document.write("(6)使用decodeURI函数<br>");
document.write("转化为网络资源地址的字符串为："+decodeURI(encodeURI("http://127.0.0.1/index.html?name=测试"))+"<br><br>");
</script>
image.png
4.5在嵌套函数中获取外部函数参数及全局变量的和
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
var outter=300;
function add(num1,num2){
function innerAdd(){
alert("参数与全局变量的和为："+(num1+num2+outter));
}
return innerAdd();
}
</script>
</head>
<body>
<script type="text/javascript">
add(100,200);
</script>
</body>
image.png
4.6递归函数取得10！的值
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function f(num){
if(num<=1){
return 1;
}else{
return f(num-1)*num;
}
}
</script>
</head>
<body>
<script type="text/javascript">
alert("10!的结果为:"+f(10));
</script>
</body>
image.png
4.7自定义函数，为文本框输入的数字取绝对值
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为数字取绝对值</title>
<script language="javascript">
function abso(){
var num=form.num.value; //获取文本框的值
if(isNaN(num)||num==""){
alert("请输入数字");
}else{
if(num>=0){
alert(num+"的绝对值是"+num);
}else{
alert(num+"的绝对值是"+num*(-1));
}
}
}
</script>
</head>
<body>
<form name="form" method="post" action="#">
<label>请输入数字：</label>
<input type="text" name="num" id="num"><br />
<input type="button" name="sub" value="提交" onclick="abso()"><p>
</form>
</body>
image.png
4.8随机生成指定位数的验证码
<head>
<title>随机产生指定位数的验证码</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="image/style.css" rel="stylesheet">
<script language="javascript">
function checkCode(digit){
//自动生成验证码
var result="";
for(i=0;i<parseInt(digit);i++){
result=result+(parseInt(Math.random()*10)).toString();
}
return result;
}
</script>
<script language="javascript">
function deal(){
result.innerHTML=" 产生的验证码："+checkCode(form1.digit.value);
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="271" height="178" border="0" cellpadding="0" cellspacing="0" background="image/result.gif">
<tr>
<td valign="top"><table width="100%" height="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" height="55"> </td>
<td width="69%" valign="bottom"><div id="result"> 产生的验证码：</div></td>
<td width="16%"> </td>
</tr>
<tr>
<td height="68"> </td>
<td align="center">
<br>
请输入要产生的验证码的位数：<br>
<br>
<input name="digit" type="text" class="wenbenkuang" id="digit" value="4">
(1-15)</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center"><input name="Submit" type="button" class="go-wenbenkuang" value="生成" onClick="deal()">
<input name="Submit2" type="button" class="go-wenbenkuang" value="刷新" onClick="window.location.reload();"></td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
image.png
跟我上机：自定义一个计算产品价格的函数values（），有两个参数cost和profit。代表成本和利润。
<script language="javascript">
function values(cost,profit){
price=cost+(cost*profit);
return price;
}
document.write(values(100,0.5));
</script>
网友评论