javascript实现随机显示星星特效
更新时间：2016年01月28日 08:55:33 作者：gyz418
这篇文章主要介绍了javascript实现随机显示星星特效的相关资料,以一个完整实例形式较为详细的分析了js实现随机显示星星特效的实现技巧，需要的朋友可以参考下
本文实例讲解了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程序设计有所帮助。
相关文章
javascript数组使用调用方法汇总...2007-12-12
下面小编就为大家带来一篇浅谈JavaScript 覆盖原型以及更改原型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随过来看看吧2016-08-08
Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用,下面这篇文章主要给大家介绍了关于uniapp使用Vant-weapp的最新方法教程,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了JS字符串和数组如何实现相互转化,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了JS实现兼容各种浏览器的高级拖动方法,以完整实例形式分析了JS实现响应鼠标事件动态修改页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
JavaScript的removeChild()函数用法详解
removechild 函数可以删除父元素的指定子元素，通过本文给大家介绍javascript的removeChild()函数用法，对js removechild函数相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章介绍了JavaScript中的事件处理程序，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
这篇文章主要介绍了js实现的页面矩阵图形变换特效,涉及JavaScript利用数组与字符串的数学运算操作页面节点样式变换的相关技巧,需要的朋友可以参考下2016-01-01
10个很少使用的JavaScript Console方法分享
你一定听说过 console.log() ,而且可能一直在使用它,在本文中,我们将探讨一些最有用的控制台方法,以及它们在数据可视化、调试等方面的用途,感兴趣的小伙伴可以学习一下2023-09-09
这篇文章主要介绍了简单的JavaScript互斥锁的相关资料,需要的朋友可以参考下2014-02-02
最新评论