主页 / 问题 / 1071159
Accepted
Denis
Asked:2020-01-18 01:34:51 +0800 CST2020-01-18 01:34:51 +0800 CST

data-* 属性用法

  • 772

它的用途是什么，它会影响网站上元素的行为吗？

html5

1 个回答

  1. Best Answer

    在这个动画中，我使用数据属性来设置圆将填充的值。您会注意到每一秒circle都有一个数据属性data-circle。在 js 中，我得到这些数字并使用它们

    function start() {

    let reqAnimFrame = (function() {
        return requestAnimationFrame       ||
               mozRequestAnimationFrame    ||
               webkitRequestAnimationFrame ||
               oRequestAnimationFrame      ||
               msRequestAnimationFrame     ||
        function(callback) {
            setTimeout(callback, 1000 / 60);
        }
    })();

    let dataCircle = document.querySelectorAll('.progressbar__thumb');

    function setProgress(percent, selector) {
        let circle = selector.querySelector('.progressbar__thumb');
        let total = Math.PI * circle.r.baseVal.value;
        circle.style.strokeDasharray = `${total*percent/100} ${total*(1-percent/100)*2}`;
        selector.querySelector('text').innerHTML = '<tspan>' + percent.toFixed(0) + '</tspan>%';
    }

    function circle(final, i) {
        let number = -1;
        i++;
        let selector = '.progress__container:nth-child(' + i + ')';
        let mainSelector = document.querySelector(selector);
        let myReq = null;
        function circleStep() {
            myReq = reqAnimFrame(circleStep);
            setProgress(number, mainSelector);
            if (number >= final) {
                cancelAnimationFrame(myReq);
            }
            number++;
        }
        circleStep();
    }

    for (let i = 0; i < dataCircle.length; i++) {
        let num = dataCircle[i].getAttribute('data-circle');
        circle(num, i);
    }

}

document.addEventListener('DOMContentLoaded', () => {
    start();
});
    @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
	color: black;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
}

.cards__progress__bar {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-around;
	max-width: 1000px;
	margin: 0 auto;
}

.progress__container {
	width: 150px;
	height: 150px;
	margin-bottom: 50px;
}

.progressbar__track {
	fill: transparent;
	stroke: #ededed;
	stroke-width: 2px;
}

.progressbar__thumb {
	fill: transparent;
	stroke: #ff0036;
	stroke-width: 2px;
	transform-origin: center;
	stroke-dasharray: 0 1;
	transform: rotate(180deg);
}

.progressbar text {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}

.progressbar text tspan {
	fill: #ff0036;
}
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="cards__progress__bar">

  <div class="progress__container">
    <svg class="progressbar" viewbox="0 0 64 64">
      <circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
      <circle class="progressbar__thumb" data-circle="100" cx="50%" cy="50%" r="30"></circle>
      <text x=32 y=33 text-anchor=middle dominant-baseline=middle></text>
    </svg>
  </div> <!-- .progress__container -->

  <div class="progress__container">
    <svg class="progressbar" viewbox="0 0 64 64">
      <circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
      <circle class="progressbar__thumb" data-circle="90" cx="50%" cy="50%" r="30"></circle>
      <text x=32 y=33 text-anchor=middle dominant-baseline=middle></text>
    </svg>
  </div> <!-- .progress__container -->

  <div class="progress__container">
    <svg class="progressbar" viewbox="0 0 64 64">
      <circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
      <circle class="progressbar__thumb" data-circle="80" cx="50%" cy="50%" r="30"></circle>
      <text x=32 y=33 text-anchor=middle dominant-baseline=middle></text>
    </svg>
  </div> <!-- .progress__container -->

  <div class="progress__container">
    <svg class="progressbar" viewbox="0 0 64 64">
      <circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
      <circle class="progressbar__thumb" data-circle="70" cx="50%" cy="50%" r="30"></circle>
      <text x=32 y=33 text-anchor=middle dominant-baseline=middle></text>
    </svg>
  </div> <!-- .progress__container -->

</div> <!-- .cards__progress__bar -->

<script src="script.js"></script>
</body>
</html>

    • 0

相关问题