javascript - Show Countdown after button click -

-

i have code html

<div id="container">     <a href="#container">show content</a>     <div id="content">i content!</div> </div>

how when click show content echo countdown (12s) before show <div id="content">i content!</div>

give me example work. thanks

edit: example updated show elements when countdown starts , hide them when countdown ends. when user clicks on link, counttoshow function invoked. initialy hidden 'ads' element shown command adselement.style.display = '' (which removes display: none style specified inline). when countdown ends (remainingseconds === 0), hide 'ads' element again setting adselement.style.display = 'none'.

here example using setinterval function possibility specify countdown time.

function counttoshow(timeinseconds) {      var countdownelement = document.getelementbyid('countdown');    var contentelement = document.getelementbyid('content');    var adselement = document.getelementbyid('ads');    var remainingseconds = timeinseconds;      adselement.style.display = '';    countdownelement.innerhtml = remainingseconds;      var interval = setinterval(function() {        countdownelement.innerhtml = --remainingseconds;        if (remainingseconds === 0) {        clearinterval(interval);        contentelement.style.display = '';        adselement.style.display = 'none';      }      }, 1000);  }
<div id="container">    <a href="#container" onclick="counttoshow(12)">show content</a>    <div id="ads" style="display: none">      <div id="countdown"></div>      <div>ads</div>    </div>    <div id="content" style="display: none">i content!</div>  </div>


Comments

Post a Comment

Popular posts from this blog

python - Setting ctypes.Structure default values -

-
this doesn't work: class ifinfomsg(ctypes.structure): _fields_ = [ ('ifi_family', ctypes.c_ubyte), ('__ifi_pad', ctypes.c_ubyte), ('ifi_type', ctypes.c_ushort), ('ifi_index', ctypes.c_int), ('ifi_flags', ctypes.c_uint), ('ifi_change', ctypes.c_uint(0xffffffff)) ] it errors with: file "rtnetlink.py", line 243, in <module> class ifinfomsg(ctypes.structure): typeerror: error when calling metaclass bases second item in _fields_ tuple (index 5) must c type however can set values in __init__() : class ifinfomsg(ctypes.structure): _fields_ = [ ('ifi_family', ctypes.c_ubyte), ('__ifi_pad', ctypes.c_ubyte), ('ifi_type', ctypes.c_ushort), ('ifi_index', ctypes.c_int)...
Read more

javascript - Hide toolbar of pdf file opened inside iframe using firefox -

-
other browsers such chrome,ie working fine when given #toolbar=0.but not working in firefox. please help. this code. <html> <body> <iframe src="reports/reports.pdf#toolbar=0" width="100%;" height="80%"> </iframe> </html> i think it's dependent on application/plugin in browser opens pdf, works differently , might ignore there directives (depending on browser, plugin, platform, pdf viewer). the general recommendation here use these "directives" @ end of url: #toolbar=0&navpanes=0 you may try recommendations http://blogs.adobe.com/pdfdevjunkie/web_designers_guide : embedding using pdfobject you use basic html markup embed pdf files in page there more elegant solution out there. take @ pdfobject philip hutchison. pdfobject pretty easy scripting tool dynamically embedding pdf files web pages. uses javascript inject element dom tree of html file. there’s...
Read more

Ansible - ERROR! the field 'hosts' is required but was not set -

-
i've error when launch playbook don't found why.... error! field 'hosts' required not set there main.yml : --- - hosts: hosts - vars: - elasticsearch_java_home: /usr/lib/jmv/jre-1.7.0 - elasticsearch_http_port: 8443 - tasks: - include: tasks/main.yml - handlers: - include: handlers/main.yml and /etc/ansible/hosts : [hosts] 10.23.108.182 10.23.108.183 10.23.108.184 10.23.108.185 when test ping, : [root@poste08-08-00 elasticsearch]# ansible hosts -m ping 10.23.108.183 | success => { "changed": false, "ping": "pong" } 10.23.108.182 | success => { "changed": false, "ping": "pong" } 10.23.108.185 | success => { "changed": false, "ping": "pong" } 10.23.108.184 | success => { "changed": false, "ping": "pong" } please, me :) regards, you have syntax error in playbook. ...
Read more