函数是命名的独立的语句段,这个语句段可以被当做一个整体来引用和执行:
格式:

function 函数名(形式参数){函数体}
调用函数:函数名(实际参数);
18.1、函数只有被调用后才能执行
18.2、如果变量必须返回值、直接使用return返回、不会像java一样要考虑返回值的类型
<script type="text/javascript">
// 定义一个函数 : function
function demo2() {
return 666;
}
// 调用函数 :
alert(demo2());
</script>
18.3、如果变量必须释放参数、不需要指定参数的类别、直接使用变量即可
<script type="text/javascript">
// 定义一个函数 : function
function demo3(a, b) {
return a + b;
}
// 调用函数 :
alert(demo3(10, 20));//显示30
</script>
18.4、js中出现二个重名的函数名、后者会把上面的覆盖掉
对比java、java有重载(同名不同参)、重写(同名同参同返回值种类、方法体不一样)
演示:
<script type="text/javascript">
// 定义一个函数 : function
function demo4(a, b) {
alert("调用1...");
}
function demo4() {
alert("调用2...");
}
demo4(10, 20);
demo4();
</script>
会显示二次下面的截图:
匿名函数是没有名字的变量

function(形式参数){函数体}
调用方式:将匿名函数赋值给一个变量,通过变量名调用函数
定义函数并赋值给变量:var fn = function(形式参数){函数体}
调用函数:fn(实际参数);
演示:
<script type="text/javascript">
// 匿名函数 : 没有名称的函数
var func = function(i, u) {
alert(i + " love " + u);
}
// 调用函数 :
func("柳岩", "小白");//显示柳岩love小白
</script>
说明1 : script 标签需要放在 body 标签之后.
说明2 : window.setInterval(“字符串函数名称()”, 时间毫秒数);
说明3 : window.setInterval(函数名称, 时间毫秒数);
说明4 : window.setInterval(匿名函数, 时间毫秒数); 推荐使用
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
div {
width: 80%;
margin: 50px auto;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<img src="../img/01.jpg" alt="图片">
</div>
</body>
实现一:
<script>
// 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
// 1. 获取 img 标签
var img = document.getElementById("img");
// alert(img);
// 定义一个变量
var count = 1;
// 1.2 定义一个函数
function changeImageSrc() {
count++;
img.src = "../img/0"+count+".jpg";
// 判断
if (count == 8) {
count = 0;
}
}
// 2. 循环切换图片
// window.setInterval(函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的函数.
// 调用方式一 :
// window.setInterval("changeImageSrc()", 1000);
// 调用方式二 :
window.setInterval(changeImageSrc, 1000);
</script>
实现二:
<script>
// 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
// 1. 获取 img 标签
var img = document.getElementById("img");
// alert(img);
// 定义一个变量
var count = 1;
// 2. 循环切换图片
// window.setInterval(匿名函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的匿名函数.
window.setInterval(function() {
count++;
img.src = "../img/0"+count+".jpg";
// 判断
if (count == 8) {
count = 0;
}
}, 1000);
</script>
21.1、事件概述:
事件三要素:
1. 事件源:被的html元素(就是这个事件加给谁),就是某个(某些)html标签
2. 事件类型:某类动作,例如点击事件,移入移除事件,敲击键盘事件等
3. 执行指令:事件触发后需要执行的代码,一般使用函数进行封装
语法格式:事件源.事件类型=执行指令
21.2、常用的事件:
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script>
// 窗口 : window 对象提供了一个事件类型 onload 页面加载完成事件.
// 事件源 : window 事件类型 : 页面加载完成事件 (onload) 执行指令: 就是赋值的 function 函数.
window.onload = function () {
// 获取页面的 btn 按钮
var btn = document.getElementById("btn");
// alert(btn);
// 给 btn 按钮绑定一个事件 (单击事件 onclick)
// 事件源 : btn按钮 事件类型 : 单击事件 (onclick) 执行指令: 就是赋值的 function 函数.
btn.onclick = function () {
alert("恭喜你, 中了 500 万!");
}
}
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
到此基础结束。
本文来自电脑杂谈,转载请注明本文网址:
http://www.pc-fly.com/a/jisuanjixue/article-123356-2.html
仅从军事角度上讲