Skip to content

Instantly share code, notes, and snippets.

@Xiradorn

Xiradorn/disappearing-box.html

Created October 9, 2015 17:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Xiradorn/b45aaf1eaad6eb9275d4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Xiradorn/b45aaf1eaad6eb9275d4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
disappearing-box.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>html,body{width:100%;height:100%;position:relative;background:#eee;text-align:center;margin:0;padding:0;}#demo{background:crimson;width:200px;margin:0 auto;text-align:center;height:200px;display:block;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;vertical-align:middle;}#tastoAutoNasconde{display:inline-block;border:1px solid grey;padding:6px 16px;border-radius:6px;text-decoration:none;margin:0 auto;text-align:center;color:grey;cursor:pointer;background:black;overflow:hidden;}#demo span{padding:45% 0;height:10%;display:block;}</style>
</head>
<body>
<h3>Il box riapparir&agrave; tra <span id="countDown">4</span> secondi</h3>
<a href="#" id="tastoAutoNasconde">Clicca qua</a>
<div id="demo"><span>testo</span></div>
<script>
'use strict'
var bottone, demo, cDw, cVal;
bottone = document.getElementById('tastoAutoNasconde');
demo = document.getElementById('demo');
cDw = document.getElementById('countDown');
cVal = cDw.innerHTML;
var cValTemp = cVal;
bottone.onclick = miaFunzione;
function miaFunzione(e) {
e.preventDefault();
demo.style.visibility = "hidden";
setTimeout(function() {
demo.style.visibility = "visible";
}, 4000);
countDown();
}
function countDown() {
timer = setTimeout(function() {
cDw.innerHTML = --cVal;
if (cVal > 0) {
countDown();
} else {
cDw.innerHTML = cValTemp;
cVal = cValTemp;
}
}, 1000);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment