Develop Reference

How do I make a div appear and to disappear on a webpage?

I am trying to get a div to show on a website for 1 minute and then disappears for 9 minutes and the cycle repeats itself.
I would like to use something such as below, and not use setTimeout().
//gets the current time.
var d = new Date();
if(d.getHours() >= 7 && d.getHours() <= 15 ){
$(".open").show();
$(".closed").hide();
}
else {
$(".closed").show();
$(".open").hide();
}
So, the div will show at every 10-minute intervals, so at 00:00, 00:10, 00:20, 00:30, 00:40, 00:50 past each hour for 1 minute, and after this minute the div automatically disappears live on the webpage for 9 minutes.
Would this be possible?

let timer;
let interval = 3000;
//You can change interval to your desireable MILLISECONDS
let showTime = 500;
//change this for div showing time
//Each div will show for 100 ms
let mainTimer = (60 - (new Date().getMinutes())) * 60000;
$(".divI").hide();
setTimeout(function() {
let counter = true;
htmlTimer();
//runs function every 'interval' MS
setInterval(function() {
htmlTimer();
$(".divII").hide();
$(".divI").show();
//hides main content div and shows close div every 'showTime' ms
setTimeout(function() {
htmlTimer();
$(".divII").show();
$(".divI").hide();
}, showTime);
}, interval);
}, mainTimer);
function htmlTimer() {
clearTimeout(timer);
let count = 0;
timer = setInterval(function() {
count++;
$('.timer').html((count * 200) + 'ms');
}, 200);
}
let remaingTime = setInterval(function() {
mainTimer = mainTimer - 200;
$('.currentTime').html(new Date().toString());
$('.remainingTime').html('Remaining Time:' + (mainTimer / 60000).toFixed(1) + 'Mins');
}, 200);
setTimeout(function() {
clearTimeout(remaingTime);
$('.currentTime').html('');
$('.remainingTime').html('');
}, mainTimer)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='divI'>Div-1--mainContent</div>
<div class='divII'>Div-2--closeDiv</div>
<br>
<div class='timer'></div>
<div class='currentTime'></div>
<div class='remainingTime'></div>

Showing multiple timer function in Angular.js

I am trying to display two timer on a webpage with different start times.
First timer only shows for 5 seconds and then after 10 seconds I need to show timer2.
I am very new to Angular and have put together following code.
It seems to be working fine except when the settimeout is called the third time it doesn't work correctly and it starts going very fast.
Controller
// initialise variables
$scope.tickInterval = 1000; //ms
var min ='';
var sec ='';
$scope.ti = 0;
$scope.startTimer1 = function() {
$scope.ti++;
min = (Math.floor($scope.ti/60)<10)?("0" + Math.floor($scope.ti/60)):(Math.floor($scope.ti/60));
sec = $scope.ti%60<10?("0" + $scope.ti%60):($scope.ti%60);
$scope.timer1 = min + ":" + sec;
mytimeout1 = $timeout($scope.startTimer1, $scope.tickInterval); // reset the timer
}
//start timer 1
$scope.startTimer1();
$scope.$watch('timer1',function(){
if($scope.timer1 !=undefined){
if($scope.timer1 =='00:05'){
$timeout.cancel(mytimeout1);
setInterval(function(){
$scope.startTimer2()
$scope.ti = 0;
},1000)
}
}
})
//start timer 2 after 2 mins and 20 seconds
$scope.startTimer2 = function() {
$scope.ti++;
min = (Math.floor($scope.ti/60)<10)?("0" + Math.floor($scope.ti/60)):(Math.floor($scope.ti/60));
sec = $scope.ti%60<10?("0" + $scope.ti%60):($scope.ti%60);
$scope.timer2 = min + ":" + sec;
mytimeout2 = $timeout($scope.startTimer2, $scope.tickInterval);
}
$scope.$watch('timer2',function(){
if($scope.timer2 !=undefined){
if($scope.timer2 =='00:05'){
$timeout.cancel(mytimeout2);
setInterval(function(){
$scope.startTimer1();
$scope.ti = 0;
},1000)
}
}
})
In my view I simply have
<p>{{timer1}}</p>
<p>{{timer2}}</p>

You're basically starting multiple startTimer function so it's adding up. If i understood your problem well you don't even need to have all those watchers and timeouts.
You just can use $interval this way :
$scope.Timer = $interval(function () {
++$scope.tickCount
if ($scope.tickCount <= 5) {
$scope.timer1++
} else {
$scope.timer2++
if ($scope.tickCount >= 10)
$scope.tickCount = 0;
}
}, 1000);
Working fiddle

How to stop javascript from executing after clicking stop button?

<script>
function timer(duration, elementId, scoreID, mistakesID){
var start = Date.now();
var min, sec, diff;
var scoreComputed = false;
function timerCompute(){
diff = duration - (((Date.now() - start) / 1000) | 0);
min = ( diff / 60 ) | 0;
sec = ( diff % 60 ) | 0;
//If less than 10, add zero in front of it to keep tens place
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
elementId.textContent = min + ":" + sec;
if ( diff <= 0 ){
elementId.textContent = "0:00";
if (!scoreComputed){
score /= (duration / 60);
score = Math.round(score);
scoreComputed = true;
}
scoreID.textContent = score;
document.getElementById("usertext").readOnly = true;
$("#resultsContainer").fadeIn(1500);
if(mistakes.length > 0){
var mistakesStr = "";
for(var i = 0; i < mistakes.length; i++){
mistakesStr += i > 0 ? ", " : "";
usertextArr[mistakes[i]] = usertextArr[mistakes[i]] === "" ? "blank" : usertextArr[mistakes[i]];
mistakesStr += usertextArr[mistakes[i]] + " instead of " + textArr[mistakes[i]];;
}
mistakesID.textContent = mistakesStr;
$("#mistakesContainer").fadeIn(1500);
$('.type-test-wrapper').css("filter","blur(3px)");
}
return;
}
};
timerCompute();
setInterval(timerCompute, 1000);
}
var timerStarted = false;
$('#usertext').on('keydown', function() {
var time = 60 * 0.1,
display = document.querySelector('#time');
scoreDisplay = document.querySelector('#score');
mistakesDisplay = document.querySelector('#mistakes');
if ( timerStarted === false ){
timer(time, display, scoreDisplay, mistakesDisplay);
typeTest();
timerStarted = true;
}
});
</script>
The above script is from a typing test. When the typing test ends, the above script fades in a result box. I was trying to modify the code. I want to add a close button to the result box so that user can close the box after he viewed the result. So I added the below code to close the result box.
<script type='text/javascript'>
jQuery(document).ready(function($){
$('.close-btn, body').click(function(){
$('.type-test-wrapper').css("filter","blur(0px)");
$('#resultsContainer, #mistakesContainer').stop().fadeOut('medium');
});
});
</script>
The problem I am facing is that when I click on close button, the box fades out #resultContainer, #mistakesContainer but as soon the box gets faded, it again fades in. No matter how many times i close the box, it fades in again and again. I want that once user click on close button the box should not get displayed again. How to fix the code so that once the the box fades out, the first code doesn't again fades in the box. I am new at javascript. Thank you for help.
Live webpage here https://htmlpreview.github.io/?https://raw.githubusercontent.com/dp121112/type-testing/master/test.html

I think you're not clearing the interval
try to assing interval as follow.
var intrvl= setInterval(timerCompute, 1000);
and clear it when its done
scoreID.textContent = score;
document.getElementById("usertext").readOnly = true;
$("#resultsContainer").fadeIn(1500);
clearInterval(intrvl);

Can't reset a JS timer in a one state app (ajax page loads)

I am having an issue with reseting a JS timer in a one state app that uses ajax to load new pages, so the page rarely experiences a full reload. The timer is used to countdown the date on inquiry pages (similar concept to ebay) and there are multiple inquiry pages - all with different timers and expiry dates.
The timer works perfectly on a full page reload, but after that, it gets increasingly faster and starts storing all the different timers simultaneously (e.g. if I visited three inquiry pages and initialized three timers, now its gonna count 3 seconds per second instead of 1.)
Here is my timer function
var timer = {
isActive : null,
firstLoad : null,
currentTime: null,
distance : null,
duration : null,
init: function() {
var scope = timer;
if (scope.isActive) {
scope.counter();
}
else {
$("#countdown").html("-");
}
},
counter: function() {
var scope = timer;
scope.countdown = setInterval(function() {
if (scope.firstLoad) {
scope.distance = scope.activeTo - scope.currentTime;
scope.duration = moment.duration(scope.distance);
scope.firstLoad = false;
}
else {
scope.duration.subtract(1, "second");
}
// Time calculations for days, hours, minutes and seconds
var days = scope.duration.days();
var hours = scope.duration.hours();
if (hours < 10) {
hours = "0" + hours;
}
var minutes = scope.duration.minutes();
if (minutes < 10) {
minutes = "0" + minutes;
}
var seconds = scope.duration.seconds();
if (seconds < 10) {
seconds = "0" + seconds;
}
// Display the result in the element with id="countdown"
jQuery("#countdown").html(days + " <%= pdo.translate("countdown.days.label")%> " + hours + ":" + minutes + ":" + seconds);
// If the count down is finished, write some text
if (scope.distance < 0) {
$("#addNewBid, #cancelInquiry, #editInquiry").hide();
$("#countdown").html("<%= pdo.translate("countdown.timeend.label")%>");
}
}, 1000);
},
reset: function() {
var scope = timer;
clearInterval(scope.countdown);
scope.isActive = null;
scope.firstLoad = null;
scope.currentTime = null;
scope.distance = null;
scope.duration = null;
}
};
And this is how I reset and initialize it on new page load.
$(document).ready(function ($) {
timer.reset();
timer.currentTime = new moment("<%=pdo.getTime()%>");
timer.activeTo = new moment("<%= pdo.getInquiry().getActiveTo() %>");
timer.isActive = <%=pdo.getInquiry().isActive()%>;
timer.firstLoad = true;
timer.init();
});

SetInterval not refreshing HTML in Chrome

I'm trying to implement a script that essentially counts down from 30 seconds to 0, and at 0, redirects to the homepage. However, I noticed that my script only works on Firefox but not Chrome and Safari. On these browsers, the counter remains "stuck" at 30 seconds—never refreshing the HTML, but the redirect works fine. Not sure if I'm doing something wrong or if setInterval is not the right method for this kind of thing.
<script>
var seconds = 31;
var counter = setInterval("timer()", 1000);
function timer() {
seconds = seconds - 1;
if (seconds < 0) {
setTimeout("location.href='http://www.homepage.com';", 100);
return;
}
updateTimer();
}
function updateTimer() {
document.getElementById('timer').innerHTML = "Redirecting in " + " " + seconds + " " + "seconds";
}
</script>
Thanks in advance!
EDIT: So weirdly enough, my code (and all of yours) is working on JSFiddle, but it's just failing to "repaint" the HTMLinner when it's actually rendering the page. The seconds are changing fine (I outputted them to the console), the changes just aren't rendering.
Final Edit: This problem basically resulted from invalid CSS. I believe—the counter was running above the photo and I set the span to relative positioning with a higher z-index and top and bottom elements. I don't believe this is acceptable for something that is not a block.

Here's a working sample:
(function() { // wrapper for locals
var timer = document.getElementById("timer"),
seconds = 5,
counter = setInterval(function() {
if (--seconds < 1) {
clearInterval(counter);
timer.innerHTML = "Redirecting now...";
setTimeout(function() {
location.href = 'http://www.homepage.com';
}, 500);
} else {
timer.innerHTML = timer.innerHTML.replace(/\d+/, seconds);
}
}, 1000);
})();
<div id="timer">Redirecting in 5 seconds</div>
​
​

Here is a cleaner implementation with fewer defined functions (with demo):
<span id='timer'></span>
<script>
var seconds = 31;
setInterval(function() {
seconds = seconds - 1;
if (seconds < 0) {
setTimeout(function() {document.getElementById('timer').innerHTML = "redirecting..."}, 100);
return;
}
updateTimer();
}, 1000);
function updateTimer() {
document.getElementById('timer').innerHTML = "Redirecting in " + + seconds + " seconds";
}
<script>
Of course every JavaScript programmer should any opportunity to point out that "eval is evil" which includes passing a string to setInterval and setTimeout :)

Change your function to a variable, that worked for me:
<script>
var seconds = 31;
var counter = setInterval(timer, 1000);
var timer = function() {
seconds = seconds - 1;
if (seconds < 0) {
setTimeout("location.href='http://www.homepage.com';", 100);
return;
}
updateTimer();
}
function updateTimer() {
document.getElementById('timer').innerHTML = "Redirecting in " + " " + seconds + " " + "seconds";
}
</script>