HTML5:Animate cc交互之“多选、单选、单与多”功能

一、实现功能

选择题中有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);

}