js | 網頁點擊特效 隨機emoji
參考了別人的代碼自己改了一下,直接貼上就能用:
<script type="text/javascript">
// 點擊特效
let create_emoji = function(e){
// 獲取隨機emoji的函數
let get_rand_emoji = function(){
// 表情列表
let emoji_dict = ['😀','😃','😄','😁','😆','😅','😂','🤣','☺','😊','😚','😙','😗','😘','😍','😌','😉','🙃','🙂','😇','😋','😜','😝','😛','🤑','🤗','🤓','😎','🤡','🤠','😖','😣','☹','🙁','😕','😟','😔','😞','😒','😏','😫','😩','😤','😠','😡','😶','😐','😑','😯','😦','😥','😢','😨','😱','😳','😵','😲','😮','😦','🤤','😭','😪','😴','🙄','🤔','😬','🤥','🤐','💩','👺','👹','👿','😈','🤕','🤒','😷','🤧','🤢','👻','💀','☠','👽','👾','🤖','🎃','😺','😸','😹','🙏','👏','🙌','👐','😾','😿','🙀','😽','😼','😻','❤']
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
return emoji_dict[getRndInteger(0, emoji_dict.length-1)]
}
let anim // 動畫計時器
let increase=0 // 動畫位置控制
let emoji = document.createElement("b") // 創建一個元素
emoji.style.color = "#E94F06" // 設置顏色
emoji.style.zIndex = 9999 // 設置置於頂層
emoji.style.position = "fixed" // 設置屏幕絕對定位
emoji.style.userSelect = "none" // 設置不可選中
let x = e.clientX
let y = e.clientY // 獲取位置
emoji.style.left = (x-10)+ "px"
emoji.style.top = (y-15) + "px" // 將位置擺到中間
emoji.innerText = get_rand_emoji() // 獲取隨機表情
emoji.style.fontSize = Math.random() * 10 + 8 + "px" // 大小
clearInterval(anim) // 清除計時器
let $body = document.getElementsByTagName("body")[0]
$body.appendChild(emoji) // 添加元素
anim = setInterval( // 啟動動畫
function(){
if (++increase == 150){
clearInterval(anim)
$body.removeChild(emoji)
}
// 移動元素
emoji.style.top = (y-15) - increase + "px";
emoji.style.opacity = (150 - increase) / 120;
},
10
);
};
(function() {
let $html = document.getElementsByTagName("html")[0]
$html.onclick = function(e) {
create_emoji(e)
}
})();
</script>