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. OpenMP求完数

    源代码: #include "stdafx.h" //必须写在首行,因为其前面的include都会被忽略 #include "omp.h" #include & ...

  2. 阿里云ecs云服务器安装wdcp控制面板教程

    以前就听说服务器非常的难,而且我也不懂代码,不懂英文,我怕自己学不会就买了一个月的.开始我都不知道啥样的服务器,还是我的一位哥们给我远程买的,他说这个镜像最稳定了. 服务器买好后我便开始研究,可是怎么 ...

  3. 转帖：如何建立与使用 Window setup project

    原文地址: http://www.codeproject.com/Articles/12548/Visual-Studio-Windows-Application-Setup-Project

  4. 学 Redux (转)

    0.官方文档:http://redux.js.org/ 中文版本 :  http://cn.redux.js.org/ 中文版本(好!):   http://www.css88.com/react/d ...

  5. 【leetcode】Permutations II

    Permutations II Given a collection of numbers that might contain duplicates, return all possible uni ...

  6. C++中string，wstring，CString的基本概念和用法

    一.概念 string和CString均是字符串模板类,string为标准模板类(STL)定义的字符串类,已经纳入C++标准之中.wstring是操作宽字符串的类.C++标准程序库对于string的设 ...

  7. Unity3d 换装Avatar系统

    原理就是用新造的部件和角色的骨骼进行重新对接. demo的使用方法: PartIdx设置要换那个部件[0,4],一共5个部件 EquipIdx设置要更换部件的装备索引[0,1],具体看我的Change ...

  8. android volley http请求框架

    2015年11月6日 14:35:19 注意: 1.安卓官方的volley在google的codesource上, 在github上有他的镜像android-volley, 并解决了官方的一部分bug ...

  9. 11. javacript高级程序设计-DOM扩展

    1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...

  10. Java NIO 非阻塞Socket服务器构建

    推荐阅读IBM developerWorks中NIO的入门教程,尤其是对块I/O和流I/O不太清楚的开发者. 说到socket服务器,第一反应是java.net.Socket这个类.事实上在并发和响应 ...