js鼠标画图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22%3E
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
font-size: x-small;
}
</style>
</head>

<script type="text/javascript">
var w=1;
var h=1;
var col=black;
function add1()
{
w+=1;
h+=1;

}
function cut1()
{
if(w>1&&h>1)
{
w-=1;
h-=1;
}
}
function catchMouse()
{
//alert('hello');

var x=event.clientX-50;
var y=event.clientY-52;

makedot(x,y);
window.setTimeOut('catchMouse()',3);

}
function makedot(x,y){ //㺯

var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<hr style='position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px;color:"+col+";'>");
//document.write("<div style='height:1px;position:absolute;left:"+x+"px;top:"+y+"px;width:2px;background:#f00;overflow:hidden'></div>")
}
function changeColor(a)
{
col=a.value;
}
</script>

<body>

<span id="sspp" onMouseDown="document.onmousemove=catchMouse" onMouseUp="document.onmousemove=null" style="position:absolute;top:50px;left:50px;width:500px;height:500px;background-color:#eeeeee ">

</span>
<form action="">
<input type="button" onClick="add1()" name="add" value="+">
<input type="button" onClick="cut1()" name="cut" value="-">
<select id="col" onChange="changeColor(this)">
<option value="black">black</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="orange">orange</option>
<option value="red">red</option>
<option value="pink">pink</option>
</select>
</form>
</body>

</html>

posted on 2008-04-28 10:16  leanco  阅读(749)  评论(0)    收藏  举报

导航