Question

我设置了代码，因此当用户点击图像时，它会转到另一个图像，然后当他们点击该图像时，它会转到另一个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页面改变那时我无法保持得分。

Answer 1

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

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

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"; }

Answer 2

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

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

//get cookie
var score = document.cookie;

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

Answer 3

在页面之间保持得分有一些很好的答案，但我也想谈谈关于＆＃34的部分;我不能有10个基本相同的html页面＆＃34;

首先，您应该将javascript放在单独的文件中，例如<script src="quiz.js"></script>，并在每个页面上使用相同的文件。

quiz = [{page1},{page2}]

这样你只需要编写脚本来在一个地方处理测验。这不会帮助您在页面之间存储分数，因此您仍然需要cookie，localstorage或数据库作为其他答案中的sugested。

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

有关每个页面的信息存储在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() };时，您将转到测验数组中的下一页，只需使用新信息重新绘制页面。没有重新加载页面，只需重新绘制新信息。

＆＃13;

<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>

＆＃13;

SELECT * FROM (
SELECT 
    a.id,
    citypair,
    a.season,
    airline,
    class,
    fare,
    rbd,
    season_from,
    season_to,
    schedule_id,
    cp.departure_id,
    cp.destination_id,
    sch.date_time
FROM tarifftool_price_log as a
JOIN tarifftool_seasons as b ON a.seasonId = b.id
JOIN tarifftool_citypairs as cp ON citypair = cp.id
JOIN tarifftool_schedule_queue AS sch ON schedule_id = sch.id
 WHERE       b.date = '12/26' AND class = 'b' ORDER BY schedule_id DESC) as qq 
GROUP BY citypair, airline

＆＃13;

点击时不断更改图片

3 个答案: