对于JS一直心存敬畏,今天再次利用一点时间做一个简单的小Demo来练习JavaScript,愿正在努力的你更幸运!
关键代码已经作了注释,就不再赘述了!
<!DOCTYPE html>
<html lang="en" onclick="star(event)">
<head>
<meta charset="UTF-8">
<title>满天星</title>
<style type="text/css">
</style>
<script type="text/javascript">
//注意:margin不会触发事件
function star(event){
// 创建一个星星(创建img标签)
var img = document.createElement('img');
//将图片引入
img.src = 'images/star.png';
//设置星星的大小在20到100之间
img.width =Math.floor(Math.random()*(100-20) + 20);
//利用clientX和clientY找到鼠标点击时候的坐标位置
var x = event.clientX;
var y = event.clientY;
// 将图片定位到鼠标点击的位置
img.style.position = 'absolute';
img.style.top=y+'px';
img.style.left=x+'px';
// 将图片插入body里面
document.body.appendChild(img);
}
</script>
</head>
<body >
</body>
</html>