Countdown timers in jQuery
I am building a penny auction site and I got to the part with timers (I'm using symfony framework). Here I've got a few questions and issues.
So, I have about 10 products on the homepage I need to show. All of them wi开发者_开发技巧th a countdown timer.
To make the counters work properly I had this in mind:
In the template's action, I fetch all the products needed to be showed into an array along with start_time and end_time. in the html, each product will have a hidden div which will contain seconds to end (
end_time - start_time).on document ready, jQuery will iterate through all the products on the homepage, convert the remaining time to proper format (
hours:minutes:seconds), output that time. So this is the part where I'm confused - should this function now call another function, which decrements time of the div, and have asetTimeouton 1 second?on div.click, jQuery fetches the seconds div of the product, increases it's content by 10. if it overflow's, change minutes as well, and seconds to proper value. etc.
One of my worries is how will jQuery know how many products are there on the web page? I'm currently using <body onload="func()"> to trigger the timers. I'm new at JavaScript/jQuery so my question is what's another, better way to trigger the timers, and also send the number of products argument to jQuery function?
Also, will this be fast and effective enough? Can it be done better?
As mentioned in my comment you can put your products inside some divs with a classname and then use jQuery's $.each('.classname') function to iterate over the products
Now as for your 2nd point, you can call a seperate function for each product div with start-end time as parameters. here is a script to view a countdown timer.
For your third question, you can create a hidden field to save the current timesatmp for every product and onclick of each product you can call the countdown function with you new modified start value
You can use $(".classname").size() to get the total number of products
加载中,请稍侯......
精彩评论