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. jquery实现input输入框实时输入触发事件代码 ---jQuery 中bind(),live(),delegate(),on() 区别

    复制代码 代码如下: <input id="productName" name="productName" value="" /> ...

  2. DOS与批处理

    cmd命令不区分大小写 d: cd .. cd 文件夹 dir dir 文件或文件夹 可执行文件(.exe, .bat., .com),只需进入文件当前目录并输入文件名(不需要后缀)即可执行, 如果将 ...

  3. FastReport调用Delphi中的人民币大写转换自定义函数

    FastReport调用Delphi中的人民币大写转换自定义函数   FastReport调用Delphi中的人民币大写转换自定义函数 function TJzpzEdit1.MoneyCn(mmje ...

  4. excel中将字符转换为数值

    EXCEL表格的左上角那个绿色符号是什么?怎么样可以转换成数值 如果你说的文本是由纯数字组成的,不包含字母和其他字符的话,那么,你要指改为数值可以这样操作:1.先在一个单元格内输入数字12.将刚才输入 ...

  5. MongoDB 副本集管理（不定时更新）

    简介: 前面介绍完了副本集的搭建.用户的管理.参数和日常操作的说明,那副本集搭建好该如何管理呢?现在来说明下副本集的日常查看和管理. 说明: 1)查看命令行参数:db.serverCmdLineOpt ...

  6. java sleep() 、yield()

    1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如果有synchronized同步快,其他线程仍然不能访问共享数据.注意该方 ...

  7. Linux内存管理原理

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

  8. 安装/移除Windows服务

    在工作中,涉及到相关Windows的开发时,常常要安装.移除Windows服务程序.一般地,可通过cmd命令行操作来完成~ cd 服务程序所在目录 *.exe -i // 安装服务 *.exe -s ...

  9. codeforces 490C. Hacking Cypher 解题报告

    题目链接:http://codeforces.com/problemset/problem/490/C 题目意思:给出一个可能有10^6 位长的字符串且没有前导0的整数,问能否一分为二,使得前面的一部 ...

  10. JSON 数据格式

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易 ...