如何在一周中的几天之间更改照片?

时间:2017-01-06 22:27:55

标签: javascript html css

到目前为止,我有很多代码,但我无法使用load()函数:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Page resizer -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Date -->
<script>
var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("date").innerHTML = days[d.getDay()];
</script>

<!-- Gif changer -->
<script>
function changegif() {
  var gif;
  if (days = Sunday) {
    gif = "/img/sunday.gif";
  } else if (days = Monday) {
    gif = "/img/monday.gif";
  } else if (days = Tuesday) {
    gif = "/img/tuesday.gif";
  } else if (days = Wednesday) {
    gif = "/img/wednesday.gif";
  } else if (days = Thursday) {
    gif = "/img/thursday.gif";
  } else if (days = Friday) {
    gif = "/img/friday.gif";
  } else if (days = Saturday) {
    gif = "/img/saturday.gif";
  }
}

function load() {
  document.getElementById('gif').src = changegif();
}
</script>
</head>
<body onload="load()">

<!-- More date stuff -->
<style>
.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 150px; 
   left: 0; 
   width: 100%; 
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

h1 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

h1 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}
</style>
<div class="image">
<img src="#" id="gif">
<h2><span>Enjoy Your</span></h2>
<br>
<h1 id="date"><span></span></h1>
</div>

</body>
</html>

如果有人知道我做错了什么,请告诉我。我已经尝试将功能集成到一个按钮中,但它仍然无法正常工作。

2 个答案:

答案 0 :(得分:3)

删除所有自己的$result = mysql_query("SELECT * FROM m1 WHERE mevent='Hiking' AND maffirm='Yes' ORDER BY mdate DESC") or die(mysql_error()); echo "<table border='2' cellpadding='10'>"; echo "<tr>"; echo "<td>"; $currentDate = false; while($row = mysql_fetch_array($result)) { if ($row['mdate'] != $currentDate) { echo '<strong>' . $row['mdate'] . '</strong>' ; $currentDate = $row['mdate']; } echo '<ul><li>' . $row['mname'] . '</li></ul>'; } echo "</td>"; echo "</tr>"; echo "</table>"; ,然后使用:

<script>

答案 1 :(得分:0)

解释所有错误:

  • =指定;它没有比较。
  • changegif不返回任何内容,因此document.getElementById('gif').src = changegif();将始终将其设置为undefined(假设没有其他错误)。
  • Sunday和其他人是未声明的变量名称;它们只能作为字符串使用:"Sunday"
  • days不是一天,它是整个数组,所以将它与一天比较是行不通的。

changegif可以简化为:

function changegif(){
  return "/img/"
    + days[d.getDay()].toLowerCase()
    + ".gif";
}

或使用the answer by Chris G