2

I'm trying to make two different backgrounds depending on time. Day/night background. I programmed this but it doesn't work...

<script type="text/javascript">
    var currentTime = new Date().getHours();
    if (7 <= currentTime && currentTime < 20) {

        <style>
        html, body {
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0;
        width: 100%;
        background-image: url("bg_day.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;       
    }
        </style>
    }
    else {

         <style>
         html, body {
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0;
        width: 100%;
        background-image: url("bg_night.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;       
    }
         </style>
    }
    </script>

Can somebody please help me?

user3329709
  • 41
  • 5
  • 1
    you can't put css that way into your page – juvian Feb 22 '14 at 00:05
  • 1
    you're trying to print markup within javascript. That will cause a syntax error. You would have to place these in a stylesheet and then do something like add a nighttime class to the body – Kai Qing Feb 22 '14 at 00:05
  • 2
    Programming is way much fun than you might think. You just need to change `backgroundImage` with JS – Roko C. Buljan Feb 22 '14 at 00:06

4 Answers4

4

LIVE DEMO

Keep your style inside <style> (or rather inside a separate .css file) where it needs to be... don't mix it with JS.
Use:

<script>
    var currentTime = new Date().getHours();
    var day = 7 <= currentTime && currentTime < 20;
    document.body.style.backgroundImage = 'url('+ (day?"day.jpg":"night.jpg")+ ')';
</script>
</body>

in jQuery looks like:

var CTime = new Date().getHours();
$('body').css({backgroundImage:"url("+(CTime>=7&&CTime<20?"day.jpg":"night.jpg")+")"});

Or the readable way:

function bgByTime(){
   var CTime = new Date().getHours();
   return  CTime >= 7 && CTime < 20 ?
     "day.jpg"   :
     "night.jpg" ;   
}
$('body').css({ backgroundImage: "url("+ bgByTime() +")" });

or the Object Literal way (jQuery):

var ct  = new Date().getHours(),
    img = ct>=7&&ct<20 ? "day.jpg" : "night.jpg";
    bg  = {backgroundImage : "url("+ img +")"};

$('body').css(bg);
Roko C. Buljan
  • 164,703
  • 32
  • 260
  • 278
1

Here you go:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>day/night dynamic background for user3329709</title>
    <style type="text/css">
        .day
        {
            background: url(http://miriadna.com/desctopwalls/images/max/Day-sky.jpg) no-repeat;
            width: 500px;
            height: 500px;
        }
        .night
        {
            background: url(http://growwhereyoureplanted.com/wp-content/uploads/2013/11/palmlixcom-night-sky-stars-background-psdgraphics.jpg) no-repeat;
            width: 500px;
            height: 500px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var currentTime = new Date().getHours();
            if (currentTime >= 7 && currentTime <= 15) {
                $("#background").addClass("day");
            } else {
                $("#background").addClass("night");
            }
        });
    </script>
</head>
<body>
    <div id="background" class="day">
    </div>
</body>
</html>
Element808
  • 1,218
  • 11
  • 16
0

Adding style tags in js like that will not work. But since you specified jQuery, here's a basic example...

    <style>
    html, body {
      height: 100%;
      margin: 0;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 0;
      width: 100%;
      background-image: url("bg_day.jpg");
      background-repeat: no-repeat;
      background-position: center center;
      background-attachment: fixed;       
    }

    .nighttime{
      background-image: url("bg_night.jpg");
    }
    </style>

In your footer somewhere add the js

<script type="text/javascript">
    var currentTime = new Date().getHours();
    if (currentTime > 20) {
        $('body').addClass('nighttime');
    }
    </script>
Kai Qing
  • 18,359
  • 5
  • 34
  • 56
-2

Tnx for all your answers but I solved my problem with this:

<script type="text/javascript">
<!--

        var now = new Date();
        var hours = now.getHours();
        var psj=0;
        document.write('<style type="text/css">')
        if (hours >= 6 && hours <= 20){
                document.write('html, body{height: 100%; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 0; width: 100%; background-image: url("bg_day.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed;}')
        }


        else{
                document.write('html, body{height: 100%; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 0; width: 100%; background-image: url("bg_night.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed;}')
        }
        document.write('<\/style>')

//-->
</script>
user3329709
  • 41
  • 5