javascript實現(xiàn)隨機(jī)顯示星星特效
更新時間：2016年01月28日 08:55:33 作者：gyz418
這篇文章主要介紹了javascript實現(xiàn)隨機(jī)顯示星星特效的相關(guān)資料,以一個完整實例形式較為詳細(xì)的分析了js實現(xiàn)隨機(jī)顯示星星特效的實現(xiàn)技巧，需要的朋友可以參考下
本文實例講解了javascript實現(xiàn)隨機(jī)顯示星星特效的詳細(xì)代碼，具體內(nèi)容如下
- （1）網(wǎng)頁背景是黑的
- （2）星星隨機(jī)大?。簃in=15,max=80
- （3）星星的坐標(biāo)是隨機(jī)的：
- x_left=0,x_right=(瀏覽器寬-星星寬)
- y_top=0,y_bottom=?
- （4）單擊某個星星，星星消失
- （5）網(wǎng)頁加載完成，開始顯示星星
- （6）定時器：每隔一個周期，插入一個星星
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(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;
//定時器
setInterval("showStar()",1000);
}
//顯示星星
function showStar()
{
//創(chuàng)建一個圖片
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);
//增加一個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程序設(shè)計有所幫助。
相關(guān)文章
Javascript立即執(zhí)行函數(shù)(IIFE)實例詳解
IIFE全拼Imdiately?Invoked?Function?Expression,是一個在定義的時候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
webpack默認(rèn)只能處理js其他的像css,圖片都需要借助loader來處理,這篇文章主要介紹了webpack-loader的使用詳解,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了前端 javascript 實現(xiàn)文件下載的示例2020-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view仿拼多多橫向滑動滾動條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript實現(xiàn)班級隨機(jī)點名小應(yīng)用需求的具體分析
班級隨機(jī)點名小應(yīng)用，點擊開始按鈕，人員的顏色開始變化，當(dāng)停止的時候，會有一個顏色不同的位置，那么這個位置就是被點到的同學(xué)了2014-05-05
開發(fā)中常見的組件主要分為公共組件和頁面組件兩種,因此注冊組件的方式也分為兩種全局注冊和局部注冊,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
微信小程序 數(shù)據(jù)緩存實現(xiàn)方法詳解
這篇文章主要介紹了微信小程序 數(shù)據(jù)緩存實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
在以前，總是以為使用用戶代理字符串檢測瀏覽器是那種類型就行了，這樣確實大錯特錯啊，下面就來說說如何通過js判斷出當(dāng)前瀏覽者使用的的設(shè)備類型呢2015-12-12
Web?Components使用生命周期回調(diào)函數(shù)實例詳解
這篇文章主要為大家介紹了Web?Components使用生命周期回調(diào)函數(shù)實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
無間斷滾動marquee的詳細(xì)用法解析...2006-08-08