1

我有一个简单的脚本，旨在每次单击图像时增加一个计数器：

<script>
function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount) + 1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("counter").innerHTML = localStorage.clickcount;
  } else {
    document.getElementById("counter").innerHTML = "Your browser does not support web storage...";
  }
}
</script>

的HTML：

<img id="heart" src="../assets/images/redheart.png" title="Give Love!" onclick="clickCounter()"><p id="counter"></p>

它工作正常，但我希望能够在点击之前显示计数。现在，计数器仅在单击图像按钮后显示。

感谢您的任何和所有输入。

4

1 回答 1

0

如果这不是你想要的，请告诉我。

首先，一些调整：

  • 出于可访问性原因：

    • 我做了<img>一个<button>（带有背景图片）。按钮超级易于访问且键盘友好（制表符、回车键等）
    • 向按钮添加了一个aria-label，因为它不包含文本内容

  • 稍微清理了 JavaScript。

行为：

在第一页加载...</p>

在此处输入图像描述

然后我们执行五次单击，然后刷新页面。

在此处输入图像描述

注意：由于编辑器中的安全限制，此演示无法在 Stack Overflow 上运行。看看我创建的小提琴。

document.querySelector("button").addEventListener("click", clickCounter);
document.addEventListener("DOMContentLoaded", showValue);

let counter = document.getElementById("counter");

function showValue() {
  counter.innerHTML = `Current count = ${localStorage.clickcount || 0}`;
}

function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount) + 1;
    } else {
      localStorage.clickcount = 1;
    }
    showValue();
  } else {
    counter.innerHTML = "Your browser does not support web storage...";
  }
}
button {
  background-image: url(http://icons.iconarchive.com/icons/benzlee/free-christmas/512/heart-icon.png);
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-color: transparent;
  border: none;
  display: inline-block;
  width: 64px;
  height: 64px;
  cursor: pointer;
}
<button title="Give Love!" aria-label="Give Love!">
<div id="counter"></div>

https://jsfiddle.net/mgejhcnf/3/

于 2019-02-12T01:12:41.840 回答