js定时器、js函数、变量和参数问题
js定时器
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
定时器在javascript中的作用
1、制作动画
2、异步操作
定时器类型及语法
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码 setInterval() 和 setTimeout() 是 Window对象的两个方法。
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<script>
/*
1.单次定时器 setTimeout
格式:setTimeout(回调函数,等待时间(毫秒))
指定等待时间之后执行特定的功能(代码)
只执行一次
清除单词定时器 clearTimeout(要清除的定时器的标识符)
2.循环定时器 setInterval()
格式:setInterval(回调函数,间隔时间(毫秒))
间隔指定时间执行一次特定的代码块
清除定时器: 我们启动定时器之后,会返回一个标识符,通过这个标识符来清除定时器
clearInterval(要清除的多次定时器的标识符)
*/
function demo(){
console.log('定时器执行')
}
// setTimeout(function(){
// console.log('单次定时器启动了')
// },3000)
// setTimeout(demo,3000);
var i=0;
var set=setInterval(function(){
console.log("定时器已经启动");
// i++;
},2000);
console.log(set);
setTimeout(function(){
//清除定时器
console.log("清除定时器启动")
clearInterval(set);
},6000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
#item1{
width:50px;
height:50px;
background:green;
}
</style>
</head>
<body>
<div id="item1"></div>
<script>
// 获取元素对象
var oDiv=document.getElementById('item1');
// 启动一个多次定时器 让div的宽度逐渐变大
var i=50;
var set=setInterval(function(){
// 间隔500毫秒 让div的宽度加1
i++;
oDiv.style.width=i+'px';
oDiv.style.height=i+'px';
// 当div的宽高等于200的时候 停止定时器
if(i==200){
clearInterval(set);
}
},33);
</script>
</body>
</html>
js函数
第一种是使用function语句定义函数
function abc(){
alert('abc');
}
第二种是在表达式中定义函数
var 函数名 = function\(参数1，参数2，…\){函数体};
//例如：
//定义
var add = function\(a,b\){
return a+b;
}
//调用函数
document.write\(add\(50,20\)\);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js当中的函数定义方法</title>
</head>
<body>
<script>
// 1.使用function 关键字来定义函数
// 这种方式优先级较高 在那个位置去掉用都没有问题
// 函数不调用不执行
// 调用函数
//demo();
// function demo(){
// alert('函数被调用了');
// }
// 2.在表达时当中定义函数(匿名函数)
// 函数只能在函数体下方去调用
var demo1=function(){
alert('这是匿名函数');
};
console.log(demo1);
demo1()
</script>
</body>
</html>
arguments
在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。
例如，在函数 sayHi() 中，第一个参数是 message。用 arguments[0] 也可以访问这个值，即第一个参数的值（第一个参数位于位置 0，第二个参数位于位置 1，依此类推）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的参数问题</title>
</head>
<body>
<script>
/*
在函数调用的时候,不传实参函数依然可以执行,形参返回undifiend
多穿参数,多余的参数会别省略
在函数内部可以通过arguments这个属性获取所有传进来的参数,类型时数组类型
*/
function demo(a,b){
console.log('函数被调用了');
console.log(arguments);
for(i in arguments){
console.log(arguments[i])
}
}
demo(1,2,3,4);
</script>
</body>
</html>
关于变量和参数问题：
函数外面定义的变量是全局变量，函数内可以直接使用。
在函数内部没有使用var定义的=变量则为全局变量，
*在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量作用域</title>
</head>
<body>
<script>
/*
全局变量: 在函数外部使用声明的变量是全局变量
局部变量:在函数内部声明的变量是局部变量
如果函数内部有同名的局部变量,那么说内部优先使用局部变量的值
全局变量的作用域发生了改变,变成了局部变量,局部变量的值发生变化不会影响我们的全局变量
在函数内部不使用var声明的变量是全局变量
*/
var a=1;//全局变量
function demo(){
a=6;
var a=0;//局部变量
b=10;
console.log(a);
}
//console.log(a);
demo();
console.log(a);
console.log(b);
</script>
</body>
</html>