Develop Reference

Logic of alarm clock is not working in vanilla JavaScript

I'm not able to make the right logic for a simple vanilla javascript alarm clock, that shows a message/plays a sound at the time which user had set... help me make the logic right.
Here's my javascript code:
<script>
function setAlarm(){
//taking value of time
var a=document.getElementById("H").value;
var b=a*3600000;//converted to millisecound
var c=document.getElementById("M").value;
var d=c*60000;//converted to millisecound
var e=d+b;//addition of millisecound
//live values of time
var f=h*3600000;//converted to millisecound
var g=m*60000;//converted to millisecound
var i=g+h;//addition of millisecound
var j=0;
if(i>=e){
j=i-e;
}else{
j=e-i;
}//else
document.getElementById("demo2").innerHTML=j;
setInterval(test,j);
if (d==g){
console.log("if called");
test();
}//if
}
function test(){
console.log("test called")
document.getElementById("demo2").innerHTML="its work";
}
var d=new Date();
var h=d.getHours();
document.getElementById("hours").innerHTML=h;
var m=d.getMinutes();
document.getElementById("minutes").innerHTML=m;
var s=d.getSeconds();
document.getElementById("secound").innerHTML=s;
setInterval(repeat,1000);
function repeat(){
var d=new Date();
var h=d.getHours();
document.getElementById("hours").innerHTML=h;
var m=d.getMinutes();
document.getElementById("minutes").innerHTML=m;
var s=d.getSeconds();
document.getElementById("secound").innerHTML=s;
}
var i=0;
function ChangeTheam(){
i++;
if(i%2){
document.body.style.backgroundColor= "black";
document.getElementById("hours").innerHTML.style.color = "blue";
}else{
document.body.style.backgroundColor= "white";
}//else
}//change theam function
</script>
I can provide HTML code if someone wants but don't think that'll be necessary since I'm not able to make the logic right at the first point.
Thanks :)

In your code
//live values of time
var f=h*3600000;//converted to millisecound
var g=m*60000;//converted to millisecound
var i=g+h;//addition of millisecound`
You added g+h instead of g+f as a result the time that your alarm takes to trigger may be significantly shorter.
var s=d.getSeconds();
document.getElementById("secound").innerHTML=s;
I am not sure if this is just what you id'd the element by I assume you meant 'second' not 'secound'
Otherwise, I see no problems with your code and should work fine.

Can anyone tell me how to trigger a function when the mouse is pressed and continues untill it is released in p5.js

I was trying to add an image using p5 and ml5 In my website where user can train there own image and get the predicted output over webcam I tried implementing it by using
var addImage;
var mobilenet;
mobilenet = ml5.featureExtractor('MobileNet', modelReady);
classifier = mobilenet.classification(video,videoReady);
addImage = createButton('Insert');
addImage.mousePressed(function (){
classifier.addImage('Insert');
});
but for every image, I need to press the mouse button to insert I just want to make it something like this
**On mousePress()
function to add multiple image;
On mouseRelease()
stop;**

From this reference, this should work;
var addImage;
var mobilenet;
var drawImageInterval = null;
mobilenet = ml5.featureExtractor('MobileNet', modelReady);
classifier = mobilenet.classification(video,videoReady);
addImage = createButton('Insert');
addImage.mousePressed(function (){
if(mouseIsPressed && !drawImageInterval){
drawImageInterval = setInterval(function(){
classifier.addImage('Insert');
}, 1000);
} else {
clearInterval(drawImageInterval);
drawImageInterval = null;
}
});

Multiple instances of Setinterval

I have a little problem with my code.
I have it setup so that by default, a rotating fadeIn fadeOut slider is auto playing, and when a user clicks on a li, it will jump to that 'slide' and pause the slider for x amount of time.
The problem i have is that if the user clicks on multiple li's very fast, then it will run color1() multiple times with will start colorInterval multiple times. This gives a undesired effect.
So what i need help with, is figuring out how to reset my code each time a li is clicked, so whenever ColorClick is clicked, i want to make sure that there are no other instances of colorInterval before i start a new one.
Thanks in advance!
=================================
edit:
I now have another problem, i believe that i fixed the clearInterval problem, but now if you look at var reset, you'll see that it runs color1() each time a li is clicked, which runs multiple intervals, so i need to delete the previous instance of color1() each time it is called, to make sure that it doesnt repeat any code inside multiple times. So when a li is clicked delete any instances of color1()
or
i need that instead of running color1 in var reset, i will go straight to colorInterval instead of running color1() for each li clicked,
so run colorInterval after x amount of time in var reset.
function color1() {
var pass = 0;
var counter = 2;
var animationSpeed = 500;
var $colorContent = '.color-container-1 .color-content-container'
var $li = '.color-container-1 .main-color-container li'
$($li).on('click', function() {
colorClick($(this));
});
function colorClick($this) {
var $getClass = $this.attr("class").split(' ');
var $whichNumber = $getClass[0].substr(-1);
var $Parent = '.color-container-1 ';
pass = 1;
$($colorContent).fadeOut(0);
$($colorContent + '-' + $whichNumber).fadeIn(animationSpeed);
var reset = setTimeout(function() {
clearTimeout(reset);
pass = 0;
color1();
}, 10000);
}
var colorInterval = setInterval(function() {
if (pass > 0) {
clearInterval(colorInterval);
return; //stop here so that it doesn't continue to execute below code
}
$($colorContent).fadeOut(0);
$(($colorContent + '-' + counter)).fadeIn(animationSpeed);
++counter
if (counter === $($colorContent).length + 1) {
counter = 1;
}
}, 7000);
}

You could just clear the interval inside of the click event.
var colorInterval;
$($li).on('click', function() {
clearInterval(colorInterval);
colorClick($(this));
});
//Your other code
colorInterval = setInterval(function() {
//Rest of your code
});

One thing play with is jQuery animations have a pseudo class selector :animated when animation is in progress
if(!$('.your-slide-class:animated').length){
// do next animation
}

a setInterval within a for loop in Javascript

My code below needs to put in a setInterval within a for loop. I basically need to put in a 10 second pause between the next iteration of the for loop. This is for a very basic script which shows banners in a div for 10 seconds before moving onto the next one. It existing setInterval is code I got off another website as I ran out of options. Any help? And if you don't mind explaining the logic to me so that I know for the future :)
$("document").ready(function() {
// bannerChange
function bannerChange(banner,div,milliseconds) {
var length = banner.length;
for(i=0;i<length;i++) {
(function(i) {
setInterval(function() {
var url = banners[i].url;
var img = banners[i].image;
$("#"+div).html("<a href='"+url+"' target='_Blank'><img src='www/images/banners/"+img+"' /></a>");
},milliseconds)
})(i);
}
}
function showBanner(bannerName, bannerDiv, milliseconds) {
var url = "www/scripts/ajax/getBanners.php";
$.post(url, {name: bannerName}, function(data) {
if(data.response == true) {
bannerChange(data.banners,bannerDiv,milliseconds);
}
});
}
// Run banners
showBanner("Test Banner","test",10000);
});

Here's an updated version based on the comment:
// Start by getting the banners:
var banners = [];
var currentBanner;
function getBannersFromServer(...) {
// TODO: make ajax call to server for banners
// push the banners into a queue for later
for (var i in bannerFromServer) {
banners.push(bannersFromServer[i]);
}
}
// Then run through them:
function showNextBanner() {
// advance to next banner
currentBanner++
// go back to the beginning after the last banner is displayed
if(currentBanner >= banners.length) currentBanner = 0;
// pull a banner out of the queue
var banner = banners[currentBanner];
// TODO: Show the banner in the div
// do it again in 10 seconds
showNextBanner();
}
// start it all
getBannersFromServer();
getNextBanner();

Try using:
.delay()
Here is a great example of this function in use!

Try this
var i=0;//Global Variable
function bannerChange(banner, div, milliseconds) {
var length = banner.length;
setInterval(function() {
var url = banners[i].url;
var img = banners[i].image;
$("#"+div).html("<a href='"+url+"' target='_Blank'><img src='www/images/banners/"+img+"' /></a>");
i++;
if(i >= length) i=0;//To reiterate from first
},milliseconds);
}
Hope this solves your problem.

Javascript timelapse-effect: displaying 30 images/second (read for more detail)

I have a client who has made a 'Visual Diary' of photographs that he took once a day for 365 days, for his portfolio site. He wants me to put these together into a time-lapse effect piece. I thought about using Flash but in the end opted for JavaScript.
What needs to happen is this: The images cycle really really quickly with no transitions or anything, just image-image-image etc. About 30/fps or something like that. When you click the flashing images, it stops on the image you have selected, so the user can take a look. When you click again, the slideshow starts playing again.
My problem is I'm a PHP/XHTML/CSS bloke who hasn't really the foggiest about JavaScript. I can happily integrate it into any page, but it's just coding the JavaScript that's troubling me.
On his homepage, I have this code used to display a basic slideshow - with transition effects etc. It's in the HTML but you can fathom out the code I'm sure:
<!-- Code for slideshow -->
<!-- Found on http://www.webdeveloper.com/forum/showthread.php?t=81441 -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
Pic[5] = '6.jpg'
Pic[6] = '7.jpg'
Pic[7] = '8.jpg'
Pic[8] = '9.jpg'
Pic[9] = '10.jpg'
Pic[10] = '11.jpg'
Pic[11] = '12.jpg'
Pic[12] = '13.jpg'
Pic[13] = '14.jpg'
Pic[14] = '15.jpg'
Pic[15] = '16.jpg'
Pic[16] = '17.jpg'
Pic[17] = '18.jpg'
Pic[18] = '19.jpg'
Pic[19] = '20.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
Is there any way to modify this code to turn off all transitional effects, and make it stop playing when you click it/start it again? Otherwise, a reference to some different code would be helpful.
Thank you everybody!
Jack

You seem to be using IE-specific code. I would recommend using the various effects modules in a dedicated JavaScript library such as MooTools (my personal favourite), jQuery, or Prototype + script.aculo.us.
To stop the slideshow, you should be able to simply clear timeout t:
clearTimeout(t);
Also, you shouldn't quote the first parameter of setTimeout. Pass it a function reference:
setTimeout(runSlideShow, slideShowSpeed);