（案例）随机出现小星星，并点击消失
此案例用到的知识点有：数据源event和this、开关定时器、获取随机数、获取id对象、JS设置CSS定位属性、创建删除和输出标签 。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ background:#000000; padding:0px; margin:0px; color:#FFFFFF}
#an{ width:50px; position:absolute; top:20px; left:20px}
</style>
<script type="text/javascript">
//创建星星函数
function a(){ //传递参数用来得到事件触发时的坐标
// var x=e.clientX-50;//得到事件触发时的x坐标
// var y=e.clientY-50;//得到事件触发时的y坐标
// var x1=x+50;
// var y1=y+50;
var x1=Math.floor(Math.random()*1150+30);//获取随机的x坐标
var y1=Math.floor(Math.random()*460+50);//获取随机的y坐标
var zb=document.getElementById("div");//获取id为div的这个对象
zb.innerHTML=x1+"，"+y1;//把对象里面的所有内容替换为x和y坐标
zb.style.float="right";//设置对象的css的属性为浮动
var obj=document.createElement("img");//创建img标签
obj.src="images/xx.gif"//设置标签的路径属性
var w=Math.floor(Math.random()*151+50);//获取一个50到100的整数
obj.width=w;//标签的宽为w
obj.style.position="absolute";//设置标签的css属性为绝对定位
obj.style.top=y1+"px";//绝对定位的坐标属性
obj.style.left=x1+"px";//绝对定位的坐标属性
obj.onclick=xs;//给对象绑定单击事件，单击执行函数xs
document.body.appendChild(obj);//输出img标签
xxgs++;
if(xxgs==20){
sl();
alert("游戏结束");
}
sl();
}
//创建消失星星函数
function xs(){
this.parentNode.removeChild(this);//删除标签，对象绑定了事件则可以直接用this代替这个对象
xxgs--;
sl();
}
function an(kg){
//var kg=document.getElementById("an");//如果没有this则需要这句获取对象
if(kg.value=="开"){ //对象value值为开则停止计时器并且value值改为关，否则开始定时器并value值改为开
window.clearInterval(ff);
kg.value="关";
}else{
ff= window.setInterval("a()",500);
kg.value="开";
}
}
function sl(){
var nr= document.getElementById("sl");
nr.innerHTML=xxgs+"个星星";
}
var ff;//定义一个全局变量，代表计时器
var xxgs=0;//全局变量代表星星个数
</script>
</head>
<body>
<span id="sl">0个星星</span>
<div id="div">
</div>
<input type="button" value="关" id="an" onclick="an(this)" />
</body>
</html>
