SOURCE

console 命令行工具 X clear

                    
>
console
var confetti = {
	maxCount: 150,		//set max confetti count
	speed: 2,			//set the particle animation speed
	frameInterval: 15,	//the confetti animation frame interval in milliseconds
	alpha: 1.0,			//the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
	gradient: false,	//whether to use gradients for the confetti particles
	start: null,		//call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
	stop: null,			//call to stop adding confetti
	toggle: null,		//call to start or stop the confetti animation depending on whether it's already running
	pause: null,		//call to freeze confetti animation
	resume: null,		//call to unfreeze confetti animation
	togglePause: null,	//call to toggle whether the confetti animation is paused
	remove: null,		//call to stop the confetti animation and remove all confetti immediately
	isPaused: null,		//call and returns true or false depending on whether the confetti animation is paused
	isRunning: null		//call and returns true or false depending on whether the animation is running
};

(function() {
	confetti.start = startConfetti;
	confetti.stop = stopConfetti;
	confetti.toggle = toggleConfetti;
	confetti.pause = pauseConfetti;
	confetti.resume = resumeConfetti;
	confetti.togglePause = toggleConfettiPause;
	confetti.isPaused = isConfettiPaused;
	confetti.remove = removeConfetti;
	confetti.isRunning = isConfettiRunning;
	var supportsAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
	var colors = ["rgba(30,144,255,", "rgba(107,142,35,", "rgba(255,215,0,", "rgba(255,192,203,", "rgba(106,90,205,", "rgba(173,216,230,", "rgba(238,130,238,", "rgba(152,251,152,", "rgba(70,130,180,", "rgba(244,164,96,", "rgba(210,105,30,", "rgba(220,20,60,"];
	var streamingConfetti = false;
	var animationTimer = null;
	var pause = false;
	var lastFrameTime = Date.now();
	var particles = [];
	var waveAngle = 0;
	var context = null;

	function resetParticle(particle, width, height) {
		particle.color = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
		particle.color2 = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
		particle.x = Math.random() * width;
		particle.y = Math.random() * height - height;
		particle.diameter = Math.random() * 10 + 5;
		particle.tilt = Math.random() * 10 - 10;
		particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
		particle.tiltAngle = Math.random() * Math.PI;
		return particle;
	}

	function toggleConfettiPause() {
		if (pause)
			resumeConfetti();
		else
			pauseConfetti();
	}

	function isConfettiPaused() {
		return pause;
	}

	function pauseConfetti() {
		pause = true;
	}

	function resumeConfetti() {
		pause = false;
		runAnimation();
	}

	function runAnimation() {
		if (pause)
			return;
		else if (particles.length === 0) {
			context.clearRect(0, 0, window.innerWidth, window.innerHeight);
			animationTimer = null;
		} else {
			var now = Date.now();
			var delta = now - lastFrameTime;
			if (!supportsAnimationFrame || delta > confetti.frameInterval) {
				context.clearRect(0, 0, window.innerWidth, window.innerHeight);
				updateParticles();
				drawParticles(context);
				lastFrameTime = now - (delta % confetti.frameInterval);
			}
			animationTimer = requestAnimationFrame(runAnimation);
		}
	}

	function startConfetti(timeout, min, max) {
		var width = window.innerWidth;
		var height = window.innerHeight;
		window.requestAnimationFrame = (function() {
			return window.requestAnimationFrame ||
				window.webkitRequestAnimationFrame ||
				window.mozRequestAnimationFrame ||
				window.oRequestAnimationFrame ||
				window.msRequestAnimationFrame ||
				function (callback) {
					return window.setTimeout(callback, confetti.frameInterval);
				};
		})();
		var canvas = document.getElementById("confetti-canvas");
		if (canvas === null) {
			canvas = document.createElement("canvas");
			canvas.setAttribute("id", "confetti-canvas");
			canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none;position:fixed;top:0");
			document.body.prepend(canvas);
			canvas.width = width;
			canvas.height = height;
			window.addEventListener("resize", function() {
				canvas.width = window.innerWidth;
				canvas.height = window.innerHeight;
			}, true);
			context = canvas.getContext("2d");
		} else if (context === null)
			context = canvas.getContext("2d");
		var count = confetti.maxCount;
		if (min) {
			if (max) {
				if (min == max)
					count = particles.length + max;
				else {
					if (min > max) {
						var temp = min;
						min = max;
						max = temp;
					}
					count = particles.length + ((Math.random() * (max - min) + min) | 0);
				}
			} else
				count = particles.length + min;
		} else if (max)
			count = particles.length + max;
		while (particles.length < count)
			particles.push(resetParticle({}, width, height));
		streamingConfetti = true;
		pause = false;
		runAnimation();
		if (timeout) {
			window.setTimeout(stopConfetti, timeout);
		}
	}

	function stopConfetti() {
		streamingConfetti = false;
	}

	function removeConfetti() {
		stop();
		pause = false;
		particles = [];
	}

	function toggleConfetti() {
		if (streamingConfetti)
			stopConfetti();
		else
			startConfetti();
	}
	
	function isConfettiRunning() {
		return streamingConfetti;
	}

	function drawParticles(context) {
		var particle;
		var x, y, x2, y2;
		for (var i = 0; i < particles.length; i++) {
			particle = particles[i];
			context.beginPath();
			context.lineWidth = particle.diameter;
			x2 = particle.x + particle.tilt;
			x = x2 + particle.diameter / 2;
			y2 = particle.y + particle.tilt + particle.diameter / 2;
			if (confetti.gradient) {
				var gradient = context.createLinearGradient(x, particle.y, x2, y2);
				gradient.addColorStop("0", particle.color);
				gradient.addColorStop("1.0", particle.color2);
				context.strokeStyle = gradient;
			} else
				context.strokeStyle = particle.color;
			context.moveTo(x, particle.y);
			context.lineTo(x2, y2);
			context.stroke();
		}
	}

	function updateParticles() {
		var width = window.innerWidth;
		var height = window.innerHeight;
		var particle;
		waveAngle += 0.01;
		for (var i = 0; i < particles.length; i++) {
			particle = particles[i];
			if (!streamingConfetti && particle.y < -15)
				particle.y = height + 100;
			else {
				particle.tiltAngle += particle.tiltAngleIncrement;
				particle.x += Math.sin(waveAngle) - 0.5;
				particle.y += (Math.cos(waveAngle) + particle.diameter + confetti.speed) * 0.5;
				particle.tilt = Math.sin(particle.tiltAngle) * 15;
			}
			if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
				if (streamingConfetti && particles.length <= confetti.maxCount)
					resetParticle(particle, width, height);
				else {
					particles.splice(i, 1);
					i--;
				}
			}
		}
	}
})();
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script src="congrats.js"></script>

    <link rel="stylesheet" href="style.css">

</head>

<body style="margin:0;">
    <div class="outer">

        <div class="sink"></div>
        <div class="result"></div>
        <div class="submit btn">submit</div>
        <div class="reload btn">reload</div>
        <div class="given"></div>
    </div>

</body>
<script>
    var wordList = [
        'action',
        'happy',
        'doom',
        'sail'

    ];
    (function puzzle() {
        var $given = $('.given')
        var $sink = $('.sink')
        var $submit = $('.submit')
        var $result = $('.result')
        var $reload = $('.reload')

        var chosen = wordList.pop()

        $submit.show()
        $result.empty()
        $reload.hide()
        $sink.empty()

        for (char of chosen) {
            $given.append(`<div class="char">${char}</div>`)
        }
        $sink.css({
            'width': chosen.length * 60
        })
        $('.char').one('click',function () {
            $(this).appendTo($sink)
        })
        $submit.one('click',function () {
            $innerText = $sink.text()
            if ($innerText == chosen) {
                $result.append('Let\'s Dance ��')
                confetti.start()


            } else {
                $result.append('Wrong❌')
            }
            $reload.show()
            $submit.hide()
        })
        $reload.one('click',puzzle)
        confetti.stop()
    })();
</script>

</html>
.outer {
    display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #8BC0FF;

}


.sink {
    /* box-sizing: border-box; */
    -webkit-box-shadow: inset 3px 2px 5px 1px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: inset 3px 2px 5px 1px rgba(0, 0, 0, 0.22);
    box-shadow: inset 3px 2px 5px 1px rgba(0, 0, 0, 0.22);

    -webkit-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.29);
    -moz-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.29);
    box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.29);

    border-radius: 3px;
    display: flex;
    flex-direction: row;
    background-color: #F3F3F3;
    height: 60px;
    border-width: 6px;
    border-color: white;
    border-style: solid;
}

.given {
    margin-top: 60px;
    display: flex;
    flex-direction: row;
    height: 45px;

}

.animate {
    animation-name: shift;
}

@keyframes shift {}

.char {
    box-sizing: border-box;
    text-transform: capitalize;
    border-width: 1px;
    border-color: #EBEBEB;
    border-style: solid;
    width: 60px;
    height: 60px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn {

    -webkit-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.29);
    -moz-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.29);
    box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.29);

    text-transform:uppercase;
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    background-color: #6AD0FF;
    padding: 3px 5px 3px 5px;
    margin-top: 50px;
    color: white;
    font-size: larger;
    font-family: Arial, Helvetica, sans-serif;
    /* align-self: flex-start; */
}
.test {
    background-color: red;

}

.result {
    margin-top: 10px;
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
}