html - Set an initial value for a Javascript Count Down Timer -

-

i trying make countdown timer starts click of button.

i have gotten work minutes , seconds cannot seem figure out how static time display prior button click.

what wondering how time display on webpage above start button (in case 59 min 59 sec) , start countdown function once button hit?

<head> <input type="button" onclick="countdown('countdown');" value="start" /> <script type="text/javascript"> var cdtime; var minutes = 59; var seconds = 59;  function countdown(element) {     cdtime = setinterval(function() {         var timer = document.getelementbyid(element);         if(seconds == 0) {             if(minutes == 0) {                 alert(timer.innerhtml = "countdown's over!");                                     clearinterval(cdtime);                 return;             } else {                 minutes--;                 seconds = 60;             }         }         if(minutes > 0) {             var minutetxt = minutes + (minutes > 1 ? ' minutes' : 'minute');         } else {             var minutetxt = '';         }         var secondstxt;         if(seconds > 1) {             secondstxt = 'seconds';          } else {              secondstxt = 'second';         }          timer.innerhtml = minutetxt + ' ' + seconds + ' ' + secondstxt;         seconds--;     }, 1000); } </script>  </head> <body> <div id='countdown'></div> </body> </html>

  • create div , use set inner html of div using javascript (i did after defining minutes , seconds).

  • also bring elements out of header , bring them inside body

  • if don't use jquery wait window complete loading, bring script after html elements.

    var cdtime;      var minutes = 59;      var seconds = 59;       document.getelementbyid("initialtime").innerhtml=minutes+":"+seconds;    function countdown(element) {      cdtime = setinterval(function() {          var timer = document.getelementbyid(element);          if(seconds == 0) {              if(minutes == 0) {                  alert(timer.innerhtml = "countdown's over!");                                      clearinterval(cdtime);                  return;              } else {                  minutes--;                  seconds = 60;              }          }          if(minutes > 0) {              var minutetxt = minutes + (minutes > 1 ? ' minutes' : 'minute');          } else {              var minutetxt = '';          }          var secondstxt;              if(seconds > 1)              {              secondstxt = 'seconds';               }              else              {               secondstxt = 'second';              }              timer.innerhtml = minutetxt + ' ' + seconds + ' ' + secondstxt;          seconds--;      }, 1000); }
<body>   <div id="initialtime"></div>  <input type="button" onclick="countdown('countdown');" value="start" />  <div id='countdown'></div>   </body>


Comments

Post a Comment

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

-
i looking @ how website designed using inspector in chrome. can use firefox developer tools or firefox web developer add-on or chrome web developer extension. so website has slide-show , using jquery it. looking @ markup , css in inspector, i see 2 things constantly changing slides change: one opacity css property understandable, i'd see changing values, changes fast see read anything. second- a div added in div slides change momentarily , moment when appears short notice except div . so question is there way stop slideshow can temporarily rid of blinking sort of effect (by speedy adding , removal , changing of elements , values)? where can inspect div element gets added such short moment , , gets removed? , can see changes in value of opacity takes place? is there way stop slideshow can temporarily rid of blinking sort of effect (by speedy adding , removal , changing of elements , values)? if opacity animated css transition or animation,
Read more

angularjs - Showing an empty as first option in select tag -

-
my app showing empty select field first entry. have read other solution given , tried still not working. my controller code is: .controller('usercreatecontroller', function(user,profile,auth) { alert("hello"); var vm = this; vm.type = 'create'; profile.all() //this service fetch profiles shown in select field .success(function(data){ vm.profile = data; }); vm.userdata.profile = vm.profile[0]; //here have set default value select field and html page is: <label class="col-sm-2 control-label">profile</label> <div class="col-sm-8"> <select ng-model="user.userdata.profile" ng-options="person._id person.profilename person in user.profile"> </select> </div> hierarchy of vm.profile { "_id": 46, "profile": objectid("5516498e95b84548156db754"), "isactive": true, "password": "$2
Read more

php - Cloud9 cloud IDE and CakePHP -

-
i attempting cakephp running on cloud9, cloud based ide. unaware, cloud collaboration ide intermixes services such bitbucket. site gives sudo rights, , installed cakephp using these instructions: https://www.digitalocean.com/community/tutorials/how-to-install-cakephp-on-an-ubuntu-12-04-vps when attempt run database exported machine cakephp installed, error message "url rewriting not configured on server." attempted solve issue using official guide cakephp: http://book.cakephp.org/2.0/en/installation/url-rewriting.html but no cigar, same error message. has gotten cakephp working, or aware of cloud ide free/low cost cloud9 support cakephp? here's how got working now: sudo apt-get update sudo apt-get install php5-intl curl -ss https://getcomposer.org/installer | php -- --filename=composer ./composer create-project --prefer-dist cakephp/app this creates project in /app default. move workspace docroot: mv app/* ./ mv app/.* ./ rm -rf app then de
Read more