<html>
<head>
<style>
#vector {position:static; border:1px solid red; background-color:gray;}
span {display:block; position:absolute; font-size:20px;
text-align:center; font-weight:bolder;
line-height:25px; border:1px solid blue; background-color:yellow; z-Index:10;}
#input {position:absolute; line-height:25px; border:1px solid red;
font-size:20px; background-color:#DBDCDB;}
</style>
</head>
<body onload="init()">
<div id="vector" style="top:10px;left:10px;width:800px;height:300px;">
<span>忠诚</span> <span>博雅</span> <span>朴实</span> <span>刚毅</span>
<span>求实</span> <span>开拓</span> <span>严谨</span> <span>认真</span>
<span>创新</span> <span>高效</span> <span>务实</span> <span>进取</span>
</div>
<p>
<div id="input" style="top:350px;left:10px;height:25px;width:800px;">华师精神是:</div>
</p>
</body>
<script>
var keywords = ["忠诚","博雅","朴实","刚毅"]; //正确答案
var tryTimes = keywords.length;
var isCorrect = 1;
var inputDom = document.getElementById("input");
function init()
{
var dom = document.getElementById("vector");
var l = dom.children.length;
for(var i=0;i<l;i++)
{
var node = dom.children[i];
node.style.height = "25px";
node.style.width = "50px";
node.style.top = parseInt((Math.random()*(parseInt(dom.style.height) -
parseInt(node.style.height)) +
parseInt(dom.style.top))) + "px";
node.style.left = parseInt((Math.random()*(parseInt(dom.style.width) -
parseInt(node.style.width)) +
parseInt(dom.style.left))) + "px";
node.isAnswer = 0;
for(var j in keywords)
{
if(node.innerHTML == keywords[j])
{
node.isAnswer = 1;
break;
}
}
node.onmousedown = mouseDown;
}
}
function mouseDown(e)
{
e = e||event;
document.movingDom = this;
if(e.layerX) //IE下
{
this.offset = {coffsetX:e.layerX, coffsetY:e.layerY};
}
else //ff下
{
this.offset = {coffsetX:e.offsetX, coffsetY:e.offsetY};
}
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
}
function mouseMove(e)
{
e = e||event;
var dom = this.movingDom;
if(!(parseInt(dom.style.top) == parseInt(inputDom.style.top) &&
parseInt(dom.style.left) >= parseInt(inputDom.style.left) &&
parseInt(dom.style.left) <= (parseInt(inputDom.style.left) +
parseInt(inputDom.style.width) -
parseInt(dom.style.width))))
{
dom.style.top = e.clientY - dom.offset.coffsetY + "px";
dom.style.left = e.clientX - dom.offset.coffsetX + "px";
}
}
function mouseUp(e)
{
var dom = this.movingDom;
document.onmousemove = null;
document.onmouseup = null;
if( parseInt(dom.style.top ) == parseInt(inputDom.style.top) &&
parseInt(dom.style.left) >= parseInt(inputDom.style.left) &&
parseInt(dom.style.left) <= (parseInt(inputDom.style.left) +
parseInt(inputDom.style.width) -
parseInt(dom.style.width)))
{
dom.style.backgroundColor = "red";
tryTimes--;
isCorrect *= dom.isAnswer;
if(tryTimes==0)
{
isCorrect?alert("回答正确！"):alert("回答错误，回家去面壁");
location.reload();
}
}
}
</script>
</html>
