JS函数

最新推荐文章于 2023-01-27 21:46:22 发布

原创最新推荐文章于 2023-01-27 21:46:22 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS

第四章函数

第一节、函数的基本结构

函数: 是指实现了特定功能的代码块，能够被反复调用。

语法:

function 函数名(参数1,参数2,参数3,...)
{
    函数功能代码;
    return 函数返回值；
}

说明:

function:用于定义函数的关键字

函数名:使用者自己定义，命名规则:字母，数字，下划线，$，数字不能开头。小驼峰的命名方式,例如: getNum()

参数列表:在函数名后面的小括号中定义参数列表，参数可多可少，也可以没有。

函数功能代码:当前函数要实现的特定功能，是函数的核心内容。

return 返回值:在函数执行完成之后，可以通过return关键字，返回函数处理的结果。可以省略。

1.无参无返回值的函数

 <script type="text/javascript">
  //定义函数：无参数，无返回值
  function sayHello()
  {
	alert("你好,Javascript");

  }

  //调用函数
  sayHello();
  </script>

2.无参有返回值的函数

 //获取1-100的随机数
  //无参数，有返回值的函数
  function getNum()
  {
    //生成1-100的随机数
	var r = parseInt(Math.random()*100+1);
	//设置函数的返回值
	return r;
  }
  //调用函数，获取三个随机数
  var num1 = getNum();
  var num2 = getNum();
  var num3 = getNum();
  //提示信息
  alert(num1+" "+num2+" "+num3);

注意:如果函数的最后没有使用return返回结果，此时如果使用变量接受函数，则接受的数据为undefined。

//获取1-100的随机数
  //无参数，有返回值的函数
  function getNum()
  {
    //生成1-100的随机数
	var r = parseInt(Math.random()*100+1);
	//设置函数的返回值
	//return r;
  }
  //调用函数，获取三个随机数
  var num1 = getNum();
  var num2 = getNum();
  var num3 = getNum();
  //提示信息
  alert(num1+" "+num2+" "+num3);

3.有参数无返回值的函数

 //定义函数
  //row:形式参数，等价于函数中的一个变量
  function showSanJiao(row)
  {
	//输出三角形
	for(var i=1;i<=row;i++)
	{
		for(var j=1;j<=i;j++)
		{
			document.write("*");
		}
		document.write("<br/>");
	}
  }
  //调用函数
  //3:实际参数
  showSanJiao(3);

//统计任意数值区间的和

<script type="text/javascript">
	//求和
	function sum(start,end)
	{
		var he = 0;
		for(var i=start;i<=end;i++)
		{	
			he+=i;
		}
		document.write(start+"-"+end+"的和:"+he);
	}
	//调用
	sum(3,50);
	document.write("<br/>");
	sum(2,200);
  </script>

4.有参数有返回值的函数

<script type="text/javascript">
	//求和
	function sum(start,end)
	{
		var he = 0;
		for(var i=start;i<=end;i++)
		{	
			he+=i;
		}
		return he;
		//document.write(start+"-"+end+"的和:"+he);
	}
	//调用
	var res = sum(3,50);
	alert(res);
	//document.write("<br/>");
	//sum(2,200);
  </script>

//输入月份，返回该月份的天数

<script type="text/javascript">
  //根据月份，获取该月份的天数
  function getDay(month)
  {
	var day = 0;
	//1-12
	switch(month)
	{
		case 1:
		case 3:
		case 5:
		case 7:
		case 8:
		case 10:
		case 12:
			day=31;
			break;
		case 4:
		case 6:
		case 9:
		case 11:
			day=30;
			break;
		case 2:
			day=28;
			break;
		default:
			day="月份无效";
			break;
	}
	return day;
  }

  var m = parseInt(prompt("请输入月份:",""));
  var res = getDay(m);
  alert("天数:"+res);

  </script>

5.匿名函数

<script type="text/javascript">
	//定义匿名函数
	/*var x = function(){
				alert("你好");
			}
	x();*/

	function calc(s1,s2,fn)
	{
		var res = fn(s1,s2);
		alert(res);
	}
	var add = function(n1,n2){
				return n1+n2;
			  }
	var sub = function(n1,n2){
				return n1-n2;
			  }
	calc(100,200,sub);
	
	//alert(add(1,2));
	//var r = add(1,2);
	//alert(r);
  </script>

第二节网页中的事件和函数调用

1.事件

事件就是发生了一件事，通常我们会将事件和特定的方法绑定到一起，当事件触发的时候，程序自动执行绑定的方法，以此完成特定的程序处理。这就是程序的事件驱动机制。

	//事件 onclick单击事件 onmouseover鼠标悬浮事件
	//所有表单元素有value属性
	//document.getElementById().value

	//非表单元素没有value属性
	//获取这类元素的文本
	//document.getElementById().innerHTML
	//alert(document.getElementById("div1").innerHTML);
	//设置元素样式
	//document.getElementById().className=""
	//通过js设置元素样式(行内样式，类样式)
	//document.getElementById("div1").className="c1";
	//document.getElementById("div1").style.backgroundColor="red";

	//箭头函数 js6新增函数写法
	// var f= (参数)=>{ 函数内容...}
	//如果函数代码只有一行并有返回值则可以写成如下方式：
	// var add=(num1,mum2)=>num1+num2;
	var add= (num1,num2) => num1-num2;
	alert(add(77,9));

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
  function test()
  {
	alert("你点我了");
  }

  //修改网页背景
  function changeBg()
  {
	//alert(123);
	//修改文档的背景
	//document.bgColor="red";


	//document:网页的内置对象
	//body:对应于body标签的一个对象
	//style:网页元素的样式对象
	//backgroundColor:背景颜色样式属性

	//document.body.style.backgroundColor="blue";
	if(document.body.style.backgroundColor=="blue")
	{
		document.body.style.backgroundColor="red";
	}
	else
	{
		document.body.style.backgroundColor="blue";
	}
  }

  </script>
 </head>

 <body>
  <input type="button" value="测试" οnclick="test()"/>
  <button type="button" οnclick="changeBg()">修改背景</button>
 </body>
</html>

2.简易计算器

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	function calc(c)
	{
		switch (c)
		{
			case '+':
				document.getElementById("res").value=Number(document.getElementById("num1").value)+Number(document.getElementById("num2").value);
				break;
			case '-':
				document.getElementById("res").value=Number(document.getElementById("num1").value)-Number(document.getElementById("num2").value);
				break;
			case '*':
				document.getElementById("res").value=Number(document.getElementById("num1").value)*Number(document.getElementById("num2").value);
				break;
			case '/':
				document.getElementById("res").value=Number(document.getElementById("num1").value)/Number(document.getElementById("num2").value);
				break;
			default:
				alert("错误");
				break;
		}
	}
  </script>
 </head>
 <body>
  <table>
  <caption>计算器</caption>
  <tr>
	<td>数据1</td>
	<td><input type="text" id="num1"></td>
  </tr>
  <tr>
	<td>数据2</td>
	<td><input type="text" id="num2"></td>
  </tr>
  <tr>
	<td></td>
	<td>
		<input type="button" value="+" οnclick="calc('+')"/>
		<input type="button" value="-" οnclick="calc('-')"/>
		<input type="button" value="*" οnclick="calc('*')"/>
		<input type="button" value="/" οnclick="calc('/')"/>
	</td>
  </tr>
  <tr>
	<td>结果</td>
	<td><input type="text" id="res"></td>
  </tr>
  </table>
 </body>
</html>

3.js代码访问html标签

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 #d1
 {
	width:300px;
	height:200px;
	border:1px solid red;
 }
 /*定义类样式*/
 .c1
 {
	color:red;
	font-size:40px;
	background-color:blue;
 }
  </style>

  <script type="text/javascript">
	//设置文本框的数据
	function setTxt()
	{
		//获取文本框元素
		var txtmz = document.getElementById("mingzi");
		txtmz.value="张三";
	}
	//获取表单元素的数据
	function getTxt()
	{
		var txtmz = document.getElementById("mingzi");
		alert(txtmz.value);
	}
	//设置非表单元素的内容
	function setDiv()
	{
		var div = document.getElementById("d1");
		//div.value="我的测试";
		div.innerHTML="我的测试";

		//设置元素的样式
		/*div.style.color="red";
		div.style.backgroundColor="green";
		div.style.border="2px dashed black";*/
		
		//设置元素的类样式
		div.className="c1";
	}

	function getDiv()
	{
	    //获取元素的内容
		var div = document.getElementById("d1");
		alert(div.innerHTML);
	}
  </script>
 </head>

 <body>
  <!--所有表单元素都有value属性-->
  <input type="button" value="设置表单元素的数据" οnclick="setTxt()"/>
  <input type="button" value="获取表单元素的数据" οnclick="getTxt()"/><br/><br/>
  <input type="text" name="mingzi" id="mingzi"/>
  <hr/>
  <!--非标单元素通常没有value属性-->
  <button type="button" οnclick="setDiv()">设置非表单元素的内容</button>
  <button type="button" οnclick="getDiv()">获取非表单元素的内容</button>
  <div id="d1"></div>
 </body>
</html>

4.通过js实现图片替换动画

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
  var count=0;
	function pre()
	{
		count--;
		if(count==-1)
		{
			count=9;
		}
		document.getElementById("tupian").src="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif";
		document.getElementById("url").innerHTML="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif";
	}
	function next()
	{
		count++;
		if(count==10)
		{
			count=0;
		}
		document.getElementById("tupian").src="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif";
		document.getElementById("url").innerHTML="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif";

	}
  </script>
 </head>
 <body>
<div id="url"></div>
	<img id ="tupian" src="../QY106/QY106-JS/lesson5/代码/image/js0.gif"/>
	<input type="button" οnclick="pre()" value="上一张"/>
	<input type="button" οnclick="next()" value="下一张"/>
 </body>
</html>

小结

//通过HTML元素，触发js函数的执行
<元素 事件名="函数名()"/>
<input type="button" οnclick="test()"/>
<div id="d1" οnclick="setDiv()"></div>
<div id="d1" οnmοuseοver="setDiv()"></div>
onclick:单击事件
onmouseover:鼠标悬浮事件

//通过js访问HTML元素
1.表单元素
获取表单元素数据: 
var bl = document.getElementById("表单元素id").value;
设置表单元素数据
document.getElementById("表单元素id").value="数据"

2.非表单元素
获取非表单元素的内容
var nr = document.getElementById("非表单元素id").innerHTML;
设置非表单元素的内容
document.getElementById("非表单元素id").innerHTML="数据";

3.通过js设置元素样式
设置元素的行内样式
document.getElementById("元素id").style.color="字体颜色";
设置元素的类样式
document.getElementById("元素id").className="类样式名";

第三节箭头函数

箭头函数:类似于匿名函数，是在ECMAScript6中新增的函数写法。

1.无参数无返回值的函数

 var f = ()=>{ alert("你好");}
 f();

2.无参数有返回值的函数

  var sjs = () =>{
   
		var r =parseInt(Math.random()*100+1);
		return r;
   }

   var r1 = sjs();
   var r2 = sjs();
   var r3 = sjs();
   alert(r1+" "+r2+" "+r3);

3.有参数无返回值

	var add = (num1,num2)=>{
		document.write("和:"+(num1+num2));
	}

	add(100,200);

4.有参数有返回值

//有参数，有返回值
	/*var add = (num1,num2)=>{
		var sum = num1+num2;
		return sum;
	}*/
	//如果函数代码只有一行，并且需要返回，可以写成如下格式
	var add = (num1,num2)=>num1+num2;
	alert(add(1,2));

5.猜数字

使用Math.random()生成一个1-100的随机数，让用户在文本框中，猜这个值。如果大了就提示猜大了，小了则提示猜小了。直到猜中为止。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
  
  var num=parseInt(Math.random()*100+1);
	function a(){if (document.getElementById("guessBox").value>num)
	  { 
		  document.getElementById("tip").innerHTML="猜大了";
	  }
	  else if(document.getElementById("guessBox").value<num)
	  {
		  document.getElementById("tip").innerHTML="猜小了";
	  }
	  else
	  {
		  document.getElementById("tip").innerHTML="恭喜你猜对了";
	  }
	  }
  </script>
 </head>
 <body οnlοad="document.getElementById('guessBox').value=''">
 <fieldset>
 <form>
 <legend>猜数字</legend>
 <input type="text" id="guessBox" value="" />
 <input type="button" value="猜" id="guess" οnclick="a()"/>
 <p id="tip"></p>
 </form>
 </fieldset>
 </body>
</html>
<script>document.getElementById("guessBox").value="";</script>