<html>
<head>
<title>试题2</title>
<script language="javascript">function changebutton()
{
var o = event.srcElement;
if(o.value=="开始")
{
o.value = "停止";
startMoveDiv();
}
else
{
o.value = "开始";
stopMoveDiv();
}
}
var g_moving_tag = false;
var g_moving_direction = "RIGHT";
var g_moving_step = 2;
var g_moving_interval = 10;
var g_moving_div = null;
function startMoveDiv()
{
if(g_moving_tag==false)
{
g_moving_tag = true;
g_moving_div = document.getElementById("div_element");
timer_name = setInterval("moveDiv();",g_moving_interval);
}
}
function moveDiv()
{
if(g_moving_tag)
{
if(g_moving_direction == "RIGHT")
{
g_moving_div.style.pixelLeft++;
if(g_moving_div.style.pixelLeft+g_moving_div.style.pixelWidth>=document.body.clientWidth)
{
g_moving_div.style.pixelLeft--;
g_moving_direction = "LEFT"
}
}
else
{
g_moving_div.style.pixelLeft--;
if(g_moving_div.style.pixelLeft<=0)
{
g_moving_div.style.pixelLeft++;
g_moving_direction = "RIGHT";
}
}
}
}
function stopMoveDiv()
{
if(g_moving_tag)
{
clearInterval(timer_name);
g_moving_tag = false;
}
}function init()
{
var div = document.getElementById("div_element")
div.attachEvent("onmouseover",onDivMouseOver);
div.attachEvent("onmouseout",onDivMouseOut);
div.attachEvent("onmousedown",onDivMouseDown);
div.attachEvent("onmousemove",onDivMouseMove);
div.attachEvent("onmouseup",onDivMouseUp);
}
function onDivMouseOver()
{
event.srcElement.style.background = "green";
}
function onDivMouseOut()
{
event.srcElement.style.background = "blue";
}
var g_user_moving_tag =false;
var g_user_moving_oldx;
var g_user_moving_oldy;
function onDivMouseDown()
{
if(!g_moving_tag)
{
g_user_moving_oldx = event.x;
g_user_moving_oldy = event.y;
event.srcElement.setCapture();
g_user_moving_tag = true;
}
}
function onDivMouseMove()
{
if(g_user_moving_tag&&!g_moving_tag)
{
var x = event.x;
var y = event.y;
event.srcElement.style.pixelLeft += x - g_user_moving_oldx;
event.srcElement.style.pixelTop += y - g_user_moving_oldy;
g_user_moving_oldx = x;
g_user_moving_oldy = y;
}
}
function onDivMouseUp()
{
if(!g_moving_tag&&g_user_moving_tag)
{
g_user_moving_tag = false;
event.srcElement.releaseCapture();
}
}
</script>
</head>
<body onload=init()>
<input type="button" value="开始" name="start_stop" id="start_stop" onclick=changebutton()>
<div id="div_element" style="position:absolute;top:300;left:10;width:100;height:80;background-color:#0000ff;border:#ff0000 solid 3"><font color="#ffffff">DIV元素</font></div>
</body>
</html>
<head>
<title>试题2</title>
<script language="javascript">function changebutton()
{
var o = event.srcElement;
if(o.value=="开始")
{
o.value = "停止";
startMoveDiv();
}
else
{
o.value = "开始";
stopMoveDiv();
}
}
var g_moving_tag = false;
var g_moving_direction = "RIGHT";
var g_moving_step = 2;
var g_moving_interval = 10;
var g_moving_div = null;
function startMoveDiv()
{
if(g_moving_tag==false)
{
g_moving_tag = true;
g_moving_div = document.getElementById("div_element");
timer_name = setInterval("moveDiv();",g_moving_interval);
}
}
function moveDiv()
{
if(g_moving_tag)
{
if(g_moving_direction == "RIGHT")
{
g_moving_div.style.pixelLeft++;
if(g_moving_div.style.pixelLeft+g_moving_div.style.pixelWidth>=document.body.clientWidth)
{
g_moving_div.style.pixelLeft--;
g_moving_direction = "LEFT"
}
}
else
{
g_moving_div.style.pixelLeft--;
if(g_moving_div.style.pixelLeft<=0)
{
g_moving_div.style.pixelLeft++;
g_moving_direction = "RIGHT";
}
}
}
}
function stopMoveDiv()
{
if(g_moving_tag)
{
clearInterval(timer_name);
g_moving_tag = false;
}
}function init()
{
var div = document.getElementById("div_element")
div.attachEvent("onmouseover",onDivMouseOver);
div.attachEvent("onmouseout",onDivMouseOut);
div.attachEvent("onmousedown",onDivMouseDown);
div.attachEvent("onmousemove",onDivMouseMove);
div.attachEvent("onmouseup",onDivMouseUp);
}
function onDivMouseOver()
{
event.srcElement.style.background = "green";
}
function onDivMouseOut()
{
event.srcElement.style.background = "blue";
}
var g_user_moving_tag =false;
var g_user_moving_oldx;
var g_user_moving_oldy;
function onDivMouseDown()
{
if(!g_moving_tag)
{
g_user_moving_oldx = event.x;
g_user_moving_oldy = event.y;
event.srcElement.setCapture();
g_user_moving_tag = true;
}
}
function onDivMouseMove()
{
if(g_user_moving_tag&&!g_moving_tag)
{
var x = event.x;
var y = event.y;
event.srcElement.style.pixelLeft += x - g_user_moving_oldx;
event.srcElement.style.pixelTop += y - g_user_moving_oldy;
g_user_moving_oldx = x;
g_user_moving_oldy = y;
}
}
function onDivMouseUp()
{
if(!g_moving_tag&&g_user_moving_tag)
{
g_user_moving_tag = false;
event.srcElement.releaseCapture();
}
}
</script>
</head>
<body onload=init()>
<input type="button" value="开始" name="start_stop" id="start_stop" onclick=changebutton()>
<div id="div_element" style="position:absolute;top:300;left:10;width:100;height:80;background-color:#0000ff;border:#ff0000 solid 3"><font color="#ffffff">DIV元素</font></div>
</body>
</html>
<head>
<title>试题2</title>
<script language="javascript">
var change=0;
var time;
function move(){
var objdiv=document.getElementById("div_element");
if((objdiv.offsetLeft+objdiv.offsetWidth+10)<window.screen.width){
if(change){
objdiv.style.left = objdiv.offsetLeft-1;
}else{
objdiv.style.left = objdiv.offsetLeft+1;
}
} if((objdiv.offsetLeft+objdiv.offsetWidth+10)>=window.screen.width){
change=1;
objdiv.style.left = objdiv.offsetLeft-1;
} if(objdiv.offsetLeft==0){
change=0;
objdiv.style.left=objdiv.offsetLeft+1;
} time = window.setTimeout("move()",100);
}function changebutton(){
if(document.getElementById("start_stop").value=="开始"){
document.getElementById("start_stop").value="停止";
move();
}else{
document.getElementById("start_stop").value="开始";
clearTimeout(time);
}
}
</script>
</head>
<body>
试题2
<br>
测试内容:移动“DIV元素”。(共30分)
<br>要求:
<br>1、点“开始”按钮后,“开始”按钮变为“停止”按钮,
“DIV元素”平滑地往右移动,到达页面的右边框时自动改为往左移动,到达页面的左边框后又改变方向,依此循环,
直到点击“停止”按钮后停止移动。(10分)
<br>2、当鼠标悬停在DIV元素上时,它的背景色发生变化,
接着按下鼠标左键后可拖拽DIV元素,松开鼠标左键后DIV元素不可拖拽,鼠标移出DIV元素时背景色恢复。(20分)
<br><br>
注:发现抄袭别人的代码的,该题为零分。
<br>
=========================================================================================<br><br><br><input type="button" value="开始" name="start_stop" id="start_stop" onclick=changebutton()>
<div id="div_element" style="position:absolute;top:300px;left:10px;width:100px;height:80px;background-color:#0000ff;border:#ff0000 solid;"><font color="#ffffff">DIV元素</font></div>
</body>
</html>