javascript实现随机显示星星特效

本文实例讲解了javascript实现随机显示星星特效的详细代码，具体内容如下

  • （1）网页背景是黑的 
  • （2）星星随机大小：min=15,max=80 
  • （3）星星的坐标是随机的：
  •               x_left=0,x_right=(浏览器宽-星星宽)
  •               y_top=0,y_bottom=?
  • （4）单击某个星星，星星消失
  • （5）网页加载完成，开始显示星星
  • （6）定时器：每隔一个周期，插入一个星星
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//定义全局变量
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>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js实现漫天星星效果

    js实现漫天星星效果

    本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下 效果图: 实现代码: <html onclick="init(event)"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script ty

  • 基于JavaScript实现飘落星星特效

    基于JavaScript实现飘落星星特效

    本文实例为大家分享了js飘落星星特效的具体代码,供大家参考,具体内容如下 1.效果图 2.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ position: absolute; } body { background-image: u

  • js实现飞入星星特效代码

    本文实例讲述了js实现飞入星星特效代码,分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <html> <head> <title>星空极速飞入效果</title> <style type="text/css"> <!-- body { background-color: #000066; } --> </style> </head> <body> <scr

  • javascript实现随机显示星星特效

    本文实例讲解了javascript实现随机显示星星特效的详细代码,具体内容如下 (1)网页背景是黑的  (2)星星随机大小:min=15,max=80  (3)星星的坐标是随机的:               x_left=0,x_right=(浏览器宽-星星宽)               y_top=0,y_bottom=? (4)单击某个星星,星星消失 (5)网页加载完成,开始显示星星 (6)定时器:每隔一个周期,插入一个星星 <html> <head> <meta h

  • javascript随机显示背景图片的方法

    本文实例讲述了javascript随机显示背景图片的方法.分享给大家供大家参考.具体如下: 将以下代码加入HTML的<head></head>之间: <script LANGUAGE="JavaScript"> bg = new Array(2); //设定图片数量,如果图片数为3,这个参数就设为2,依次类推 bg[0] = 'bg1.gif' //显示的图片路径,可用http:// bg[1] = 'bg2.gif' bg[2] = 'bg3.gi

  • JavaScript实现的鼠标跟随特效示例【2则实例】

    JavaScript实现的鼠标跟随特效示例【2则实例】

    本文实例讲述了JavaScript实现的鼠标跟随特效.分享给大家供大家参考,具体如下: 鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一.本文将将一些与鼠标有关系的特效. 1.跟随鼠标移动的彩色星星 如题,会根据鼠标的移动而移动,并在鼠标周围随机来回移动,让人感觉在放大缩小.根据书上的代码做了一些修改.比如,如果用户不移动鼠标,是不会显示星星效果的:其次就是将源代码中的亮度调节等去掉了,因为效果并不是很明显.截了三幅图,黑点近似代表鼠标的位置.效果图如下: 源代码: <html>

  • JS实现页面载入时随机显示图片效果

    本文实例讲述了JS实现页面载入时随机显示图片效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS 随机图片效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- img { b

  • javascript完美随机广告代码

    如果你的主页中需要随机显示图片或者链接banner,你该怎么实现呢? 下面是一个随机显示五条Banner的代码,你可以自己定义的. 代码: 复制代码 代码如下: <script language=javascript> var m=5; //共几个Banner随机显示 var n=Math.floor(Math.random()*m+1) switch(n) { case 1: document.write('Banner1的HTML'); break; case 2: document.wr

  • JavaScript实现随机替换图片的方法

    本文实例讲述了JavaScript实现随机替换图片的方法.分享给大家供大家参考.具体如下: 下面代码可实现将页面上的图片随机替换成别的图片,或者随机显示一个图片 <script> document.write(<img src="img/+parseInt(Math.random()*(5)) +.gif"height="40" width="50"> </script> 其中的图片文件名为: 0.gif 1.

  • PHP 获取目录下的图片并随机显示的代码

    当时想做一个随机更换背景图片的功能,用JavaScript写的话,程序流程应该是:建立一个图片数组->随机选择数组里其中一个值->生成样式并写入body标签. 可是用JS做的话,有以下缺点: 1.万一浏览器禁用了JS的话就失效了,而且写代码是需要考虑兼容性. 2.维护比较麻烦,图片的位置都存放在数组里. 于是我提议用PHP处理,可是我和她对PHP都是半桶水的,一时之间也想不出怎么做.今天时运高,看到一个PHP随机显示目录下图片的源码,学习一下,并分享之. 先看看原理:从一个目录里获取某类型文件

  • JS实现网页标题随机显示名人名言的方法

    JS实现网页标题随机显示名人名言的方法

    本文实例讲述了JS实现网页标题随机显示名人名言的方法.分享给大家供大家参考,具体如下: 这段代码实现每次刷新过后,网页的标题都会随机显示名人名言,一次一条,把这些名言定义在Javascript的数组内,每次调用随机调用一条,随机产生的随机数正好是数组的标号,这样就实现了随机,不错的效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-show-tips-style-codes/ 具体代码如下: <!DOCTYPE html

随机推荐