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 相关文章推荐
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
JavaScript中Require调用js的实例分享
Oct 27 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
多文件上载系统完整版
2006/10/09 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
js读取配置文件自写
2014/02/11 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python中的进程分支fork和exec详解
2015/04/11 Python
简单易懂的python环境安装教程
2017/07/13 Python
python爬虫增加访问量的方法
2019/08/22 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
UNIX特点都有哪些
2016/04/05 面试题
幼儿园户外活动总结
2014/07/04 职场文书
网络管理员岗位职责
2015/02/12 职场文书
营运督导岗位职责
2015/04/10 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
Nginx反向代理、重定向
2022/04/13 Servers