快捷導(dǎo)航

javascript實(shí)現(xiàn)隨機(jī)顯示星星特效

更新時(shí)間：2016年01月28日 08:55:33 作者：gyz418

這篇文章主要介紹了javascript實(shí)現(xiàn)隨機(jī)顯示星星特效的相關(guān)資料,以一個(gè)完整實(shí)例形式較為詳細(xì)的分析了js實(shí)現(xiàn)隨機(jī)顯示星星特效的實(shí)現(xiàn)技巧，需要的朋友可以參考下

本文實(shí)例講解了javascript實(shí)現(xiàn)隨機(jī)顯示星星特效的詳細(xì)代碼，具體內(nèi)容如下

（1）網(wǎng)頁(yè)背景是黑的
（2）星星隨機(jī)大?。簃in=15,max=80
（3）星星的坐標(biāo)是隨機(jī)的：
x_left=0,x_right=(瀏覽器寬-星星寬)
y_top=0,y_bottom=?
（4）單擊某個(gè)星星，星星消失
（5）網(wǎng)頁(yè)加載完成，開(kāi)始顯示星星
（6）定時(shí)器：每隔一個(gè)周期，插入一個(gè)星星

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無(wú)標(biāo)題文檔</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;

//定義初始化的函數(shù)
function init()
{
 document.body.bgColor = "#000";
 x_right = window.innerWidth - img_width_max;
 y_bottom = window.innerHeight - img_width_max;
 //定時(shí)器
 setInterval("showStar()",1000);
}
//顯示星星
function showStar()
{
 //創(chuàng)建一個(gè)圖片
 var node_img = document.createElement("img");
 //隨機(jī)圖片大小和隨機(jī)坐標(biāo)
 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);
 //增加一個(gè)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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Javascript立即執(zhí)行函數(shù)(IIFE)實(shí)例詳解
IIFE全拼Imdiately?Invoked?Function?Expression,是一個(gè)在定義的時(shí)候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
webpack-loader的使用詳解
webpack默認(rèn)只能處理js其他的像css,圖片都需要借助loader來(lái)處理,這篇文章主要介紹了webpack-loader的使用詳解,需要的朋友可以參考下
2024-04-04
前端 javascript 實(shí)現(xiàn)文件下載的示例
這篇文章主要介紹了前端 javascript 實(shí)現(xiàn)文件下載的示例
2020-11-11
微信小程序scroll-view仿拼多多橫向滑動(dòng)滾動(dòng)條
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view仿拼多多橫向滑動(dòng)滾動(dòng)條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
JavaScript實(shí)現(xiàn)班級(jí)隨機(jī)點(diǎn)名小應(yīng)用需求的具體分析
班級(jí)隨機(jī)點(diǎn)名小應(yīng)用，點(diǎn)擊開(kāi)始按鈕，人員的顏色開(kāi)始變化，當(dāng)停止的時(shí)候，會(huì)有一個(gè)顏色不同的位置，那么這個(gè)位置就是被點(diǎn)到的同學(xué)了
2014-05-05
微信小程序自定義組件和通信的方法
開(kāi)發(fā)中常見(jiàn)的組件主要分為公共組件和頁(yè)面組件兩種,因此注冊(cè)組件的方式也分為兩種全局注冊(cè)和局部注冊(cè),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-06-06
微信小程序數(shù)據(jù)緩存實(shí)現(xiàn)方法詳解
這篇文章主要介紹了微信小程序數(shù)據(jù)緩存實(shí)現(xiàn)方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
Javascript實(shí)現(xiàn)檢測(cè)客戶端類型代碼封包
在以前，總是以為使用用戶代理字符串檢測(cè)瀏覽器是那種類型就行了，這樣確實(shí)大錯(cuò)特錯(cuò)啊，下面就來(lái)說(shuō)說(shuō)如何通過(guò)js判斷出當(dāng)前瀏覽者使用的的設(shè)備類型呢
2015-12-12
Web?Components使用生命周期回調(diào)函數(shù)實(shí)例詳解
這篇文章主要為大家介紹了Web?Components使用生命周期回調(diào)函數(shù)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
無(wú)間斷滾動(dòng)marquee的詳細(xì)用法解析
無(wú)間斷滾動(dòng)marquee的詳細(xì)用法解析...
2006-08-08