js怎么实现这个效果如图

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

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

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

js怎么实现这个效果 如图

解决方案 »

js怎么实现这个效果如图