第四章 函数
第一节、函数的基本结构
函数: 是指实现了特定功能的代码块，能够被反复调用。
语法:
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>
1225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
