0
No! Not my money!
source link: https://codepen.io/reidjf/pen/xxLOrOO
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Pen Settings
HTML Preprocessor
Add Class(es) to <html>
Stuff for <head>
0 unsaved changes
xxxxxxxxxx
<div id="container">
<h1>Thanks for your purchase of: 15,000 USD !</h1>
<h2>Below is your last chance to cancel</h2>
<div class="ghost">
<button class="cancel-btn" type="button">Cancel?</button>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
body,
html {height: 100%;
display: grid;
}
body {font-family: Lato, sans-serif;
background: #f9a825;
transition: background 0.25s linear;
}
h1 {margin: 0;
}
#container {display: flex;
xxxxxxxxxx
let cancelButton = document.querySelector(".cancel-btn");let ghost = document.querySelector(".ghost");let pityCount = 0;
let words = [
"Nice try",
"whew close!",
"missed me!",
"are you even trying?",
"Too slow!",
"Given up yet?",
"you'll never catch me!"
];
function runAway(e) { ghost.classList.add("appear");document.body.style = `background: #212121;
color: red;`;
event.stopPropagation();
pityCount += 1;
if (pityCount < 20) {Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK