0

这里有点菜鸟!我想要做的是,通过使用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&ouml;rdjupningsuppgiften g&auml;ller jQuery. En plusuppgift ger ett VG och ge ett  MVG.<br>
 A. Skapa en klickbar meny d&auml;r ett antal undermenyer dyker upp n&auml;r ni   klickar p&aring; huvudmenyn. Anv&auml;nd Slide() f&ouml;r det.<br>
 B. Anv&auml;nd n&aring;gon av de jQuery-funktioner som inte n&auml;mndes p&aring;    f&ouml;rel&auml;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&aring;verkar en webbsidas   utseende.
Bilder ska bytas ut beroende p&aring; datum. F&ouml;rslagsvis byter ni bilder varje   kvartal eller varje m&aring;nad.
F&auml;rgerna ska &aring;terspegla aktuell temperatur. Temperaturen simuleras genom   att man slumpar ut en l&auml;mplig temperatur f&ouml;r aktuell &aring;rstid.       F&ouml;rslagsvis slumpar ni ut ett tal mellan 10 och 25 p&aring; sommaren, mellan -5 och   10 p&aring; h&ouml;st och v&aring;r och mellan -20 och -5 p&aring; vintern. Ni kan anv&auml;nda er av funktionen Math(). Med den g&aring;r det att slumpa fram en temperatur.</p>
<h3>Del 2</h3>
 <h4>Information</h4>
 <p>Vidareutveckla din webbsida s&aring; att du med hj&auml;lp av JavaScript &auml;ndrar p&aring; textinneh&aring;llet n&aring;gonstans i din sida. Exempelvis slumpar du ut n&aring;got visdomsord, eller s&aring; utg&aring;r du fr&aring;n den kod du skrev i moment 1 och ser till s&aring; att du byter ut n&aring;gon text s&aring; att den b&auml;ttre passar till &aring;rstiden.</p>
  <h4>Information</h4>
  <p> H&auml;r ska ni anv&auml;nda er av jQuery f&ouml;r att skapa ett antal effekter, ni ska implementera 3 olika saker:
&#61607; Ni ska anv&auml;nda mouseOver() f&ouml;r att &auml;ndra utseendet p&aring; en l&auml;nk n&auml;r muspekaren st&aring;r &ouml;ver l&auml;nken.
&#61607; Hide() och Show() ska anv&auml;ndas f&ouml;r att visa och d&ouml;lja en div d&auml;r ni har lagt text och bild. Ni kan anv&auml;nda Toggle() om ni vill.
&#61607; fadeTo() ska anv&auml;ndas f&ouml;r att g&ouml;ra tv&aring; textblock genomskinliga. De ska ha olika opacitet s&aring; det beh&ouml;vs tv&aring; funktioner f&ouml;r att l&ouml;sa detta. Metoden fadeTo() anropas p&aring; valfritt s&auml;tt.</p>
  <h4>Information</h4>
  <p>F&ouml;rdjupningsuppgiften g&auml;ller jQuery. En plusuppgift ger ett VG och ger ett MVG.<br>
A. Skapa en klickbar meny d&auml;r ett antal undermenyer dyker upp n&auml;r ni klickar p&aring; huvudmenyn. Anv&auml;nd Slide() f&ouml;r det.<br>
B. Anv&auml;nd n&aring;gon av de jQuery-funktioner som inte n&auml;mndes p&aring; f&ouml;rel&auml;sningen</p>
</div>
</div>
 <div id="sidfot">
</div>
</div>
</body>
</html>
4

2 回答 2

0

我在下面重写了你的代码。您的代码中的逻辑基本上是正常的,但是有一些错误不允许它工作。

在这里,我们使用一个调用函数getRandomInt()来生成随机数。它接受最小值和最大值的两个参数。根据月份,我们使用您指定的最小值/最大值调用该函数。然后将该数字传递给myFunction()它将正确的 CSS 文件写入文档。

var currentTime = new Date(),
    month = currentTime.getMonth() + 1;

if (month >=6 && month <= 8) {
  document.write('<img src="bakgrund1.jpg" width="117" height="100">');   
}
else if (month >=9 && month <= 11){
  document.write('<img src= "bakgrund2.jpg"  width="117" height="100"/>');
}
else if (month ==12 || month == 1 || month == 2) {
  document.write('<img src= "bakgrund3.jpg" width="117" height="100" />');
}
else if (month >=2 && month <= 6) {
  document.write('<img src= "bakgrund4.jpg" width="117" height="100" />');
}    

function getMonth() {
  var currentTime = new Date();
  return currentTime.getMonth() + 1; 
}

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getTemp() {    
  var month = getMonth(),
      randomNumber;
  if (month >=6 && month <= 8) {
    randomNumber = getRandomInt(10, 25);
  }
  else if (month >=9 && month <= 11){
    randomNumber = getRandomInt(-5, 10);
  }
  else if (month == 12 || month == 1 || month == 2) {
    randomNumber = getRandomInt(-20, -5);
  }
  else if (month >= 2 && month <= 6) {
    randomNumber = getRandomInt(-5, 10);
  }     
  return randomNumber;
}

function myFunction() {
  var month = getMonth();
  if (month ==  11 || month == 12 || month == 1 || month == 2) {
    $ ('<link href="stylevinter.css" rel="stylesheet" type="text/css">').appendTo("head");      
  }
  if (month >= 3 && month <= 6) {
    $ ('<link href="stylevårhöst.css" rel="stylesheet" type="text/css">').appendTo("head");      
  }      
  if (month >= 7 && month <= 10) {
    $ ('<link href="stylesommar.css" rel="stylesheet" type="text/css">').appendTo("head");
  }
}

有更有效的方法可以完成您正在做的事情,但我的回答显示了如何使用您提供的代码来完成它。

编辑:没有注意到myFunction()第一次调用 onclick 。这是一个更新版本,它使用函数获取当前月份和该月份范围内的随机数。如果您有任何问题,请告诉我。

EDIT2:我不确定随机数和范围是什么。我在回答中删除了它们。随意调整myFunction()以更好地反映代表每个季节的 4 个月期间。

EDIT3:我们现在又有了随机数(温度)。我不确定你在哪里使用温带,但要获得你刚刚调用的随机温度getTemp()

来源在getRandomInt()这里:

https://stackoverflow.com/a/1527820/1091949

于 2013-04-07T13:17:35.060 回答
0
$ ('<link href="….css" rel="stylesheet" type="text/css">');

这只是创建元素,但对它没有任何作用。您需要将其附加到 DOM 以应用样式表:

$ ('<link href="….css" rel="stylesheet" type="text/css">').appendTo("head");
于 2013-04-07T12:41:35.857 回答