点击时不断更改图像并打分

Change Image on click constantly with score

本文关键字：图像      更新时间：2023-09-26

我已经设置好了代码，这样当用户单击图像时，它会转到另一个图像，然后当他们单击该图像时，会转至另一个html页面。我不能有10个基本相同的html页面，我也需要它来保持分数。

        <img src="img/question1.png" alt="" style= "width: 15em;" id="question1"  usemap="map"/>
        <map name="map">
            <area shape="rect" coords="114,296,17,262" onclick="toggleImage()";>
            <area shape="rect" coords="140,266,234,294" onclick="right()";>
            <area shape="rect" coords="78,348,182,395" href="quiz2.html">

我有这个用于图像映射和hrefs

function toggleImage(){ 
      var img = document.getElementById("question1");
      img.src = img.src.indexOf("fact1.png")!=-1?"img/question1.png":"img/fact1.png";
}
function right(){
     var img = document.getElementById("question1");
     img.src = img.src.indexOf("fact1.png")!=-1?"img/question1.png":"img/fact1.png";
}

这是针对Javascript的。

这里一切都正常，我只需要它来保持大部分分数，但当html页面发生变化时，我就无法保持分数了。

使用sessionStorage和localStorage存储会话和跨页面的数据。

在页面上存储一个计数器，然后您可以使用它来识别图像。当更改要显示的图像时，请更改计数器并将其与会话存储在一起存储：

sessionStorage.setItem("counter", "value");

在之后加载的页面上，使用onload()事件立即获取存储的项目：

<body onload="init()">
  <img id="question1"></img>
</body>
function init() {
  var imgCounter = sessionStorage.getItem("counter");
  var img = document.getElementById("question1");
  img.src = "fact" + imgCounter + ".png"; }

您需要将分数存储在外部。您可以使用cookie、本地存储或数据库，具体取决于项目本身。如果你想使用cookie，这是一个简单的解决方案：

//set cookie
document.cookie="score=10";
//get cookie
var score = document.cookie;

如果你需要，我可以帮助你开发你的项目。请告诉我

有一些很好的答案可以在页面之间保持分数，但我也想谈谈"我不能有10个基本相同的html页面"

首先，您应该将javascript放在一个单独的文件中，如quiz.js，并在每个页面上使用相同的文件。

<script src="quiz.js"></script>

这样，你只需要编写脚本就可以在一个地方处理测验。这不会帮助你在页面之间存储分数，所以你仍然需要cookie、本地存储或其他答案中建议的数据库。

但更进一步，您可能应该考虑将整个测试保存在一个html文件中。我将在下面给你一个例子，让你开始，在底部有一个工作例子。现在我不知道你的测验是关于什么的，也不知道它最终应该如何运作，但希望你在前进的过程中会发现这很有帮助。

关于每个页面的信息存储在quiz = [{page1},{page2}]中，其中每个页面都包含页面名称、图像和该页面所需的其他信息。

当您在示例中移动到quiz2.html时，您会移动到测验数组中的下一页，并简单地用新信息重新绘制页面。不需要重新加载页面，只需使用新信息重新绘制即可。

var score = 0,
  current = null,
  quiz = [{
    name: 'quiz page 1',
    image: 'https://placekitten.com/200/203'
  }, {
    name: 'quiz page 2',
    image: 'https://placekitten.com/200/303'
  }],
  img,
  title,
  score,
  currentScore = 0;
function toggleImage() {
  currentScore++;
  updateScore();
  img.src = "https://placekitten.com/203/205";
}
function right() {
  currentScore++;
  updateScore();
  img.src = "https://placekitten.com/203/200";
}
function next() {
  var i = quiz.indexOf(current) + 1;
  if (i < quiz.length) current = quiz[i];
  show();
}
function show() {
  img.src = current.image;
  title.innerText = current.name;
  updateScore();
}
function updateScore() {
  score.innerText = currentScore;
}
window.onload = function() {
  img = document.getElementById("question");
  title = document.getElementById("title");
  score = document.getElementById("score");
  current = quiz[0];
  show()
};
<div id="title"></div>
<div>
  Score: <span id="score"></span>
</div>
<img alt="" id="question" usemap="map" />
<map name="map">
  <area shape="rect" coords="0,0,100,100" onclick="toggleImage()" ;>
  <area shape="rect" coords="100,0,200,100" onclick="right()" ;>
  <area shape="rect" coords="0,100,200,200" onclick="next()">
</map>

相关文章：