Somewhat of a noob here! What I want to do, by using javascript, is to get a random number between 10 and 25 when it’s summer, -5 and 10 when it’s spring and fall and then -20 and -5 when it’s winter. I then want to connect three different CSS-styles to these three intervals. stylesommar.css when it’s summer, stylevår/höst.css when it’s spring/fall and stylevinter.css when it’s winter. Have been struggling with this for a long time and would be so grateful if anyone of you experts could help me out? This is the code I’ve got so far but it obviously doesn’t work, it just feels like a mess:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var total = month;
if (total >=6 && total <= 8)
{
document.write('<img src="bakgrund1.jpg" width="117" height="100">');
(randomNumber > 10);
}
else if (total >=9 && total <= 11)
{
document.write('<img src= "bakgrund2.jpg" width="117" height="100"/>');
(randomNumber <= 10 && randomNumber >= -5);
}
else if (total ==12 || total == 1 || total == 2)
{
document.write('<img src= "bakgrund3.jpg" width="117" height="100" />');
(randomNumber < -5);
}
else if (total >=2 && total <= 6)
{
document.write('<img src= "bakgrund4.jpg" width="117" height="100" />');
(randomNumber <= 10 && randomNumber >= -5);
}
else
{
document.write("<b><br>Error!</b>");
}
</script>
<script>
function myFunction()
{
var randomNumber=Math.floor(Math.random()*50)-20;
if (randomNumber > 10){
$ ('<link href="stylesommar.css" rel="stylesheet" type="text/css">');
}
if (randomNumber <= 10 && randomNumber >= -5){
$ ('<link href="stylevårhöst.css" rel="stylesheet" type="text/css">');
}
if (randomNumber <= -5 && randomNumber >= -20){
$ ('<link href="stylevinter.css" rel="stylesheet" type="text/css">');
}
}
</script>
<script>
var d = new Date()
var timeHour = d.getHours()
var strtime = ""
if (timeHour > 5)
(
strtime = "God morgon!"
)
if (timeHour > 11)
(
strtime = "God eftermiddag!"
)
if (timeHour > 17)
(
strtime = "God kväll!"
)
if (timeHour > 19)
(
strtime = "God natt!"
)
if (timeHour < 6)
(
strtime = "Dags att sova!"
)
document.write(strtime)
</script>
</head>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$("a:link").mouseover(function(){
$("a:link").css("background-color","yellow");
});
$("a:link").mouseout(function(){
$("a:link").css("background-color","lightgray");
});
});
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#opacitybox").hide();
});
$("#show").click(function(){
$("#opacitybox").show();
});
});
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#opcitybox").fadeTo("slow",0.15);
$("p").fadeTo("slow",0.4);
});
});
</script>
</head>
<body>
<div id="layout">
<div class="rundh">
<div class="rundtopph">
<div class="rundh_r1"></div>
<div class="rundh_r2"></div>
<div class="rundh_r3"></div>
<div class="rundh_r4"></div>
</div>
</div>
<div id="sidhuvud">
</div>
<div id="kolumncontainer">
<div id="kolumn1">
<div id="menycontainer">
<h1>Sida 1</h1>
<ul id="meny">
<li><a href="index.php" id="current">Huvudmeny 1</a></li>
<li><a href="sida2.php">Huvudmeny 2</a></li>
<li><a href="sida3.php">Huvudmeny 3</a></li>
<li><a href="sida4.php">Huvudmeny 4</a></li>
<li><a href="sida5.php">Huvudmeny 5</a></li>
</ul>
</div>
<div id="opacitybox">
<p>Fördjupningsuppgiften gäller jQuery. En plusuppgift ger ett VG och ge ett MVG.<br>
A. Skapa en klickbar meny där ett antal undermenyer dyker upp när ni klickar på huvudmenyn. Använd Slide() för det.<br>
B. Använd någon av de jQuery-funktioner som inte nämndes på föreläsningen</p>
<img src="Umu_campus.jpg" width="180" height="110">
<p> Klicka för att matcha bakgrundsfärg med aktuell temp</p>
<button onclick="myFunction()">Testa!</button>
</div>
<p> Visa/dölj</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
<div id="kolumn2">
<h3>Del 1</h3> <button>Klicka för att göra textblock genomskinliga</button>
<h4>Information</h4>
<p> Ni ska i detta moment skriva ett JavaScript som påverkar en webbsidas utseende.
Bilder ska bytas ut beroende på datum. Förslagsvis byter ni bilder varje kvartal eller varje månad.
Färgerna ska återspegla aktuell temperatur. Temperaturen simuleras genom att man slumpar ut en lämplig temperatur för aktuell årstid. Förslagsvis slumpar ni ut ett tal mellan 10 och 25 på sommaren, mellan -5 och 10 på höst och vår och mellan -20 och -5 på vintern. Ni kan använda er av funktionen Math(). Med den går det att slumpa fram en temperatur.</p>
<h3>Del 2</h3>
<h4>Information</h4>
<p>Vidareutveckla din webbsida så att du med hjälp av JavaScript ändrar på textinnehållet någonstans i din sida. Exempelvis slumpar du ut något visdomsord, eller så utgår du från den kod du skrev i moment 1 och ser till så att du byter ut någon text så att den bättre passar till årstiden.</p>
<h4>Information</h4>
<p> Här ska ni använda er av jQuery för att skapa ett antal effekter, ni ska implementera 3 olika saker:
 Ni ska använda mouseOver() för att ändra utseendet på en länk när muspekaren står över länken.
 Hide() och Show() ska användas för att visa och dölja en div där ni har lagt text och bild. Ni kan använda Toggle() om ni vill.
 fadeTo() ska användas för att göra två textblock genomskinliga. De ska ha olika opacitet så det behövs två funktioner för att lösa detta. Metoden fadeTo() anropas på valfritt sätt.</p>
<h4>Information</h4>
<p>Fördjupningsuppgiften gäller jQuery. En plusuppgift ger ett VG och ger ett MVG.<br>
A. Skapa en klickbar meny där ett antal undermenyer dyker upp när ni klickar på huvudmenyn. Använd Slide() för det.<br>
B. Använd någon av de jQuery-funktioner som inte nämndes på föreläsningen</p>
</div>
</div>
<div id="sidfot">
</div>
</div>
</body>
</html>
