js實(shí)現(xiàn)漫天星星效果
更新時(shí)間：2017年01月19日 15:09:38 作者：yangzailu
這篇文章主要為大家詳細(xì)介紹了js點(diǎn)擊出漫天的小星星，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了漫天小星星效果的實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
效果圖：
實(shí)現(xiàn)代碼：
<html onclick="init(event)">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
//點(diǎn)出漫天小星星
//背景色
//給html添加onclick事件
//創(chuàng)建圖片節(jié)點(diǎn)，并追加到body父節(jié)點(diǎn)下
//圖片的隨機(jī)大小
function init(e){
//創(chuàng)建圖片節(jié)點(diǎn)（在內(nèi)存中，還看不見）
var imgObj=document.createElement("img");
//追加節(jié)點(diǎn)
document.body.appendChild(imgObj);
//添加屬性
imgObj.src="xingxing.gif";
//添加width屬性
imgObj.width=getRandom(15,85);
//定位
var x=e.clientX? e.clientX : event.clientX;
var y=e.clientY? e.clientY : event.clientY;
imgObj.style.position="absolute";
imgObj.style.left=x - imgObj.width/2+"px";
imgObj.style.top=y- imgObj.width/2+"px";
}
function getRandom(min,max){
return Math.floor(Math.random()*(max-min)+min);
}
</script>
</head>
<body style="background-color:black" >
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
十個(gè)你必須要會(huì)的TypeScript技巧分享
學(xué)習(xí)Typescript通常是一個(gè)重新發(fā)現(xiàn)的過程。這篇文章為大家整理了十個(gè)你必須要會(huì)的TypeScript技巧，希望對大家學(xué)習(xí)TypeScript有所幫助2023-06-06
本文主要對原生JS獲取元素集合的子元素寬度的實(shí)現(xiàn)方法進(jìn)行介紹，代碼詳細(xì)，具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
今天咱們就來聊聊KeyCode被棄用后的問題,希望對大家有所啟發(fā),如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
使用純JS代碼判斷字符串中有多少漢字的實(shí)現(xiàn)方法(超簡單實(shí)用)
這篇文章主要給大家介紹了js判斷字符串中有多少漢字的實(shí)現(xiàn)方法然后給大家分享了使用JS判斷輸入字符串長度的兩種方法，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-11-11
這篇文章主要教大家如何簡單實(shí)現(xiàn)js放大鏡效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript結(jié)合Bootstrap仿微信后臺(tái)多圖文界面管理
這篇文章主要為大家詳細(xì)介紹了js結(jié)合Bootstrap仿微信后臺(tái)多圖文界面管理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
JS控件bootstrap datepicker使用方法詳解
這篇文章主要介紹了js控件bootstrap datepicker的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript函數(shù)柯里化實(shí)現(xiàn)原理及過程
這篇文章主要介紹了JavaScript函數(shù)柯里化實(shí)現(xiàn)原理及過程,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
這篇文章主要介紹了微信小程序開發(fā)技巧匯總,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
為了給用戶一個(gè)流暢的體驗(yàn),token過期后需要重新請求新的token替換過期的token。本文將詳細(xì)介紹uniapp無痛刷新token方法。2021-06-06