溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.概念
函數就是重復執行的代碼片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>函數</title>
<script type="text/javascript">
function fnChange(){
alert("hello world!"); /*設置函數*/
}
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> <!--點擊時調用函數-->
<input type="button" name="" value="點擊" onclick = "fnStyle()"></body>
</html>
2.提取行間事件
window.onload = function(){
var oBut = document.getElementById('btn01');
oBut.onclick = fnStyle; /將事件的屬性和一個函數關聯，函數不寫小括號，寫了會馬上執行/
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> <!--點擊時調用函數-->
<input type="button" name="" value="點擊" id="btn01"></body>
3.匿名函數
oBut.onclick = function(){
var oDiv = document.getElementById("div1");
oDiv.style.color = 'red';
oDiv.style.fontSize = '70px';
}; /匿名函數,直接賦予/
**4.網頁換膚**<!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><title>網頁變換</title>
</head>
<body>
<input type="button" name="" value="皮膚一" id="btn01">
<input type="button" name="" value="皮膚二" id="btn02"></body>
</html>
5.變量與函數預解析
JavaScript解析過程分為兩個階段，先是編譯階段，然后執行階段，在編譯階段會將function定義的函數提前，并將var定義的變量聲明提前，將它賦值為undefined，即定義前調用
6.函數傳參
<!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>
函數‘return’關鍵字
（1）返回函數執行的結果
（2）結束函數的運行
（3）阻止默認行為
function fnAdd(a,b){
var c = a + b;
return c; /返回c值，結束函數/
}
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); /*轉化為實數*/
var iVal02 = parseInt(oInput02.value);
alert(iVal01+iVal02);
} 8.條件語句
通過條件來控制程序的走向，就需要用到條件語句。
運算符
（1）算術運算符：+、 -、 、 /、 %（求余）
（2）賦值運算符：=、+=、-=、=、/=、%=、++等同于加一
（3）條件運算符：==、===、>、>=、<、 <=、 != &&(而且，和)、||（或者，與）、！（否）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>條件運算符</title>
<script type="text/javascript">
var iVal01 = 2; /*實數型*/
var iVal02 = '2'; /*字符型*/
/*彈出相等，==，是不考慮類型*/
/*if(iVal01==iVal02){
alert('相等')
}
else{
alert('不相等')
}*/
/*===，考慮類型*/
if(iVal01===iVal02){
alert('相等')
}
else{
alert('不相等')
}
/*!5<2將運行結果取反*/
if(!5<2){
alert('小于');
}
else{
alert('不小于');
}
</script></head>
<body>
</body>
</html>
9.多重循環
（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><script type="text/javascript">
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，執行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:
..................;
}
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
