webフロントエンド-9-jsタイマー、js関数、変数とパラメータの問題
25126 ワード
jsタイマー
JavaScriptを使用することにより、関数が呼び出された直後にコードを実行する代わりに、設定された時間間隔の後にコードを実行する能力があります.私たちは時間貸し事件と呼びます.
タイマーのjavascriptにおける役割
1、アニメーションを作る2、非同期操作
タイマーの種類と文法
set Interval()-間隔で指定されたミリ秒数で指定されたコードを継続的に実行します.
setTimeout()-指定のミリ秒数を一時停止して指定のコードsetInterval()とsetTimeout()はWindowオブジェクトの2つの方法です.
*一つ目は、function文で関数を定義することです.
JavaScriptを使用することにより、関数が呼び出された直後にコードを実行する代わりに、設定された時間間隔の後にコードを実行する能力があります.私たちは時間貸し事件と呼びます.
タイマーのjavascriptにおける役割
1、アニメーションを作る2、非同期操作
タイマーの種類と文法
set Interval()-間隔で指定されたミリ秒数で指定されたコードを継続的に実行します.
setTimeout()-指定のミリ秒数を一時停止して指定のコードsetInterval()とsetTimeout()はWindowオブジェクトの2つの方法です.
:
setTimeout
clearTimeout
setInterval
clearInterval
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
<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>
<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');
}
*2番目は、式で関数を定義することです.var = function\( 1, 2,…\){ };
// :
//
var add = function\(a,b\){
return a+b;
}
//
document.write\(add\(50,20\)\);
<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, , 。
, sayHi() , message。 arguments[0]
, ( 0,
1, )。
<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 , 。
<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>