Change CSS of HTML on computer timing - javascript

I have three CSS with me in one HTML, morning.css, evening.css & night.css..
My requirement is that, once visitor visits the website, the css should change according to visitor PC timing...
Morning.css --> 6.00hrs - 15.00hrs
Evening.css --> 15.00hrs - 19.00 hrs
Night.css --> 19.00hrs - 6.00hrs
Can anyone help me with this..??? My requirement is on load not on button click

You can write a function which will set the class to body like the following:
function setTimingClass() {
var hour = new Date().getHours();
var cls;
if (hour >= 6 && hour <= 14) {
cls = 'morning';
} else if (hour >= 15 && hour <= 18) {
cls = 'evening';
} else {
cls = 'night';
}
document.body.className = document.body.className + ' ' + cls;
}
And call the function on body's onload. And then use this classes in your css file to style accordingly

You can use for example function like this:
function applyClass(){
var date = new Date();
var hour = date.getHours();
if(hour >= 6 && hour < 15) {
// apply 'morning' class to body
} else if(hour >= 15 && hour < 19) {
// apply 'evening' class to body
} else {
// apply 'night' class to body
}
}
How to append class to DOM element you can easily find on another thread of stackoverflow

With this function you can check time and class to the dom element
(function(){
var currentdate = new Date();
var datetime = currentdate.getHours();
if(datetime >=6 && datetime<15){
// moning class
}
else if(datetime >=15 && datetime<19){
// evening classes
}
else{
// night class
}
alert(datetime)
}());
jsfiddle

You need to use JS or any other programming language like php to achieve this.
For me easiest way will be loading all 3 scripts and adding class to body depands on hour.
<script>
window.onload = function(){
var d = new Date();
var h = d.getHours();
if(h >= 6 && <= 15) {
document.body.setAttribute('class','morning');
}
}
</script>

Related

Changing Background Image With Javascript Based on TOD Error?

I am attempting to code a webpage whose background changes based on time of day, using javascript. I am aware there are other questions based around this concept, but my code, based on those questions' answers, does not produce results.
var background = ","
var time = new Date();
var greeting = '';
var hour = time.getHours();
if (hour < 6 || hour === 12) {
greeting = "Goodnight!";
background = 'assignment02_images/backgrounds/night.png';
}
else if (hour >= 6 && hour <12) {
greeting = "Good Morning!";
background = 'assignment02_images/backgrounds/morning.png';
}
else if (hour >=12 && hour < 18 ) {
greeting = "Good Afternoon!";
background = 'assignment02_images/backgrounds/afternoon.png';
}
else {
greeting = "Good Evening!";
background = 'assignment02_images/backgrounds/evening.png';
}
The greeting variable works, which is why I thought the background image should too. However, I don't know what I need to put in document.write() in order to get the background to show up. Currently this just displays a white background.
<div class="bg" id="bgImg"></div>
In your scriipt file
var dt = new Date()
setTimeout(function() {
console.log(dt.getHours())
if (dt.getHours() >= 1 && dt.getHours() <= 6) {
document.getElementById("bgImg").style.backgroundImage = "url('https://dummyimage.com/300x200/345fa1/fff')"
} else if (dt.getHours() >= 6 && dt.getHours() <= 12){
document.getElementById("bgImg").style.backgroundImage = "url('https://dummyimage.com/300x200/a13557/fff')"
}
}, 30)
Just check time between hours and add it into timeout
Fiddle Example

Javascript not running Prestashop

Im trying to add a countdowns shipping time, using this code: http://jsfiddle.net/37ox54bk/7/
I use the HTML box module: https://mypresta.eu/modules/front-office-features/html-box.html
The code looks like this:
<div id="countdownTimer">0</div>
<script type="text/javascript">// <![CDATA[
if (document.getElementById('countdownTimer')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
var timerRunning = setInterval(
function countDown() {
var target = 15; // 15:00hrs is the cut-off point
var now = new Date();
//Put this in a variable for convenience
var weekday = now.getDay();
if(weekday == 0){//Sunday? Add 24hrs
target += 24;
}//keep this before the sunday, trust me :>
if(weekday == 6){//It's Saturday? Add 48hrs
target += 48;
}
//If between Monday and Friday,
//check if we're past the target hours,
//and if we are, abort.
if((weekday>=1) && (weekday<=5)){
if (now.getHours() > target) { //stop the clock
return 0;
}
}
var hrs = (target - 1) - now.getHours();
if (hrs < 0) hrs = 0;
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
document.getElementById('countdownTimer').innerHTML = str;
}, 1000
);
}// ]]></script>
But nothing is happening, it just shows 0 like the javascript is not running.
Anyone got any idea?
It looks like that module wraps everything inside <script> tags in
// <![CDATA[
//--><![CDATA[//><!-- //
[your code]
//--><!
// ]]>
It doesn't look like that's even the correct way to use CDATA but in any case i think all this achieves in your case is commenting the whole piece of code out.
Do you not have access to the files in your theme? You could for instance still add the <div id="countdownTimer">0</div> with the module and paste your code into the document.ready(); function of the globals.js
Try to make a js file and link it like this:
<script src="http://yoursite.com/folder/file.js"></script>
<div id="countdownTimer">0</div>
And if you need to add some css code you have to add it on your current css prestashop file (for example if you need to add it on your homepage so you've to work on golbal.css)
Hope it can help you

Javascript - Changing gradient-color body based on time of day

How can I dynamically change the gradient in the body with js based on time of day?
Thanks
—
Img
http://a1.dspncdn.com/media/692x/da/dc/4e/dadc4ed5117d4a8cc582199bb3ac9c68.jpg
use the following code
HTML
<div id='time'>
</div>
JavaScript
var d = new Date();
var time = d.getHours();
var div=document.getElementById('time');
if (time < 12)
{
div.style.backgroundImage ="url('morning image')";
}
if (time >= 12 && time < 3)
{
div.style.backgroundImage ="url('afternoon image')";
}
if (time > 3)
{
div.style.backgroundImage ="url('http://a1.dspncdn.com/media/692x/da/dc/4e/dadc4ed5117d4a8cc582199bb3ac9c68.jpg')";
}
CSS
#time{
height:400px;
width:400px;
}
refer this fiddle
It might help to have a look at https://stackoverflow.com/a/4358182/2588199 and then either set a different background or a css gradient string.
Something like:
var currentTime = new Date().getHours();
//Change here to set the hours to wish to change between
if (7 <= currentTime && currentTime < 20) {
//place image or strng here
}else {
//Place image or string here
}

Show DIV during specific times of the day (eg., during store "open hours")

I need to toggle DIV visibility based on time so my site shows when my physical store is open.
For example:
- 07:00-15:59 = Show div
- 16:00-06:59 = Hide div
Thanks!
Here is a basic example.
//gets the current time.
var d = new Date();
if(d.getHours() >= 7 && d.getHours() <= 15 ){
$(".open").show();
$(".closed").hide();
}
else {
$(".closed").show();
$(".open").hide();
}
https://jsfiddle.net/16mnrL3b/
You can try this
if ( date('H:i') >= "07:00" && date('H:i') <= "16:00" ) {
echo 'Time between 7 and 16';
}else{
echo 'Time is runned out';
}
You can use the following to get system time:
var date = new Date();
var time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
$('div').hide()
if(date.getHours()>7&&date.getHours()<16){
$('div').show()
}
else
if(date.getHours()>=16&&date.getHours()<7){
$('div').hide()
}
You can compare the current time with the time in which you need to show a specific div using jquery as follows:
$('#mydiv').hide();
$('#myclosediv').hide();
if(today.getHours() >= 7 && today.getHours() < 16){
$('#myopendiv').show();
}
else{
$('#myclosediv').show();
}
If the current time is 7 AM to 4 PM, then the div with id 'myopendiv' will be shown. Else the other div.

Use javascript to print out "Open" or Closed depending on time of day in real time

Ok, I have a website for a restaurant. Right now I have a simple if statement in javascript that changes a piece of text from Were open to Were Closed depending on the time of day. But If on a mobile phone when you close your browser it still technically is open in the background. So if you reopen the browser it will say were open after the time it should say were closed until you refresh the page. I would like to find a way to get it to update in real time. I have tried using setInterval and setTimeout to accomplish this as well as a while loop but so far, nothing. I mean when I use setInterval i can print the time and it will increment in real time. So why cant it run my if statement each second and print the desired piece of text.
Here is my code that just displays it as of now.
var date = new Date().getHours();
if ((date > 9) && (date < 20) && (day != 0)) {
y="<span style=\"color:#07ed11\">We're Open!</span>";
}
else {
y="<span style=\"color:#fc4b1c\">Sorry we're Closed.</span>";
}
document.getElementById("open-close").innerHTML=y;
I just want it to print our in real time so that I can watch it change from open to close once the time hits it right
jsFiddle example
New version
I took the liberty of going back and revising this. I think this version will work better
var checkOpenStatus = function () {
var d = new Date();
var date = d.getHours();
var day = d.getDay();
if ((date > 9) && (date < 20) && (day != 0)) {
y = "<span style=\"color:#07ed11\">We're Open!</span>";
} else {
y = "<span style=\"color:#fc4b1c\">Sorry we're Closed.</span>";
}
document.getElementById("open-close").innerHTML = y;
setTimeout(checkOpenStatus,15000);
};
checkOpenStatus();
It runs every 15 seconds rather than every 100 milliseconds.
Old Version
Try this
var checkOpenStatus = function () {
var d = new Date();
var date = d.getHours();
var day = d.getDay();
if ((date > 9) && (date < 20) && (day != 0)) {
y = "<span style=\"color:#07ed11\">We're Open!</span>";
} else {
y = "<span style=\"color:#fc4b1c\">Sorry we're Closed.</span>";
}
document.getElementById("open-close").innerHTML = y;
}
setInterval(checkOpenStatus,100); //removed anon function
It updates every 100 milliseconds on the setInterval. You can change it to be faster or slower according to your preference.
var checkOpenStatus =function () {
var d = new Date();
var date = d.getHours();
var min = d.getMinutes();
if ((date>7 || (date == 7 && min >= 30)) && (date < 22) && (day != 0)) {
y = "<span style=\"color:#07ed11\">We're Open!</span>";
} else {
y = "<span style=\"color:#fc4b1c\">Sorry we're Closed.</span>";
}
document.getElementById("open-close").innerHTML = y;
};
checkOpenStatus();
Less intrusive closure style:
var updateElement = function($el) {
return function updater() {
$el.text(new Date()); // dummy, your logic goes here...
setTimeout(updater, 100);
}
}
var fooUpdater = updateElement($("#foo"));
setTimeout(fooUpdater,1000)

Categories