时间戳

首页 > 解决方案 > 如何在 setInterval 函数中访问 SVG 数据属性

javascript - 如何在 setInterval 函数中访问 SVG 数据属性

问题描述

我有一个带有data-percent属性的圆形 svg。（有用于开始和停止倒计时的按钮）我想在函数data-percent内部更改此属性。setInterval我的目的是data-percent在第二次倒计时时改变(second * 10)。

我可以在 SetInterval 之外手动更改值，例如；

var second = 8;
var round = document.querySelector('.round');
round.setAttribute('data-percent', second * 8);

但是在 setInterval 函数内部没有任何变化，控制台也没有错误。

这里也是CodePen实时版本

$(document).ready(function() {
  var $round = $('.round'),
      roundRadius = $round.find('circle').attr('r'),
      roundPercent = $round.data('percent'),
      roundCircum = 2 * roundRadius * Math.PI,
      roundDraw = roundPercent * roundCircum / 100
  $round.css('stroke-dasharray', roundDraw  + ' 999')
})



var second = 10;
//var round = document.querySelector('.round');
//round.setAttribute('data-percent', second * 10);
let play = true;

function togglePlay(){
    if(!play){
        playCount();
        document.querySelector('button').innerHTML='Pause';
    } else {
        pauseCount();
        document.querySelector('button').innerHTML='Play';

    }
    play = !play;
}



let myTimer;
function playCount() {
    myTimer = setInterval(myCounter,1000);
}
function pauseCount() {
    clearInterval(myTimer);
}

function myCounter (){
    if(second == 0) {
     clearInterval(myTimer);
    }
    var round = document.querySelector('.round');
    round.setAttribute('data-percent', second * 10);
    console.log('Hello World', second)
    second--;
}
body {
  margin: 0;
}
.point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.round {
  transform: rotate(-90deg);
  transition: all 1s ease-in-out;
  
  /* SVG */
  fill: none;
  stroke: blue;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 0 999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


  <div class="point">
    <svg class="round" viewbox="0 0 100 100" width="200" height="200" data-percent="">
      <circle cx="50" cy="50" r="40" />  
    </svg>
</div>

<button onclick="togglePlay()">Play</button>

标签： javascriptsvg

解决方案

我自己找到了我的问题的解决方案。我也必须更新css stroke-dasharray。这是解决方案：

    
  var roundPercent = 10;
//var round = document.querySelector('.round');
//round.setAttribute('data-percent', second * 10);
let play = true;

function togglePlay(){
    if(!play){
        playCount();
        document.querySelector('button').innerHTML='Pause';
    } else {
        pauseCount();
        document.querySelector('button').innerHTML='Play';

    }
    play = !play;
}



let myTimer;
function playCount() {
    myTimer = setInterval(myCounter,1000);
  
}
function pauseCount() {
    clearInterval(myTimer);
}

function myCounter (){
    if(roundPercent == 0) {
     clearInterval(myTimer);
    }
  var $round = $('.round'),
      roundRadius = $round.find('circle').attr('r'),
      roundCircum = 2 * roundRadius * Math.PI,
      roundCalc = roundPercent *10,
      roundDraw = roundCalc * roundCircum / 100
      $round.css('stroke-dasharray', roundDraw  + ' 999')
      var round = document.querySelector('.round');
      round.setAttribute('data-percent', roundCalc);   
      console.log('Hello World', roundCalc)
      roundPercent--;
}
body {
  margin: 0;
}
.point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.round {
  transform: rotate(-90deg);
  transition: all 1s ease-in-out;
  
  /* SVG */
  fill: none;
  stroke: blue;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 0 999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="point">
 <svg class="round" viewbox="0 0 100 100" width="200" height="200" data-percent="100" style="stroke-dasharray: 251.327, 999;">
      <circle cx="50" cy="50" r="40" />  
    </svg>
</div>

<button onclick="togglePlay()">Play</button>

推荐阅读