Question

我正在创建一个得分小部件，如here所示。

我被困在最后一步。我想将文本放置在数字下方，并将其垂直放置在圆内，如源图像所示。

这是我的 JS Fiddle。

$(document).ready(function() {
  var beginning = document.getElementById("score");
  beginning.insertAdjacentHTML('afterend', '<div class="rating-container"><div class="rating-box"><div class="chart" data-percent="90" data-scale-color="#ffb400">90</div><p id="rating-subtext">of 100</p></div></div>');


  $('.chart').easyPieChart({
    size: 160,
    barColor: "black",
    scaleLength: 0,
    lineWidth: 10,
    trackColor: "#E6E6E6",
    lineCap: "circle",
    animate: 2000,
  });

});

Answer 1

我不知道如何做馅饼，但这是从中点开始的。

<div id="container" style="
  position:relative;
  left: 100px;
  top: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
">
  <div id="text" style="
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  ">
    <span id="top" style="
      font-size: 36px;
      color: green;
    ">90.5</span>
    <br>
    <span id="bottom" style="
      font-size: 24px;
      color: green;
    ">of 100</span>
  </div>
</div>

更改需要更改的内容（颜色，大小等）。
移至<style>等

我对insertAdjacentHTML('afterend'...一无所知-似乎添加了“结束后”而不是“内部”。

Answer 2

尝试一下：

$(document).ready(function() {
  var beginning = document.getElementById("score");
  beginning.insertAdjacentHTML('afterend', `
  <div class="rating-container">
    <div class="rating-box">
      <div class="chart" data-percent="90" data-scale-color="#ffb400">
        <div id='rating'>
          <div id="rating-subtext">
            <div>90</div>
            <div>of 100</div>
          </div>
        </div>
      </div>
    </div>
  </div>`);


  $('.chart').easyPieChart({
    size: 160,
    barColor: "black",
    scaleLength: 0,
    lineWidth: 10,
    trackColor: "#E6E6E6",
    lineCap: "circle",
    animate: 2000,
  });

});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
  background: #fff;
}


.rating-container {
  margin: auto 0;
}

.rating-container .rating-box {
  width: 160px;
  height: 160px;
}

.rating-container .rating-box #rating-subtext {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#rating {
  position: absolute;
  height: 100%;
  width: 100%;
}

.rating-container .rating-box .chart {
  position: relative;
  font-size: 40px;
  height: 160px;
  color: #333333;
}

.rating-container .rating-box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="score"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js"></script>

定位Div时遇到麻烦

2 个答案: