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评估用户输入密码的强度实现代码
Nov 30 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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对XML的操作详解
2013/06/07 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
ThinkPHP安装和设置
2015/07/27 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
Javascript中的delete介绍
2012/09/02 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
Python pymongo模块用法示例
2018/03/31 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
python里运用私有属性和方法总结
2019/07/08 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
安踏广告词改编版
2014/03/21 职场文书
网站推广策划方案
2014/06/04 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
作风建设年度心得体会
2014/10/29 职场文书
北大自主招生自荐信
2015/03/04 职场文书
付款证明模板
2015/06/19 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js
mysql函数之截取字符串的实现
2022/08/14 MySQL