您當前位置：首頁 > web前端 > htmlcss > javascript基礎復習之函數，定時器，erval函數

javascript基礎復習之函數，定時器，erval函數

來源：程序員人生發布時間：2016-12-01 15:06:56 閱讀次數：5662次

Function對象

JS中函數就是Function對象

函數名就是指向Function對象的援用

使用函數名就能夠訪問函數的對象

函數名()是調用函數

function 函數名 ([參數]) {
函數體；
return 返回值；
}

定義函數對象

函數的返回值

默許返回undefined

可使用return返回具體的值

函數的重載

JS的函數沒有重載
調用時只要函數名1樣，不管傳入多少個參數，調用的都是同1個函數
沒有接收到實參的參數值是undefined
所有的參數傳遞給arguments數組對象

JS傳參比較靈活

比如定義了

function sum(a,b){}

然后傳入參數 sum(1,2,3,4);也能夠

由于JS會把傳入的參數封裝到1個名為arguments的數組中，然后把arguments傳給函數

相當于在定義的函數中有個 arguments[0];

然后用arguments去給參數賦值
就是

a = arguments[0];
b = arguments[1];

由于arguments是1個數組所以還有點length屬性，獲得函數參數的個數。【i】還可以獲得指定的參數。

?。?！可以利用arguments實現可變參數的函數。

使用arguments摹擬重載

function sum(){
    var sum=0;
    for(var i=0;i<arguments.length;i++){
        sum+=arguments[i];

        }
      return sum;
    }

不管傳入幾個參數，都會進行加和運算，由于用的arguments數組，由于每一個傳入函數的參數都會先存到arguments數組中，然后在函數里對這個數組里面的值進行操作，就能夠實現重載的效果了……………………

66666666，JS這個地方確切666啊

使用Function對象創建函數

使用Function對象直接創建函數
var functionName = new Function(arg1,…argN,functionBody);

var add = new Function(“x”,”y”,”return(x+y);”);
var result = add(2,3);
alert(result); //5
alert(add);//彈出方法的文本

匿名函數

創建匿名函數
var func = function(arg1,……argN){ 函數體 return 返回值 }

也能夠把匿名函數在sort（）函數中用，把匿名函數寫在sort的參數中，就是和那個compare函數1個意思了~~~

全局函數

全局函數可用于所有的javascript對象
經常使用的全局函數有：
parseInt/parseFloat
isNaN
eval

eval函數

用于計算表達式字符串，或用于履行字符串中的javascript代碼
只接受原始字符串作為參數
如果參數中沒有合法的表達式和語句，則拋出異常

例如：

var s1 = “2+3”;
s1; //2+3;
eval(s1);//5

var s2 = “var n = 5;console.log(n);”

這里寫圖片描述

就是可讓寫的字符串當作js代碼運行~~~

1般用來做計算器。。。科學計算器。。。

主要函數：

<script type="text/livescript">
function cal(){
    var input = document.getElementById("exp");
    var span = document.getElementById("result");
    //獲得文本當中的字符串
    var exp = input.value;
    //將此字符串當作1個表達式來履行，兩邊加個括號，避免履行特殊的函數,,但還是可以直接履行alert（）...；
    var  r  = eval("("+exp+")");
    span.innerHTML = r;
    }
</script>

這里寫圖片描述

還是可以運行alert（）

這里寫圖片描述

寫簡單計算器好簡單。。。。。

JS的外部對象

BOM

就是閱讀器對象模型，用來訪問和操作閱讀器窗口，使javascript有能力與閱讀器對話
通過使用BOM，可移動窗口，更改狀態欄文本、履行其他不與頁面內容發送直接聯系的操作
沒有相干標準，但被廣泛支持

閱讀器提供的API，能夠對閱讀器進行操作。

windows——閱讀器

子對象：
history——–歷史信息
loaction——地址欄
screen——–窗口
navigator—-基本信息
document—文檔對象：頁面的內容（還很復雜，還有很多下級）

這些個1起稱之為BOM 閱讀器對象模型

BOM中包括DOM（document）

DOM

文檔對象模型，用來操作文檔
定義了訪問和操作HTML文檔標準方法
利用程序通過對DOM樹的操作，來實現對HTML文檔數據的操作

這個DOM就是document

document是根

windows對象

window表示閱讀器窗口
所有javascript全局對象、函數和變量均自動成為window對象的成員

window對象經常使用方法：

alert（），confirm（）
setTimeout（），clearTimeout（）
setInterval（），clearInterval（）

對話框

alert（str）
提示對話框，顯示str字符串的內容
confirm(str) //用來檢測對用戶提示~
確認對話框，顯示str字符串的內容
按肯定按鈕返回true，其他操作返回false

這里寫圖片描述

肯定返回true，取消返回false；

這里寫圖片描述

定時器

多用于網頁動態時鐘，制作倒計時，跑馬燈效果等
周期性時鐘
以1定的時間間隔履行代碼，循環往復

1次性時鐘
在1個設定的時間間隔以后來履行代碼，而不是在函數被調用后立即履行

打開網頁，過1會自己出來東西。。。。定時刷新

周期性定時器

setInterval(exp,time): 周期性觸發代碼exp
exp:履行語句
time：時間周期，單位為毫秒
返回已啟動的定時器對象
clearInterval(tID): 停止啟動的定時器
tID：啟動的定時器對象

windows.setInterval(“alert(‘hello’);”,3000);
//或

windows.setInterval(func,3000);

function func(){ alert(“hello”); }

就是到那個時間就循環履行那個函數，兩種寫法，直接寫exp函數，或寫個函數，然后在exp寫函數名

這里寫圖片描述

或

這里寫圖片描述

clearInterval(定時器的名);

實例，動態時鐘

js代碼：

<script type="text/javascript">
        //定義全局變量，才能在啟動函數給全局變量賦值后，在停止函數中清除計時器。
    var a;
    function start(){
        //獲得span元素對象
        var span = document.getElementById("result");
        //設置計時器
         a = setInterval(func,1000);
        function func(){
            //創建時間對象，然后賦值給span當前時間方法返回值
            var shijian = new Date();
            span.innerHTML = shijian.toLocaleTimeString();          
            } 
    }       
        //設置停止函數，就是清除計時器
    function stop1(){               
        clearInterval(a);                   
        }   
</script>

這里寫圖片描述

點擊停止就會清除計時器，停止刷新，然后再次點擊啟動，就又會創建個計時器~~~

1次性定時器

setTimeout(exp,time): 1次性觸發代碼exp
exp: 履行語句
time: 間隔時間，單位為毫秒
返回已啟動的定時器
clearTimeout(tID): 停止啟動的定時器
tID: 啟動的定時器對象

與周期性定時器類似，就是函數名不1樣是Timeout,而周期性的是 Interval ~~~

例子，點擊刪除后，顯示操作成功，過兩秒后隱藏掉操作成功，然后再次點擊又會顯示。

<script type="text/javascript">
    function del(){
        //先顯示隱藏的內容，然后過兩秒再隱藏掉
        var p = document.getElementById("msg");
        p.className = "show";
//設置1次性定時器,寫個函數，在里面設置那個段落的classname為隱藏,然后清除定時器
       var  a=  setTimeout(function(){
            p.className ="hide";
            clearTimeout(a);
            },2000);
        }
</script>

<style type="text/css">
//設置兩種class，1個是隱藏，1個是顯示，用display屬性控制，none是隱藏，block是顯示
.hide {
    display: none;
}
.show {
    display: block;
}
</style>

在下面對那個操作成功的段落定義 id 為msg，class定義為hide（默許樣式為隱藏），然后上面獲得Byid ，在用元素對象點classname = “新的演示”即 show，就會變成顯示的了。

這里寫圖片描述

然后兩秒后隱藏。

window的經常使用屬性

screen對象
包括有關客戶端顯示屏幕的信息
經常使用于獲得屏幕的分辨率和色采
經常使用屬性
width/height //寬高
availWidth/availHeight //可用的寬高

這里寫圖片描述

可用的和現在的1樣，是由于我把windows的下邊的欄給默許隱藏了~

history對象
包括用戶（在閱讀器窗口中）訪問過的URL
length屬性：閱讀器歷史列表中的URL數量
方法
back()
forward()
go(num)

alert(history.legth);
history.forward(); //同等于單擊“前進”按鈕
history.back(); //同等于單擊“后退”按鈕
history.go(⑵); //同等于單擊兩次“后退”按鈕寫2就是前進兩步

location對象

包括有關當前URL的信息
經常使用于獲得和改變當前閱讀的網址
href屬性：當前窗口正在閱讀的網頁地址
方法：
reload(): 重新載入當前網址，同時刷新按鈕

loaction.href=”http://www.163.com”;
這個就跳轉到163了

這里寫圖片描述

reload（）是重新刷新下頁面

navigator對象
包括有關閱讀器的信息
經常使用于獲得客戶端閱讀器和操作系統信息

navigator.userAgent

這里寫圖片描述

“Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36”

例子：秒表計時器

js代碼：

<script type="text/javascript">
var a;
    function start(){
        var i=0;
        var span = document.getElementById("result");
         a = setInterval(function(){

                    span.innerHTML =i+"s";
                    i+=1;           
            },1000);
        }   
    function stop(){

        clearInterval(a);

        }
    function qingling(){
        var span = document.getElementById("result");
        span.innerHTML ="";
        }

</script>

例子2：用1次性定時器實現點擊圖片，然后圖片放大，過兩秒后再變回去

js代碼：

<script type="text/javascript">

    function change(){
//獲得圖片對象
        var image = document.getElementById("image");
//設置圖片的樣式變大
        image.className="da";
//設置當1次性定時器，2s后變回去。
        var a = setTimeout(function(){
            image.className = "xiao";           
            },2000);
        }
</script>

<style type="text/css">
.xiao{
    width:100px;
    height:100px;       
    }
.da{
    width:200px;
    height:2oopx;

    }

</style>