javascript实现随机显示星星特效


Posted in Javascript onJanuary 28, 2016

本文实例讲解了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 相关文章推荐
JavaScript 原型与继承说明
Jun 09 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 #Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 #Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 #Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 #Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 #Javascript
不用一句js代码初始化组件
Jan 27 #Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 #Javascript
You might like
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
php自动获取关键字的方法
2015/01/06 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
使用正则替换变量
2007/05/05 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python re模块的高级用法详解
2018/06/06 Python
python设置值及NaN值处理方法
2018/07/03 Python
如何基于python实现不邻接植花
2020/05/01 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
高三历史教学反思
2014/01/09 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
学校节能减排倡议书
2014/05/16 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL