Question

我的网站上有一个条形图，它计算用户单击1,2,3,4或5星的次数，其代码如下：

function enlargeStars(x) {
  if(x === 0) { return; }
  starId = "star" + x;
  document.getElementById(starId).style.width = "60px";
  enlargeStars(x-1);
}
 function shrinkStars(x) {
   if(x === 0) { return; }
   starId = "star" + x;
   document.getElementById(starId).style.width = "50px";
   shrinkStars(x-1);
 }

let fiveStarCounter = parseInt(document.getElementById("c5").innerHTML);
let star5 = document.getElementById("star5");
star5.onclick = () => {
  fiveStarCounter++;
  document.getElementById("c5").innerHTML = fiveStarCounter;
  updateBars();
}

let fourStarCounter = parseInt(document.getElementById("c4").innerHTML);
let star4 = document.getElementById("star4");
star4.onclick = () => {
  fourStarCounter++;
  document.getElementById("c4").innerHTML = fourStarCounter;
  updateBars();
}

let threeStarCounter = parseInt(document.getElementById("c3").innerHTML);
let star3 = document.getElementById("star3");
star3.onclick = () => {
  threeStarCounter++;
  document.getElementById("c3").innerHTML = threeStarCounter;
  updateBars();
}

let twoStarCounter = parseInt(document.getElementById("c2").innerHTML);
let star2 = document.getElementById("star2");
star2.onclick = () => {
  twoStarCounter++;
  document.getElementById("c2").innerHTML = twoStarCounter;
  updateBars();
}

let oneStarCounter = parseInt(document.getElementById("c1").innerHTML);
let star1 = document.getElementById("star1");
star1.onclick = () => {
  oneStarCounter++;
  document.getElementById("c1").innerHTML = oneStarCounter;
  updateBars();
}

function updateBars() {
  let total = fiveStarCounter+fourStarCounter+threeStarCounter+twoStarCounter+oneStarCounter;
  let bar1height = Math.round((oneStarCounter/total)*100);
  document.getElementById("bar1").style.height = bar1height+"%";
  let bar2height = Math.round((twoStarCounter/total)*100);
  document.getElementById("bar2").style.height = bar2height+"%";
  let bar3height = Math.round((threeStarCounter/total)*100);
  document.getElementById("bar3").style.height = bar3height+"%";
  let bar4height = Math.round((fourStarCounter/total)*100);
  document.getElementById("bar4").style.height = bar4height+"%";
  let bar5height = Math.round((fiveStarCounter/total)*100);
  document.getElementById("bar5").style.height = bar5height+"%";
}

.ratings-container {
  /*background-color: red;*/
  font-family: tahoma;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

.graph-container {
  /*background-color: blue;*/
}

.graph {
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 300px;
  width: 66%;
}

.graph div {
  width: 12%;
  height: 1px;
  background-color: black;
}

.counters {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 66%;
}

.label-container {
  width: 64%;
  background-color: green;
}

#fivestar {
  float: left;
  /*display: inline;*/
}

#onestar {
  float: right;
  /*display: inline;*/
}

.star-container {
  width: 66%;
  /*background-color: blue;*/
  margin-top: 100px;
  font-size: 0;
}

.star {
  width: 50px;
  height: auto;
  cursor: pointer;
}

<div class="ratings-container">
    <h3>RATE YOUR STAY</h3>
    <div class="graph-container">
      <div class="graph">
        <div id="bar5"></div>
        <div id="bar4"></div>
        <div id="bar3"></div>
        <div id="bar2"></div>
        <div id="bar1"></div>
      </div>
      <div class="counters">
        <h3 id="c5">0</h3>
        <h3 id="c4">0</h3>
        <h3 id="c3">0</h3>
        <h3 id="c2">0</h3>
        <h3 id="c1">0</h3>
      </div>
      <div class="label-container">
        <h2 id="fivestar">5 star</h2>
        <h2 id="onestar">1 star</h2>
      </div>
    </div>
     <div class="star-container">
      <img onmouseout="shrinkStars(1)" onmouseover="enlargeStars(1)" class="star" id="star1" src="./star.jpg">
      <img onmouseout="shrinkStars(2)" onmouseover="enlargeStars(2)" class="star" id="star2" src="./star.jpg">
      <img onmouseout="shrinkStars(3)" onmouseover="enlargeStars(3)" class="star" id="star3" src="./star.jpg">
      <img onmouseout="shrinkStars(4)" onmouseover="enlargeStars(4)" class="star" id="star4" src="./star.jpg">
      <img onmouseout="shrinkStars(5)" onmouseover="enlargeStars(5)" class="star" id="star5" src="./star.jpg">
    </div>
  </div>

因此，每次单击星星时，相关条形的计数都会更新。将计数相加，并通过barXcount / total来计算每个条形的百分比，并将其作为高度。但是，每次用户打开页面时，每个小节的计数器都会刷新。如何使这些计数器“活跃”？

Answer 1

如果要保留数据以便在用户修改页面时显示该数据，则需要将该数据存储在某处。 HTML 5使我们可以访问webstorage API，通过该API您可以将数据存储在客户端计算机中。例如，

function updateBars() {
  let total = fiveStarCounter + fourStarCounter + threeStarCounter + twoStarCounter + oneStarCounter;
  localStorage.setItem("total", total);


  let bar1height = Math.round((oneStarCounter / total) * 100);
  document.getElementById("bar1").style.height = bar1height + "%";
  localStorage.setItem("bar1", bar1height + "%");

  //replicate for other bars

}

//call this function on page load
function onPageLoad() {
  var total = localStorage.getItem("total");
  if (total != null) {
    document.getElementById("bar1").style.height = localStorage.getItem("bar1");
  }

  //replicate this for other bars

}

在这里，无论何时计算数据，我们都在localStorage中设置值。在页面加载时，我们从localStorage检索数据并将其显示在屏幕上。您可以在这里了解更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

使用JavaScript的实时点击计数器？

1 个答案: