这篇文章主要介绍了 javascript 实现随机显示星星特效的相关资料, 以一个完整实例形式较为详细的分析了 js 实现随机显示星星特效的实现技巧,需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <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 程序设计有所帮助。
来源: