[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>JS_14、点出小星星</title>
<script type="text/javascript">
//实例：点出小星星。
/*
分析：1、首先网页为空，需要点击才能出小星星。网页加载的时候为黑色背景
2、事件是由点击事件onclick触发，不用onload，
3、图片是由点击添加上去的。
4、图片的相应属性也是由点击事件触发后的函数生成的。
5、星星大小由width属性控制，width由随机函数来取值
6、星星位置坐标由event事件属性来取得，clientX,clientY
7、最后通过图片对象位置通过添加行内样式属性，position来确定。
8、小细节优划
*/
//1.实现网页加载时，网页界面为全黑色。
window.onload = function()
{
document.body.bgColor = "black";
}
//2.实现网页点击，生成一个img对象。也就是触发onclick事件，就生成一个图片对象,
//经过尝试，onclick事件对象不能添加到body里面，因为默认body里面是没有任何东西，所以点击不中body
function start(e)
{
//声明imgObj图片对象，创建一个，并且挂载到父节点body下面。
var imgObj = document.createElement("img");
//将上面创建的图片对象挂载到父节点上。
document.body.appendChild(imgObj);
//点击生成图片对象挂载成功之后，就可以给图片对象加属性SRC
imgObj.src = "images/xingxing.gif";
//测试可以点击生成图片之后，然后实现星星可以随机大小。通过随机函数和width属性来配合。
var width = imgObj.width = getRandom(10,90);
//定义变量取得鼠标位置
//这里有个兼容性的问题。可以使用三元运算符去解决，一般兼容性的问题都可以用三元运算符来处理，代码清晰，容易上手。
var x = e.clientX ? e.clientX : event.clientX;
var y = e.clientY ? e.clientY : event.clientY;
//添加随机大小之后，可以继续添加随机位置了,使用绝对定位功能，坐标就为鼠标点击位置。
//并定义两个变量来获取鼠标点击的位置坐标。
imgObj.style.position = "absolute";
//这里一定要加PX，不然点击不会出效果，代码里面也不生成定位位置的
//点击发现，有点小瑕疵，就是点击的时候，鼠标指针总在图片的左上角。我们可以通过位移图片来实现让鼠标指针点在图片中间
//由于图片为正方形的，所以长和宽相同，减去半个图片的长度，就可以将鼠标指针位移到图片中间。
var x1 = imgObj.style.left = x-width/2+"px";
var y1 = imgObj.style.top = y-width/2+"px";
}
//定义随机函数
function getRandom(min,max)
{
//直接使用公式
var Random = Math.random()*(max-min)+min;
//求出来的结果是个小数，根据图片的属性，这里对结果向下取整
Random = Math.floor(Random);
//最后返回值。
return Random;
}
</script>
</head>
<body>
</body>
</html>
