javascript学习笔记1：星星案例

点出满天小星星

注：一些基本概念在Java中已经学过，并且项目中也没有问题。这里当成复习巩固

对象：指的是一个类的具体实例。

1.新建一个html页面，用notepad++编辑器打开：

注；.html文件与.htm文件均是静态网页后缀名，二者没有本质区别，后缀名可以互换

2.单击页面的body部分出现小星星

使用document.createElement("标签名"):来创建标签,这时标签还在script代码里面，再调用document.body.appendChild(对象);方法把刚刚创建的标签对象添加到body里面。

注：有两个特殊的东西，document.body表示body标签对象 document.documentElementhtml表示html标签对象；-----------使用alert()方法测试代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
body{
height:100px;
border:1px solid red;
width:1000px;
}
</style>
<script type="text/javascript">
//让页面出现星星
function star(){
var obj=document.createElement("img");
obj.src="xingxing.jpg";
  document.body.appendChild(obj);
}
</script>
</head>
<body onclick="star()">
 
</body>
</html>注：

注：margin（外边距）不会触发事件

3.点击页面任何地方都触发事件的写法：把事件属性写在html根标签里

<!DOCTYPE html>
<html  onclick="star()">
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
//让页面出现星星
function star(){
var obj=document.createElement("img");
obj.src="xingxing.jpg";
  document.body.appendChild(obj);
}
</script>
</head>
<body >
 
</body>
</html>

4.让星星随机的大小并且随机的位置显示

<!DOCTYPE html>
<html  onclick="star(event)">
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
//让页面出现星星
function star(e){
var obj=document.createElement("img");
obj.src="xingxing.jpg";

//随机大小
var width =Math.floor(Math.random()*80+20);
  obj.width=width;
  
  //随机位置
  var x=e.clientX;
  var y=e.clientY;
  obj.style.position="absolute";
   obj.style.top=(y+"px");
   obj.style.left=(x+"px");
  
  //添加对象
  document.body.appendChild(obj);
}
</script>
</head>
<body >
 
</body>
</html>

javascript学习笔记1：星星案例

点出满天小星星

猜你喜欢