js怎么实现这个效果如图

哒哒路 2009-08-22 10:24:05

当点击左上的按钮，按钮颜色改变，且提示为左上

...全文

72 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

哒哒路 2009-08-22

打赏
举报

2楼的我用了 3楼的我也写了一个，但是没2楼灵活，初学者谢谢各位了

zyp_weihai 2009-08-22

打赏
举报

我做的这个比较笨，楼主可以稍微看一下
嘻嘻，献丑了

zyp_weihai 2009-08-22

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script language="JavaScript">

function showzs(){	

	document.addr.address.value="左上";

}

function shows(){	

	document.addr.address.value="上";

}

function showys(){	

	document.addr.address.value="右上";

}

function showz(){	

	document.addr.address.value="左";

}

function showc(){	

	document.addr.address.value="中";

}

function showy(){	

	document.addr.address.value="右";

}

function showzx(){	

	document.addr.address.value="左下";

}

function showx(){	

	document.addr.address.value="下";

}

function showyx(){	

	document.addr.address.value="右下";

}







</script>

</head>



<body>

<form name="addr">

位置:<input type="text" name="address" value="" style="width:50"><br>

<input type="button" name="左上" style="width:25;height:25" value="\" onClick="showzs()" onMouseOut="this.style.background='#FFFFFF'" onMouseOver="this.style.background='red'">

<input type="button" name="上" style="width:25;height:25" value="|"  onClick="shows()" onMouseOut="this.style.background='#FFFFFF'" onMouseOver="this.style.background='red'">

<input type="button" name="右上" style="width:25;height:25" value="/" onClick="showys()" onMouseOut="this.style.background='#FFFFFF'" onMouseOver="this.style.background='red'">

<br>

<input type="button" name="左" style="width:25;height:25" value="-" onClick="showz()" onMouseOut="this.style.background='#FFFFFF'" onMouseOver="this.style.background='red'">

<input type="button" name="中" style="width:25;height:25" value="." onClick="showc()" onMouseOut="this.style.background='#FFFFFF'" onMouseOver="this.style.background='red'">

<input type="button" name="右" style="width:25;height:25" value="-" onClick="showy()" onMouseOut="this.style.background='#FFFFFF'" onMouseOver="this.style.background='red'">

<br>

<input type="button" name="左下" style="width:25;height:25" value="/" onClick="showzx()" onMouseOut="this.style.background='#FFFFFF'" onMouseOver="this.style.background='red'">

<input type="button" name="下" style="width:25;height:25" value="|" onClick="showx()" onMouseOut="this.style.background='#FFFFFF'" onMouseOver="this.style.background='red'">

<input type="button" name="右下" style="width:25;height:25" value="\" onClick="showyx()" onMouseOut="this.style.background='#FFFFFF'" onMouseOver="this.style.background='red'">

</form>

</body>

</html>

浪尖赏花 2009-08-22

打赏
举报

<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>test</title>

<style>

.up {}

.down {background-color:black;}

</style>

<script>

function btnClick(obj){

	for(var i=1;i<=9;i++){

		document.getElementById("btn"+i).className = "up";

	}

	obj.className = "down";

	var arr = ["左上","上","右上","左","中","右","左下","下","右下"];

	var index = obj.id.substring(3,4);

	document.getElementById("span1").innerText = arr[parseInt(index,10)-1];

}

</script>

</head>



<body>

位置：<span id="span1"></span><br>

<input type="button" value="" id="btn1" onclick="btnClick(this)">

<input type="button" value="" id="btn2" onclick="btnClick(this)">

<input type="button" value="" id="btn3" onclick="btnClick(this)">

<br>

<input type="button" value="" id="btn4" onclick="btnClick(this)">

<input type="button" value="" id="btn5" onclick="btnClick(this)">

<input type="button" value="" id="btn6" onclick="btnClick(this)">

<br>

<input type="button" value="" id="btn7" onclick="btnClick(this)">

<input type="button" value="" id="btn8" onclick="btnClick(this)">

<input type="button" value="" id="btn9" onclick="btnClick(this)">

</body>



</html>

tidelgl 2009-08-22

打赏
举报

如此简单,根本没什么新鲜的效果,点击就把样式给换了就得了,然后从九个值中选对应折值放到预留的<div>就行了..

huangjunqing 2009-08-22

打赏
举报

虽然结贴了，但还是出于兴趣写了一个，LZ可以参考下

huangjunqing 2009-08-22

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

<script type="text/javascript">

var names=new Array("左上","上","右上","左","中","右","左下","下","右下");

var values=new Array("↖","↑","↗","←","∙","→","↙","↓","↘");

function DirButtons(parentNode)

{

	this.node=document.createElement("table");

	var self=this;

	var onclick=function(event){self.onclick(event);};

	this.buttons=new Array();

	for(var i=0;i<3;i++)

	{

		var tr=this.node.insertRow();

		for(var j=0;j<3;j++)

		{

			var td=tr.insertCell();

			var index=i*3+j;

			this.buttons[index]=document.createElement("input");

			this.buttons[index].setAttribute("type","button");

			this.buttons[index].setAttribute("name",index);

			this.buttons[index].setAttribute("value",values[index]);

			this.buttons[index].style.width="30px";

			this.buttons[index].style.height="30px";

			if(this.buttons[index].attachEvent)

				this.buttons[index].attachEvent("onclick",onclick);

			else

				this.buttons[index].addEventListener("click",onclick,false);

			td.appendChild(this.buttons[index]);

		}

	}

	this.buttons[0].focus();

	this.buttons[0].style.backgroundColor="blue";

	this.buttons[0].style.color="white";

	this.selectedIndex=0;

	parentNode.appendChild(this.node);

}

DirButtons.prototype.onclick=function(e)

{

	var target;

	if(e.srcElement)

		target=e.srcElement;

	else

		target=e.target;

	this.buttons[this.selectedIndex].style.backgroundColor="";

	this.buttons[this.selectedIndex].style.color="";

	this.selectedIndex=parseInt(target.name);

	this.buttons[this.selectedIndex].style.backgroundColor="blue";

	this.buttons[this.selectedIndex].style.color="white";

	if(this.onValueChanged)

		this.onValueChanged(names[this.selectedIndex]);

}

DirButtons.prototype.getValue=function()

{

	return names[this.selectedIndex];

}

function init()

{

	var dirButtons=new DirButtons(document.getElementById("node"));

	document.getElementById("dir").appendChild(document.createTextNode(dirButtons.getValue()));

	dirButtons.onValueChanged=function(value)

	{

		document.getElementById("dir").firstChild.nodeValue=value;

	}

}

</script>

</head>

<body onload="init()">

<center id="node"><div style="color:red">位置：<span id="dir"></span></div></center>

</body>

</html>