js 随机星星 document.createElement(); setAttribute()

<!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=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

//实例：随机显示的小星星

/*

    （1）网页背景是黑的

    （2）星星随机大小：min=15,max=80

    （3）星星的坐标是随机的：x_left=0,x_right=(浏览器宽-星星宽)

                            y_top=0,y_bottom=?

    （4）单击某个星星，星星消失

    （5）网页加载完成，开始显示星星

    （6）定时器：每隔一个周期，插入一个星星

*/

//定义全局变量

var img_width_min = 15;

var img_width_max = 80;

var x_left = 0;

var x_right = 0;

var y_top = 0;

var y_bottom = 0;

//定义初始化的函数

function init()

{

    document.body.bgColor = "#000";

    x_right = window.innerWidth - img_width_max;

    y_bottom = window.innerHeight - img_width_max;

    //定时器

    setInterval("showStar()",1000);

}

//显示星星

function showStar()

{

    //创建一个图片

    var node_img = document.createElement("img");

    //随机图片大小和随机坐标

    var width = getRandom(img_width_min,img_width_max);

    var x = getRandom(x_left,x_right);

    var y = getRandom(y_top,y_bottom);

    //增加src的属性

    node_img.setAttribute("src","images/xingxing.gif");

    //增加style属性

    var style = "position:absolute;left:"+x+"px;top:"+y+"px;";

    style += "width:"+width+"px;";

    node_img.setAttribute("style",style);

    //增加一个onclick事件属性

    node_img.setAttribute("onclick","removeImg(this)");

    //将图片追加到<body>元素下

    document.body.appendChild(node_img);

}

function removeImg(obj)

{

    document.body.removeChild(obj);

}

function getRandom(min,max)

{

    return Math.floor(Math.random()*(max-min)+min);

}

</script>

</head>

<body onload="init()">

</body>

</html>

js 随机星星 document.createElement(); setAttribute()的更多相关文章

  1. JS中document.createElement()用法及注意事项

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 ...

  2. js document.createElement()的用法 (转)

    document.createElement()的用法 分析代码时,发现自己的盲点--document.createElement(),冲浪一番,总结了点经验. document.createElem ...

  3. 摘抄 - 不为人知的JS调用样式的方法---document.createElement().addRule(..)

    很多人可能在调用css样式都是使用传统的方式调用其实有很多方法可以进行调用,如使用内嵌样式,在html直接加入样式,给定外部样式文件,在外部样式文件中使用 @import url(样式文件路径),这些 ...

  4. JS中window.document对象

    小知识点注:外面双引号,里面的双引号改为单引号:                  在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中                  文本框取出来 ...

  5. 原生js实现星星闪烁的效果

    星星闪烁的原理其实很简单: html代码: <body style="background:#000"> <div id="stars_box" ...

  6. document.createElement

    document.createElement()的用法 document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合 ...

  7. js随机更换

    如果想实现“随机”切换图像,那么我们要使用到几个Math()对象 第一个是random()函数,函数的功能是产生随机数,如果书写为 var a=Math.random() 那么所产生的随机数是0-1( ...

  8. document.createElement()的用法<> 加强我对陌生代码的理解！

    document.createElement()的用法 分析代码时,发现自己的盲点——document.createElement(),冲浪一番,总结了点经验. document.createElem ...

  9. js/jquery 操作document对象

    一.获取对象 //js获取的是dom对象,jquery获取的是jquery对象 //jquery对象可以输出dom对象,索引方式输出dom对象,eq()[]方式输出dom对象;eq()输出jquery ...

随机推荐

  1. ubuntu 16.04 apt-get error: in the drive /media/cdrom and press

    If you have an internet connection, you can safely comment out the line starting with deb cdrom: ... ...

  2. Myeclipse8.5 反编译插件 jad 安装

    准备工作 下载jad.exe文件和下载jadeclipse插件:http://pan.baidu.com/s/1pJKjVwn JadClipse 官网:http://jadclipse.source ...

  3. Appium 客户端库 API

    ## Appium 客户端库 Appium 有对应以下语言的客户端库: 语言 | 代码 :--|--:[Ruby][rubygems] | [GitHub](https://github.com/ap ...

  4. C++实现双缓冲

    首先声明下,这篇资料也是整理别人的资料的基础上,总结来的. 在图形图像处理过程中,双缓冲技术是一种比较常见的技术.窗体在响应WM_PAINT消息时,需要对图像进行绘制处理.如果图像绘制次数过多,重绘过 ...

  5. FFmpeg-20160506-snapshot-bin

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 F ...

  6. Linux内存管理原理

    本文以32位机器为准,串讲一些内存管理的知识点. 1. 虚拟地址.物理地址.逻辑地址.线性地址 虚拟地址又叫线性地址.linux没有采用分段机制,所以逻辑地址和虚拟地址(线性地址)(在用户态,内核态逻 ...

  7. Base64编码格式详解

    什么是Base64? 按照RFC2045的定义,Base64被定义为:Base64内容传送编码被设计用来把任意序列的8位字节描述为一种不易被人直接识别的形式.(The Base64 Content-T ...

  8. 通过JavaScript操作HTML中select标签

    添加: Js代码 1.function selectChange() 2.{ 3.var sel=document.getElementById("select1"); 4. Op ...

  9. 关于java中Double类型的运算精度问题

    标题     在Java中实现浮点数的精确计算    AYellow(原作) 修改    关键字     Java 浮点数 精确计算   问题的提出:如果我们编译运行下面这个程序会看到什么?publi ...

  10. 【编程题目】在 O（1）时间内删除链表结点

    60.在 O(1)时间内删除链表结点(链表.算法).题目:给定链表的头指针和一个结点指针,在 O(1)时间删除该结点.链表结点的定义如下:struct ListNode{int m_nKey;List ...