JavaScript函數(shù)

發(fā)布時間：2020-06-20 05:35:51 來源：網(wǎng)絡(luò) 閱讀：160 作者：bigbeatwu 欄目：web開發(fā)

1.概念

函數(shù)就是重復(fù)執(zhí)行的代碼片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>函數(shù)</title>
<script type="text/javascript">

function fnChange(){
    alert("hello world!");           /*設(shè)置函數(shù)*/
}
function fnStyle(){
    var oDiv = document.getElementById("div1");
    oDiv.style.color = 'red';
    oDiv.style.fontSize = '70px';
}
</script>

</head>

<body>

<div id="div1" onclick="fnChange()">123456</div>             <!--點擊時調(diào)用函數(shù)-->
<input type="button" name="" value="點擊" onclick = "fnStyle()">

</body>
</html>

2.提取行間事件

window.onload = function(){
var oBut = document.getElementById('btn01');
oBut.onclick = fnStyle; /將事件的屬性和一個函數(shù)關(guān)聯(lián)，函數(shù)不寫小括號，寫了會馬上執(zhí)行/
function fnStyle(){
var oDiv = document.getElementById("div1");
oDiv.style.color = 'red';
oDiv.style.fontSize = '70px';
}
}

</script>

</head>

<body>

<div id="div1" onclick="fnChange()">123456</div>             <!--點擊時調(diào)用函數(shù)-->
<input type="button" name="" value="點擊" id="btn01">

</body>

3.匿名函數(shù)

oBut.onclick = function(){
var oDiv = document.getElementById("div1");
oDiv.style.color = 'red';
oDiv.style.fontSize = '70px';
}; /匿名函數(shù),直接賦予/

**4.網(wǎng)頁換膚**

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../CSS/btn02.css" id="link01">
<script type="text/javascript">

window.onload = function(){
    var oBtn01 = document.getElementById('btn01');
    var oBtn02 = document.getElementById('btn02');
    var oLink01 = document.getElementById('link01');

    oBtn01.onclick = function(){
        oLink01.href = "../CSS/btn02.css";
    }
    oBtn02.onclick = function(){
        oLink01.href = "../CSS/btn01.css";
    }
}
</script>

<body>

<input type="button" name="" value="皮膚一" id="btn01">
<input type="button" name="" value="皮膚二" id="btn02">

</body>
</html>

5.變量與函數(shù)預(yù)解析

JavaScript解析過程分為兩個階段，先是編譯階段，然后執(zhí)行階段，在編譯階段會將function定義的函數(shù)提前，并將var定義的變量聲明提前，將它賦值為undefined，即定義前調(diào)用

6.函數(shù)傳參

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>形參</title>
<script type="text/javascript">

window.onload = function(){
    function fnChangestyle(myStyle,val){       /*形參*/
        var oDiv = document.getElementById('div1');
        oDiv.style[myStyle] = val;
    }
    fnChangestyle('color','red')      /*實參*/
}
</script>

</head>

<body>

<div id="div1">123456</div>

</body>
</html>

函數(shù)‘return’關(guān)鍵字
（1）返回函數(shù)執(zhí)行的結(jié)果
（2）結(jié)束函數(shù)的運行
（3）阻止默認行為

function fnAdd(a,b){
var c = a + b;
return c; /返回c值，結(jié)束函數(shù)/
}
var iNum = fnAdd(5,8);
alert(iNum);

7.加法運算

var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oBtn = document.getElementById('btn');

    oBtn.onclick = function(){
        var iVal01 = parseInt(oInput01.value);   /*轉(zhuǎn)化為實數(shù)*/
        var iVal02 = parseInt(oInput02.value);
        alert(iVal01+iVal02);
    }

8.條件語句

通過條件來控制程序的走向，就需要用到條件語句。

運算符
（1）算術(shù)運算符：+、 -、、 /、 %（求余）
（2）賦值運算符：=、+=、-=、=、/=、%=、++等同于加一
（3）條件運算符：==、===、>、>=、<、 <=、 != &&(而且，和)、||（或者，與）、?。ǚ瘢?/p>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>條件運算符</title>
<script type="text/javascript">

var iVal01 = 2;      /*實數(shù)型*/
var iVal02 = '2';    /*字符型*/
/*彈出相等，==，是不考慮類型*/
/*if(iVal01==iVal02){
    alert('相等')
}
else{
    alert('不相等')
}*/
/*===，考慮類型*/
if(iVal01===iVal02){
    alert('相等')
}
else{
    alert('不相等')
}
/*!5<2將運行結(jié)果取反*/
if(!5<2){
    alert('小于');
}
else{
    alert('不小于');
}
</script>

</head>

<body>
</body>
</html>

9.多重循環(huán)

（1）if語句

if(.....){
....
}
else if(....){
.....
}
else{
......
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>切換</title>
<style type="text/css">

div{
    width: 100px;
    height: 300px;
    background-color: aqua;
}
</style>

window.onload = function(){             /*整個頁面加載完成后，在加載*/
    var oIpt = document.getElementById('ipt');
    var oDiv = document.getElementById('div1');

    oIpt.onclick = function(){
        if(oDiv.style.display=="block" || oDiv.style.display==""){        
            /*用if語句切換，第一步，oDiv.style.disply讀取屬性值，如果沒有寫等于null，執(zhí)行else*/
            oDiv.style.display = 'none';
        }
        else{
            oDiv.style.display = 'block';
        }
    }
}

</script>

</head>

<body>

<input type="button" name="" value="切換" id="ipt">
<div id="div1"></div>

</body>
</html>

（2）switch語句

多重if else 語句可以換成性能更高的switch

switch (....){
case 1:
.................;
break;
case 2:
.................;
break;
case 3:
.................;
break;
case 4:
.................;
break;
default:
..................;
}

向AI問一下細節(jié)

JavaScript函數(shù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽