javascript学习笔记1：星星案例

最新推荐文章于 2022-03-28 18:26:23 发布

shanshuisheng

最新推荐文章于 2022-03-28 18:26:23 发布

阅读量290

点赞数

分类专栏： js 学习文章标签： js qianduan

本文链接：https://blog.csdn.net/shanshuisheng/article/details/80918190

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

学习

1 篇文章 0 订阅

订阅专栏

点出满天小星星

注：一些基本概念在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 οnclick="star()">
 
</body>
</html>注：

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

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

<!DOCTYPE html>
<html  οnclick="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  οnclick="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>

shanshuisheng

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript学习笔记1：星星案例

点出满天小星星注：一些基本概念在Java中已经学过，并且项目中也没有问题。这里当成复习巩固对象：指的是一个类的具体实例。1.新建一个html页面，用notepad++编辑器打开：注；.html文件与.htm文件均是静态网页后缀名，二者没有本质区别，后缀名可以互换2.单击页面的body部分出现小星星使用document.createElement("标签名"):来创建标签,这时标签还在script代...
复制链接

扫一扫