js的回撥函式使用
阿新 • • 發佈：2018-11-11
原始碼見地址：https://download.csdn.net/download/colourfultiger/10673643
html部分
<div class="box"> <div id="callback1"></div> <button onclick="testback1(forfun)">callback測試1</button> </div> <div class="box"> <div class="callback2"></div> <button onclick="testback2(forfun)">callback測試2</button> </div> <div class="box"> <div class="callback3"></div> <button onclick="testback3(forfun)">callback測試3</button> </div> <div class="box"> <div class="callback4"></div> <button onclick="testback4(forfun)">callback測試4</button> </div> <div class="box"> <div class="callback5"></div> <button onclick="testback5(SingleAnimation)">callback動畫單向測試5</button> </div> <div class="box"> <div class="callback6"></div> <button onclick="testback6(Two_wayAnimation)">callback動畫雙向測試6</button> </div> <div class="box"> <div class="callback7"></div> <button onclick="testback7(forfun7)">callback回撥巢狀測試7</button> </div>
css部分
<style type="text/css"> .box{ width: 280px; height: 280px; background: #6495ED; display: inline-block; float: left; margin-left: 10px; margin-bottom: 10px; } #callback1,.callback2,.callback3,.callback4 { width: 200px; margin: 0 auto; display: block; } #callback1 { height: 100px; background: #FFDEAD; } .callback2 { height: 150px; background: #FFDEAD; } .callback3 { height: 200px; background: #FFDEAD; } .callback4 { height: 80px; background: #FFDEAD; } /*5*/ .callback5 { width: 100px; height: 100px; background: pink; } /*6*/ .callback6 { width: 100px; height: 50px; background: pink; } .Twoanimation{ background: mediumpurple; height: 50px; animation: mymove 1s alternate; -webkit-animation:mymove 5s alternate; animation-iteration-count:2; -webkit-animation-iteration-count:2; /* Safari 和 Chrome */ } @keyframes mymove{ from {height: 10px;background: lightgreen;} to {height: 150px;background: lightsalmon;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {height: 10px;background: lightgreen;} to {height: 150px;background: lightsalmon;} } /*7 放大*/ .callback7{ width: 50px; height: 60px; background: gold; margin: 0 auto; } .big{ transform: scale(1.5); -webkit-transform:scale(1.5); -moz-transform:scale(1.5); position: relative; top: 20%; } </style>
js部分，
1、測試一：簡單的回撥效果，順便補充一下對getElementsByClassName獲取資料的寫法以及定時器的做法
// ****************************測試一*******基礎回撥的原型*********************** // 一、被回撥函式 function forfun(){ //1、定時器 setTimeout(function(){ alert(Date()) },3000); } // 二、各自按鈕對應的函式 function testback1(callback){ document.getElementById("callback1").style.height="150px"; // 三、回撥函式 callback (); } function testback2(callback){ // 2.1、使css類生效的法1 document.getElementsByClassName('callback2')[0].style.height="250px"; callback(); } function testback3(callback){ // 2.2、使css類生效的法2 var callback3 = document.getElementsByClassName('callback3')[0]; callback3.style.height="100px"; callback(); } function testback4(callback){ // 2.3、使css類生效的法3 var callback4 = document.getElementsByClassName('callback4'); callback4[0].style.height="20px"; callback(); }
效果：
點選第一個：height變高，隨後彈出alert裡的內容
2、js測試回撥二
// ****************************測試二*********多個同類回撥加單向動畫*********************
function testback5(callback){
var callback5 = document.getElementsByClassName('callback5');
callback5[0].style.height="200px";
callback('callback5',"width","200px",0);
callback('callback5',"backgroundColor","orange",0);
}
//被回撥的內容
function SingleAnimation(element,attribute,val,i){
var ele = document.getElementsByClassName(element);
switch (attribute){
case 'color':
ele[i].style.color=val;
break;
case 'backgroundColor':
ele[i].style.backgroundColor=val;
break;
case 'width':
ele[i].style.width=val;
break;
default:
break;
}
}
既改變高度，又改變顏色，同時回撥的是同一個函式
3、js測試3 回撥加動畫
// ****************************測試三*********回撥加雙向動畫*********************
var ontest=true;
function testback6(callback){
callback('callback6',0);
}
//被回撥的函式 動畫雙向圖 偶數-恢復 單數-執行
function Two_wayAnimation(element,i){
var ele = document.getElementsByClassName(element);
if(ontest){
//新增class
ele[i].classList.add("Twoanimation");
ontest = false;
}else{
//取消class
ele[i].classList.remove("Twoanimation");
ontest = true;
}
}
補充一點知識：用js來新增class的樣式：ele[i].classList.add("Twoanimation");
4、js測試4
// ****************************測試四*********回撥巢狀**延時+放大*********************
var testbig = true;
function testback7(callback){
var callback7 = document.getElementsByClassName('callback7');
callback(bigdiv); //呼叫回撥1，傳參回撥2
}
//延時----回撥函式1
function forfun7(callback){
setTimeout(function(){ //延時執行函式
callback('callback7',0);//呼叫回撥2 執行的內容體
},1000);
}
//放大----回撥函式2
function bigdiv(element,i){
var ele = document.getElementsByClassName(element);
if(testbig){
ele[i].classList.add("big");
testbig = false;
}else{
ele[i].classList.remove("big");
testbig = true;
}
}
在這個效果中使用了回撥函式巢狀，主要是先延時，再放大，注意回撥函式的傳參即可實現效果。