javascript实现随机显示星星特效_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

javascript实现随机显示星星特效_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:17 PM

本文实例讲解了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程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7392

Java教程

1630

CakePHP 教程

1357

Laravel 教程

1268

PHP教程

1216

显示更多

Related knowledge

在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

8令人惊叹的jQuery页面布局插件 Mar 06, 2025 am 12:48 AM

利用轻松的网页布局：8个基本插件 jQuery大大简化了网页布局。本文重点介绍了简化该过程的八个功能强大的JQuery插件，对于手动网站创建特别有用

构建您自己的Ajax Web应用程序 Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

10个JQuery Fun and Games插件 Mar 08, 2025 am 12:42 AM

10款趣味横生的jQuery游戏插件，让您的网站更具吸引力，提升用户粘性！虽然Flash仍然是开发休闲网页游戏的最佳软件，但jQuery也能创造出令人惊喜的效果，虽然无法与纯动作Flash游戏媲美，但在某些情况下，您也能在浏览器中获得意想不到的乐趣。 jQuery井字棋游戏游戏编程的“Hello world”，现在有了jQuery版本。源码 jQuery疯狂填词游戏这是一个填空游戏，由于不知道单词的上下文，可能会产生一些古怪的结果。源码 jQuery扫雷游戏