Ok so I am using http://keith-wood.name/ countdown plugin and am using one of the functions for for unix timestamps but need some help.
I will have multiple countdowns around the site but the way I have got it working I have to declare each timer as follows.
var crimeTime = new Date();
crimeTime.setTime(<?php echo $crime_time * 1000; ?>);
$('#Crimes').countdown({until: crimeTime, compact: true, format: 'HMS'});
and have to repeat the line for each countdown is there a way of making a timer global so for instance...
<div class="countdown"><?php echo $unixtimestamp;?></div>
I have looked around and tried many but they either do not work at all or do not work with unix timestamp's properly.
another issue is how to get timer to auto start counting down on a submit?
for instance can only do an activity once every 1min the timer displays 00:00:00 once click submit on an activity it stays 00:00:00 it doesn't change to 00:01:00 unless the page is refreshed after submit.
Thanks.
You can go in PHP/HTML this way:
<div class="countdown" data-time="<?=$unixtimestamp;?>"></div>
And in jQuery you do:
$('.countdown').each(function(i) {
var thisCounter = $(this);
var thisTime = thisCounter.data('time');
var crimeTime = new Date();
crimeTime.setTime(thisTime);
thisCounter.countdown({until: crimeTime, compact: true, format: 'HMS'});
});
If you simply need a time counter (to get time in realtime) you can make a global one and simply reference to it:
timer = new Date().getTime(); // time in miliseconds
timerHolder = setInterval(
() => {
timer+= 1000;
}, 1000
);
Then to read the time you can do:
new Date(timer)
Related
I would like to have a countdown timer always show a countdown for every new user. Basically, if I close the webpage, and reopen it, the timer should still be running. I'm thinking of using the JS variable code functions to define a new client's timezone together with an if statement comment and make it a repeat loop?
Basically, I would want to run a timer on the server side, not the client side.
Has anyone done this before?
Sounds something that you could try to solve with browsers localStorage. If your only requirement is to keep saved time available after you close tab/browser and come back to your page, this is a good fit for you.
Here's a small Codesandbox example code of how to conditionally check and save to localStorage and then start counter based on that value.
https://codesandbox.io/s/4xw97q02m0
EDIT: same code pasted to a post
function setCurrentTime(){
let localStore = window.localStorage.getItem("myTime") // Check if already exists
if(localStore) return localStore
const time = Date.now(); // get current time stamp
window.localStorage.setItem("myTime", time) // Save to localStorage
return time
}
function startCount(){
const time = setCurrentTime()
const elem = document.getElementById("app")
setInterval(() => {
elem.innerHTML = `seconds since time saved:
${Math.floor((Date.now() - time) / 1000)}
`
}, 1000)
}
startCount()
<div id="app"></div>
I am trying to write javascript code that calculates the "page submit" time (time spent from start of view to next button click) in Qualtrics. I can't use the regular timed Qualtrics Question because I have other code that works with the next button, which does not work when I add a Qualtrics timing question to the page. (I've omitted that code from below just to make things simpler.)
I believe the problem is that I'm having trouble passing the start time from the Qualtrics.SurveyEngine.addOnload section to the Qualtrics.SurveyEngine.addOnPageSubmit section.
I have two embedded data fields: StartHolder and TimeDiff, both set to 0.
I'm using the following code to try and calculate the time elapsed:
Qualtrics.SurveyEngine.addOnload(function()
{
Qualtrics.SurveyEngine.setEmbeddedData('StartHolder',new Date);
});
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
var TimeDiff = new date() - Date.parse("${e://Field/StartHolder}");
Qualtrics.SurveyEngine.setEmbeddedData('TimeDiff',TimeDiff);
});
I think the problem is I'm not pulling the StartHolder variable back into my code properly, but I'm not sure how to fix it. Any advice would be appreciated.
You can't set and pipe and an embedded variable on the same page. You should set a JS variable as the start time then put your addOnPageSubmit function inside your addOnLoad function.
Qualtrics.SurveyEngine.addOnload(function() {
var startHolder = new Date();
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
var TimeDiff = new Date() - startHolder;
Qualtrics.SurveyEngine.setEmbeddedData('TimeDiff',TimeDiff);
});
});
Here's our scenario:
We are using node w/ express for our web app and we need to create a background process that continuously checks the created date on multiple posts and when they expire. These expired dates are set by the user so the posts expire at different rates. When the date expires, our app should be triggering specific events.
We are considering using a "setInterval" but wasn't sure if this is the best long-term solution.
Is there a solution to have node continuously check whether or not a date has been expired? Upon expiring, the posts must trigger specific functions.
There are two ways to do this:
1) use moment lib like this:
var date = moment("2013-03-24")
var now = moment();
if (now > date) {
// date is past
} else {
// date is future
}
2) use node-schedule like this:
var schedule = require('node-schedule');
var futureDate = new Date(new Date().getTime() + 60 * 60 * 24 * 1000); // This is 24 hours from *now*
var j = schedule.scheduleJob(futureDate, function(){
console.log('Do your work here.');
});
Im not sure about your code but if u can catch the event when the users post, the easy way would be
setTimeout(whateverYouHaveTodo, expireTimeInMilliseconds);
each time an event is triggered.
And if you need to cancel the timeouts in the future, what i do personally is put the timeouts in a json object with the key as a unique id which you could identify the event specifically
I want to keep track of how many seconds a user spend on my project website on all of his pages and for doing this I want to use JavaScript session cookies.
This is because I will host it using Github Pages where I have no access to PHP and also because I want to try working with JS cookies (It's the first time I am doing this).
To count the seconds I am using the followings:
var time_spent = 0;
setInterval(function(){
++time_spent;
$('#counter_container span').html(time_spent);
}, 1000);
The above code works where the counter is but as expected is reseting every time I change the page.
I've tried using a js-cookie library (https://github.com/js-cookie/js-cookie) in the following manner:
Cookies.set('time_spent', time_spent);
var counted_time = Cookies.get('time_spent');
console.log(counted_time);
But the counted_time variable is always 'undefined' whatever I've tried.
I would really apreciate any guidance I can get in order to solve this little issue.
I wouldn't use a timer for this. Instead try setting a timestamp when the user enters the page, and then onbeforeunload get the duration and add it to the value stored in the cookie. Something like this:
var load = new Date();
window.onbeforeunload = function() {
var leave = new Date();
var duration = leave.getTime() - load.getTime() / 1000;
var counted_time = parseFloat(Cookies.get('time_spent')) || 0;
Cookies.set('time_spent', counted_time + duration);
}
Working example
So i am implementing this feature in a penny auction website. Using countdown.js as the library to run a countdown.
the countdown works in a way that:
<div class="countdown cf content_item-countdown" style="width: 100%;" data-countdown="<?php echo date('M d, Y H:i:s O', strtotime($item['end_date']));?>"></div>
the end_date here, is from database, it is the date on which the timer will stop (and bidding will end)
the countdown function:
$('.countdown').each(function(){
var count = $(this), time = $(this).data('countdown'), format = $(this).data('format');
var Otime = new Date(time), o = {
serverSync: serverTime,
until:Otime,
// demo data set to reset timer, when it's finished
// change zeroCallback to prefered callback
zeroCallback: function(options) {
}
};
if(format){
$.extend(o,{format:format});
}else{
$.extend(o,{layout: '{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}'});
}
$(this).countdown(o);
});
now i am supposed to implement another feature,
if the end_time <15 seconds (means the time remaining to bid is less than 15 seconds), and some one places a bid, the timer should automatically reset to 15 seconds, and so on. like: http://www.quibids.com/en/
i do this by updating the end_date to a certain seconds.
and updating timer:
$(time_update).html( '<div class="countdown cf content_item-countdown" style="width: 100%;" data-countdown="">'+data[$i].end_date+'</div>');
i assumed since the countdown timer is getting end_date it should automatically reset it.
But it doesn't, instead it prints the end date and reverts back to the old countdown.
the timer updates fine whenever i REFRESH the page, but i want it to refresh on the go, i assume it requires an AJAX call, any help?
the best way was to destroy the countdown widget and then display it using the updated end_date from database