Streaming live at 10am (PST)

Changing Picture Based On Time

I am trying to make a webpage that will change a picture based on the time. I would like one picture (image2) to display between 8:23 and 2:43 Monday-Friday and another(image1) to display the rest of the time.

I found this custom code online but I’m not sure how to get it to work within Webflow. Any help will be great, thanks.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You need javascript code to do this. I have similar code If you provide me ready-only link i can customize code and give it you.

Here is my read-only link. I changed the image names to “circle-red” and “circle-yellow”. I want the "circle-yellow to show during business hours and then hide and show the “circle-red” image in it’s place. the “share” button isn’t on my interface for some reason so I went into the project settings and shared the link that way. Thanks for your help!

https://preview.webflow.com/preview/flingers-test?utm_medium=preview_link&utm_source=dashboard&utm_content=flingers-test&preview=cdabdc61c05874c8ed91a93fdb29c4ef&mode=preview

Here is the code put in end of page body tag. And let me if you have any problem.

var timeTable = [
{'time':['8 am', '3 pm'], dayNumber:1},   // monday timimg
{'time':['8 am', '3 pm'], dayNumber:2},   // tuesday
{'time':['8 am', '3 pm'], dayNumber:3},   // wendesday
{'time':['8 am', '3 pm'], dayNumber:4},   // thursday
{'time':['8 am', '3 pm'], dayNumber:5},   // friday
{'time':['0 am', '0 pm'], dayNumber:6},   // saturday
{'time':['0 am', '0 am'], dayNumber:0},   // sunday timing
]


function changeImage(){
		let date = new Date();
		let currentNumber = date.getHours();
    var currentDay = timeTable.filter(function(elt) {
  			return elt.dayNumber == date.getDay() ;
		});
    let startNumber = convertTime12to24(currentDay[0]['time'][0])
    let endNumber = convertTime12to24(currentDay[0]['time'][1])
    if( (currentNumber>=startNumber) && (currentNumber<endNumber) ){
        document.getElementsByClassName('circle-yellow').style.display = "block";
        document.getElementsByClassName('circle-red').style.display = "none";
    }
    else{
		document.getElementsByClassName('circle-yellow').style.display = "none";
    	document.getElementsByClassName('circle-red').style.display = "block";
    }
    
}

var convertTime12to24 = (time12h) => {
  let [hours, modifier] = time12h.split(' ');
	 modifier = modifier.toLowerCase();
   hours = parseInt(hours, 10) 
   if (modifier == 'pm' && hours < 12){
   		hours += 12
    }
    else if (modifier == 'am' && hours == 12){
      hours -= 12;
    }
  return hours;
}

changeImage();


</script>

Hey thanks for the code. I’ve added it to the webpage in the before body tag section but it doesn’t seem to be working. I adjust the times in the code to see if I could get the "circle-yellow to hide but it didn’t work. Did I do something wrong? I’m not sure if you can see in on the read-only view or not. Thanks for your help!

Please put this code between tag.
Here is code.

        var timeTable = [
        {'time':['8 am', '3 pm'], dayNumber:1},   // monday timimg
        {'time':['8 am', '3 pm'], dayNumber:2},   // tuesday
        {'time':['8 am', '3 pm'], dayNumber:3},   // wendesday
        {'time':['8 am', '3 pm'], dayNumber:4},   // thursday
        {'time':['8 am', '3 pm'], dayNumber:5},   // friday
        {'time':['0 am', '0 pm'], dayNumber:6},   // saturday
        {'time':['0 am', '0 am'], dayNumber:0},   // sunday timing
        ]


function changeImage(){
		let date = new Date();
		let currentNumber = date.getHours();
    var currentDay = timeTable.filter(function(elt) {
  			return elt.dayNumber == date.getDay() ;
		});
    let startNumber = convertTime12to24(currentDay[0]['time'][0])
    let endNumber = convertTime12to24(currentDay[0]['time'][1])
    if( (currentNumber>=startNumber) && (currentNumber<endNumber) ){
        let yellowImages = document.getElementsByClassName('circle-yellow')
        yellowImages.forEach(yellowImage => {
	  			yellowImage.style.display = "block";
			});
        let redImages = document.getElementsByClassName('circle-red')
        redImages.forEach(redImage => {
	  			redImage.style.display = "none";
			});
        
    }
    else{
		let yellowImages = document.getElementsByClassName('circle-yellow')
        yellowImages.forEach(yellowImage => {
	  			yellowImage.style.display = "none";
			});
        let redImages = document.getElementsByClassName('circle-red')
        redImages.forEach(redImage => {
	  			redImage.style.display = "block";
			});
    }
    
}

var convertTime12to24 = (time12h) => {
  let [hours, modifier] = time12h.split(' ');
	 modifier = modifier.toLowerCase();
   hours = parseInt(hours, 10) 
   if (modifier == 'pm' && hours < 12){
   		hours += 12
    }
    else if (modifier == 'am' && hours == 12){
      hours -= 12;
    }
  return hours;
}

changeImage();

If does not work then just make copy of project and transfer to me i will do this and send back project to you.

Ya I’m either doing something wrong or it’s still not working. how do I send you a copy of the project? Thanks again!

dilshadkhaliq786@gmail.com this is webflow account transfer to this id.
I check webfolw forum once a day so that why i reply late, for instant replay contact me at whatapps +923066381084.

I’ve transferred a copy of the project to you. Thanks again for your help. my webflow account is webmaster@joshuaonenine.media

Its done now just change time according to your need.

Thank you so so much! It’s working perfectly!!!