原生js实现随机雪花落下特效

原生js随机生成不同数量、速度不同的雪花从屏幕上方落下，可修改各种配置生成自己的雪花特效。

var snowStatus = false;
var snow1 = './images/snow1.png'; //雪花图片1
var snow2 = './images/snow2.png'; //雪花图片2
var $MaxX = document.documentElement.clientWidth;
var $MaxY = document.documentElement.clientHeight;
var zIndex = 9994;
var snowBox = document.createElement('div');
document.body.appendChild(snowBox);
var snowData = {
	status: false
}

//开始下雪
function beginSnow(){
	snowData.status = true;
	var randomTime2 = randomNum(0,4000); //随机时间召唤一个雪花
	createSnow();
	setTimeout(randomTime,randomTime2)
}

//停止下雪
function stopSnow(){
	snowData.status = false
}

function removeSnow(){
	snowBox.remove();
}


function randomTime(){
	if(snowData.status){
		var randomTime2 = randomNum(0,4000); //随机时间召唤一个雪花
		createSnow();
		setTimeout(randomTime,randomTime2)
	}
}
function createSnow(){
	var snowWidth = randomNum(50,80); //雪花的随机大小
	var randomX = randomNum(0,$MaxX - snowWidth); 
	var randomNumm = randomNum(1,2);//雪花的随机图片
	var $randomImg = document.createElement('img');
	
	var snowSpeed = randomNum(8,12);
	snowBox.appendChild($randomImg);
	$randomImg.setAttribute('style',`width: ${snowWidth}px;height: auto;position:fixed;z-index:${zIndex};top:-${snowWidth}px;left:${randomX}px;`);
	if(randomNumm == 1){
		$randomImg.setAttribute('src',snow1);
	}else{
		$randomImg.setAttribute('src',snow2);
	}
	var normalStyle = `width: ${snowWidth}px;height: auto;position:fixed;z-index:${zIndex};top:-${snowWidth}px;left:${randomX}px;`

	setTimeout((res) => {
		$randomImg.setAttribute('style',normalStyle + `transform: translateY(${$MaxY + snowWidth}px) rotateZ(360deg);transition: transform ${snowSpeed}s linear`);

		setTimeout((res) => {
			$randomImg.setAttribute('style',normalStyle + `transform: translateY(${$MaxY + snowWidth}px) rotateZ(360deg);opacity: 1;transition: transform,opacity ${snowSpeed}s,1s linear`);
			setTimeout((res) => {
				$randomImg.setAttribute('style',normalStyle + `transform: translateY(${$MaxY + snowWidth}px) rotateZ(360deg);opacity: 0;transition: transform,opacity ${snowSpeed}s,2s linear`);
				setTimeout((res) => {
					$randomImg.remove();
				},2000)
			},2000)
		},snowSpeed * 1000 - 4000)
		
		

		
	},100)

}
// 创建一个minNum到maxNum的随机数字
function randomNum(minNum,maxNum){ 
    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minNum+1,10); 
        break; 
        case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
        break; 
            default: 
                return 0; 
            break; 
    } 
}