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. MySQL 查看最大连接数, 当期连接数.

    查看最大连接数 select VARIABLE_VALUE from information_schema.GLOBAL_VARIABLES where VARIABLE_NAME='MAX_CONN ...

  2. mysql导入导出数据库命令

    1.导出数据库:mysqldump -u 用户名 -p 数据库名 > 导出的文件名 如我输入的命令行: mysqldump -u root -p news > /home/jason/sq ...

  3. js中val()和value的区别

    val()是在有jQuery插件的时候才能用,value是在没有jQuery插件的情况下也能用.val()是jQuery根据原生JS里面的value写出来的函数 $(this).val(); 有四个重 ...

  4. Robot Framework + Selenium2Library环境下，结合Selenium Grid实施分布式自动化测试

    最近一段时间,公司在推行自动化测试流程,本人有幸参与了自定义通用控件的关键字封装和脚本辅助编写.数据驱动管理.测试用例执行管理等一系列工具软件的研发工作,积累了一些经验,在此与大家做一下分享,也算是做 ...

  5. ABAP 内表的行列转换-发货通知单-打印到Excel里

    需要传入数据到Excel里的模板如上图所示 ********************** *           设计主要逻辑与原理说明                                 ...

  6. centos6.5Xen4.2安装

    官方安装文档:http://xen.crc.id.au/support/guides/install/ 一.环境说明 1. 本文采用CentOS6.5 x64,安装开发包及开发工具. 2. 关闭sel ...

  7. codeforces 540B.School Marks 解题报告

    题目链接:http://codeforces.com/problemset/problem/540/B 题目意思:给出 k 个test的成绩,要凑剩下的 n-k个test的成绩,使得最终的n个test ...

  8. 数据结构-链表逆置（c++模板类实现）

    链表结点类模板定义: template <class T> class SingleList; template <class T> class Node { private: ...

  9. 【linux】学习3

    鸟哥 书的第7章 从 /home/dtest1   跳入 /home/dtest2 目录: cd  ../dtest2   注意 cd后有空格 ..后无空格 特殊目录: .    代表此层目录 .. ...

  10. HDU 5996 dingyeye loves stone ---BestCoder Round #90

    题目链接 设根节点的深度为0,将所有深度为奇数的节点的石子数目xor起来,则先手必胜当且仅当这个xor和不为0. 证明同阶梯博弈.对于偶深度的点上的石子,若对手移动它们,则可模仿操作:对于奇深度上的石 ...