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 相关文章推荐
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
Javascript学习指南
Dec 01 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
基于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中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
php实现httpclient类示例
2014/04/08 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
刷新时清空文本框内容的js代码
2007/04/23 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
解析vue中的$mount
2017/12/21 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python扩展内置类型详解
2018/03/26 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
python模拟斗地主发牌
2020/04/22 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
加拿大最大的书店:Indigo
2017/01/01 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
Python进度条的使用
2021/05/17 Python