这里有点菜鸟!我想要做的是,通过使用javascript,在夏天得到10到25之间的随机数,在春天和秋天得到-5到10,然后在冬天得到-20和-5。然后我想将三种不同的 CSS 样式连接到这三个间隔。夏天的 stylesommar.css,春天/秋天的 stylevår/höst.css,冬天的 stylevinter.css。已经为此苦苦挣扎了很长时间,如果你们中的任何一位专家可以帮助我,将不胜感激?这是我到目前为止的代码,但它显然不起作用,感觉就像一团糟:
<!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>