HTML5:Animate cc互動之“多選、單選、單與多”功能
阿新 • • 發佈：2019-02-01
一、實現功能
選擇題中有3中型別，“單選”“多選”“單多選”
二、步驟
a.單選
var s = this; s.stop(); //隱藏提交按鈕、錯對框 s.right_case.visible = false; s.false_case.visible = false; s.submit.visible = false; //滑鼠經過、離開樣式 Over = function (e) { e.currentTarget.cursor = "pointer"; } Out = function (e) { e.currentTarget.cursor = "no-pointer"; } for (var i = 1; i <= 3; i++) { s["checkbox" + i].gotoAndStop(0); if (!s["checkbox" + i].hasEventListener("click")) { s["checkbox" + i].addEventListener("click", on_off) s["checkbox" + i].addEventListener("mouseover", Over) s["checkbox" + i].addEventListener("mouseout", Out) } } //複選框開關 function on_off(e) { var num = e.currentTarget.name.charAt(8); if (s["checkbox" + num].currentFrame == 0) { for (var n = 1; n <= 3; n++) { s["checkbox" + n].gotoAndStop(0); s["checkbox" + num].gotoAndStop(1); } } else { for (var n = 1; n <= 3; n++) { s["checkbox" + n].gotoAndStop(0); } } s.submit.visible = true; if (!s.submit.hasEventListener("click")) { s.submit.addEventListener("click", false_right) } } //判斷對錯 function false_right() { for (var n = 1; n <= 3; n++) { if (s["checkbox" + n].currentFrame == 0 && s["checkbox" + 2].currentFrame == 1) { s.right_case.visible = true; } else { s.false_case.visible = true; } } for (var i = 1; i <= 3; i++) { s["checkbox" + i].removeEventListener("click", on_off) s["checkbox" + i].removeEventListener("mouseover", Over) s["checkbox" + i].removeEventListener("mouseout", Out) } }
b.多選程式碼
S = this; S.stop(); /*將正確、錯誤、確定隱藏*/ S.right_case1.visible = false; S.false_case1.visible = false; S.sure_btn1.visible = false; /*滑鼠經過與離開顯示小手*/ onOver = function (e) { e.currentTarget.cursor = "pointer"; } onOut = function (e) { e.currentTarget.cursor = "no-pointer"; } /*4個複選框，呼叫滑鼠圖示切換*/ for (i = 1; i <= 5; i++) { S["test1_check" + i].autoReset = false; //開始的時候不會自己跑一遍 S["test1_check" + i].gotoAndStop(0); if (!S["test1_check" + i].hasEventListener("click")) { S["test1_check" + i].addEventListener("click",on_off); //實現開關 S["test1_check" + i].addEventListener("mouseover", onOver); S["test1_check" + i].addEventListener("mouseout", onOut); } } function on_off(e) { var now_num = e.currentTarget.name.substr(11, 2); //擷取當前幀 if (S["test1_check" + now_num].currentFrame == 0) { S["test1_check" + now_num].gotoAndStop(1); } else { S["test1_check" + now_num].gotoAndStop(0); } //提交按鈕事件 S.sure_btn1.visible = true; //顯示提交框 if (!S.sure_btn1.hasEventListener("click")) { S.sure_btn1.addEventListener("click", dc_judge); } } //進行判斷題目對錯 function dc_judge(e) { for (i = 1; i <= 5; i++) { S["test1_check" + i].removeEventListener("click", on_off) S["test1_check" + i].removeEventListener("mouseover", onOver); S["test1_check" + i].removeEventListener("mouseout", onOut); S["test1_check" + i].cursor = "no-pointer"; } //提交按鈕事件 S.sure_btn1.removeEventListener("click", dc_judge); S.sure_btn1.visible = false; //錯誤框隱藏 if (S.test1_check1.currentFrame == 1 && S.test1_check2.currentFrame !== 1 && S.test1_check3.currentFrame !== 1 && S.test1_check4.currentFrame !== 1&& S.test1_check5.currentFrame !== 1) //如果之前定義的當前幀是1 { S.right_case1.visible = true; //正確框顯示 //正確跳轉事件 } else{ S.false_case1.visible = true; //如果定義的當前幀不是1，錯誤框顯 //錯誤跳轉事件 } }
c.單選程式碼
S.stop(); num = 0; i = 0; S.right_c1.visible = false; S.false_c1.visible = false; S.sure_c1.visible = false; now_num = 0; pre_num = 0; /*滑鼠經過與離開顯示小手*/ onOver = function (e) { e.currentTarget.cursor = "pointer"; } onOut = function (e) { e.currentTarget.cursor = "no-pointer"; } for (i = 1; i < 3; i++) { S["ca_" + i].autoReset = false; S["ca_" + i].gotoAndStop(0); if (!S["ca_" + i].hasEventListener("click")) { S["ca_" + i].addEventListener("click", ca_Event);//實現開關 S["ca_" + i].addEventListener("mouseover", onOver); S["ca_" + i].addEventListener("mouseout", onOut); } } //區別 function ca_Event(e) { now_num = e.currentTarget.name.substr(3, 1); if (now_num != 0) { S["ca_" + now_num].removeEventListener("click", ca_Event); S["ca_" + now_num].removeEventListener("mouseover", onOver); S["ca_" + now_num].removeEventListener("mouseout", onOut); S["ca_" + now_num].gotoAndStop(1); S["ca_" + now_num].cursor = "no-pointer"; if (pre_num != 0) { S["ca_" + pre_num].addEventListener("click", ca_Event); S["ca_" + pre_num].addEventListener("mouseover", onOver); S["ca_" + pre_num].addEventListener("mouseout", onOut); S["ca_" + pre_num].gotoAndStop(0); S["ca_" + pre_num].cursor = "pointer"; } pre_num = now_num; } //提交按鈕事件 S.sure_c1.visible = true; if (!S.sure_c1.hasEventListener("click")) { S.sure_c1.addEventListener("click", ca_sure_Click); } } function ca_sure_Click(e) { for (i = 1; i < 3; i++) { S["ca_" + i].removeEventListener("click", ca_Event) S["ca_" + i].removeEventListener("mouseover", onOver); S["ca_" + i].removeEventListener("mouseout", onOut); S["ca_" + i].cursor = "no-pointer"; } //提交按鈕事件 S.sure_c1.removeEventListener("click", ca_sure_Click); S.sure_c1.visible = false; if (now_num == "1") { S.right_c1.visible = true; //正確跳轉事件 } else { S.false_c1.visible = true; //錯誤跳轉事件 } }
d.單多選
S.stop();
S.right_c2.visible = false;
S.false_c2.visible = false;
S.sure_c2.visible = false;
/*滑鼠經過與離開顯示小手*/
onOver = function (e) {
e.currentTarget.cursor = "pointer";
}
onOut = function (e) {
e.currentTarget.cursor = "no-pointer";
}
//單選
for (var i = 3; i < 5; i++) {
S["ca_" + i].autoReset = false;
S["ca_" + i].gotoAndStop(0);
if (!S["ca_" + i].hasEventListener("click")) {
S["ca_" + i].addEventListener("click", ca_Event);
S["ca_" + i].addEventListener("mouseover", onOver);
S["ca_" + i].addEventListener("mouseout", onOut);
}
}
//多選
for (var i = 5; i <= 8; i++) {
S["ca_" + i].autoReset = false;
S["ca_" + i].gotoAndStop(0);
if (!S["ca_" + i].hasEventListener("click")) {
S["ca_" + i].addEventListener("click", cb_Event);
S["ca_" + i].addEventListener("mouseover", onOver);
S["ca_" + i].addEventListener("mouseout", onOut);
}
}
//多選方法
function cb_Event(e) {
var now_num = e.currentTarget.name.substr(3, 1);
if (S["ca_" + now_num].currentFrame == 0) {
S["ca_" + now_num].gotoAndStop(1);
} else {
S["ca_" + now_num].gotoAndStop(0);
}
//提交按鈕事件
// S.sure_c2.visible = true;
jia = true;
if (!S.sure_c2.hasEventListener("click")) {
S.sure_c2.addEventListener("click", cb_sure_Click);
}
console.log(jia)
if (zhen == true && jia == true) {
S.sure_c2.visible = true;
}
}
//單選方法
function ca_Event(e) {
var now_num = e.currentTarget.name.substr(3, 1);
if (now_num != 0) {
S["ca_" + now_num].removeEventListener("click", ca_Event);
S["ca_" + now_num].removeEventListener("mouseover", onOver);
S["ca_" + now_num].removeEventListener("mouseout", onOut);
S["ca_" + now_num].gotoAndStop(1);
S["ca_" + now_num].cursor = "no-pointer";
if (pre_num != 0) {
S["ca_" + pre_num].addEventListener("click", ca_Event);
S["ca_" + pre_num].addEventListener("mouseover", onOver);
S["ca_" + pre_num].addEventListener("mouseout", onOut);
S["ca_" + pre_num].gotoAndStop(0);
S["ca_" + pre_num].cursor = "pointer";
}
pre_num = now_num;
}
//提交按鈕事件
// S.sure_c2.visible = true;
zhen = true;
if (!S.sure_c2.hasEventListener("click")) {
S.sure_c2.addEventListener("click", ca_sure_Click);
}
console.log(zhen)
if (zhen == true && jia == true) {
S.sure_c2.visible = true;
}
}
console.log(now_num)
console.log(S.ca_6.currentFrame)
if (!S.sure_c2.hasEventListener("click")) {
S.sure_c2.addEventListener("click", fun_btn);
}