Question

每次单击对应该功能链接时，如何重新运行功能（使计数器从0运行到指定的数字）？

至于现在的问题是它只适用于第一次点击。

这就是我用两个不同的函数名称连接两个链接的方式，以便它触发：当我点击给定的链接（有2个链接）时，我将其数据属性存储在变量中并触发其名称与存储的数据属性匹配的函数串。

功能：

HTML：

<a href="" data="one">one</a>

<a href="" data="two">two</a>

JS：

$('a').on('click', function(e) {
  e.preventDefault();
  var storedata = $(this).attr('data');

    jQuery('.canvaswrap').fadeIn();

  console.log(storedata)
  window[storedata]();


});


window.one = function() {
     setInterval(progressSim , 40); 

}

window.two = function() {

     setInterval(progressSim2 , 40); 
}

Answer 1

clearTimeout和progressSim() progressSim2()，sim和sim2未定义。

因此，您应该将setInterval分配给变量，如：

var sim;
var sim2;
window.one = function() {
    sim = setInterval(progressSim , 40); 
}
window.two = function() {
    sim2 = setInterval(progressSim2 , 40); 
}

在

中将数字重置为零

if (al >= 94) {
  al = 0; // reset the number
  clearTimeout(sim);
}

＆＃13;

var ctx = document.getElementById('my_canvas').getContext('2d');
var ctx2 = document.getElementById('my_canvas2').getContext('2d');
var al = 0;
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height;
var diff;

var greenPart = ctx.createLinearGradient(0, 0, 0, 100);
greenPart.addColorStop(0, '#0f2596');
greenPart.addColorStop(1, '#0ea5e8');

var whitePart = ctx.createLinearGradient(0, 0, 0, 100);
whitePart.addColorStop(0, '#fff');
whitePart.addColorStop(1, '#0e97df');

var width = 3;
var width2 = 1;

ctx2.save();
ctx2.beginPath();
ctx2.rect(-width, -width, 70 + width, 70 + width * 2);
ctx2.clip();
// Then we draw the left half

ctx2.beginPath();
ctx2.arc(35, 35, 45, 0, Math.PI * 4, false);
ctx2.fillStyle = '#fff';
ctx2.fill();

ctx2.restore();

// This is the First Function 

function progressSim() {
  diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
  ctx.clearRect(0, 0, cw, ch);

  ctx.lineWidth = width;
  ctx.fillStyle = '#1c295c';

  ctx.textAlign = 'center';
  ctx.font = "bold 19px Arial";
  ctx.fillText(al + '%', cw * .54, ch * .54 + 2, cw);

  // First we make a clipping region for the left half
  ctx.save();
  ctx.beginPath();
  ctx.rect(-width2, -width2, 100, 100 + width2 * 2);
  ctx.clip();
  ctx.lineWidth = width2;
  // Then we draw the left half
  ctx.strokeStyle = "#d7ecf6";
  ctx.beginPath();
  ctx.arc(50, 50, 45, 0, Math.PI * 4, false);
  ctx.stroke();

  ctx.restore(); // restore clipping region to default

  // Then we make a clipping region for the right half
  ctx.save();

  ctx.beginPath();
  ctx.rect(50, -width, 50 + width, 100 + width * 2);
  ctx.clip();
  // Then we draw the right half
  ctx.strokeStyle = greenPart;
  ctx.beginPath();
  ctx.lineCap = 'round';
  ctx.arc(50, 50, 45, 4.78, diff / 10 + start, false);
  ctx.stroke();
  ctx.restore(); // restore clipping region to default
  // First we make a clipping region for the left half
  ctx.save();
  ctx.beginPath();
  ctx.rect(-width, -width, 50 + width, 100 + width * 2);
  ctx.clip();

  // Then we draw the left half
  ctx.strokeStyle = whitePart;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.arc(50, 50, 45, start, diff / 10 + start, false);
  ctx.stroke();

  ctx.restore(); // restore clipping region to default
  if (al >= 94) {
    al = 0; // reset the number
    clearTimeout(sim);
    // Add scripting here that will run when progress completes
  }
  al++;
}

// This is the Second Function 

function progressSim2() {
  diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
  ctx.clearRect(0, 0, cw, ch);

  ctx.lineWidth = width;
  ctx.fillStyle = '#1c295c';

  ctx.textAlign = 'center';
  ctx.font = "bold 19px Arial";
  ctx.fillText(al + '%', cw * .54, ch * .54 + 2, cw);

  // First we make a clipping region for the left half
  ctx.save();
  ctx.beginPath();
  ctx.rect(-width2, -width2, 100, 100 + width2 * 2);
  ctx.clip();
  ctx.lineWidth = width2;
  // Then we draw the left half
  ctx.strokeStyle = "#d7ecf6";
  ctx.beginPath();
  ctx.arc(50, 50, 45, 0, Math.PI * 4, false);
  ctx.stroke();

  ctx.restore(); // restore clipping region to default

  // Then we make a clipping region for the right half
  ctx.save();

  ctx.beginPath();
  ctx.rect(50, -width, 50 + width, 100 + width * 2);
  ctx.clip();
  // Then we draw the right half
  ctx.strokeStyle = greenPart;
  ctx.beginPath();
  ctx.lineCap = 'round';
  ctx.arc(50, 50, 45, 4.78, diff / 10 + start, false);
  ctx.stroke();
  ctx.restore(); // restore clipping region to default
  // First we make a clipping region for the left half
  ctx.save();
  ctx.beginPath();
  ctx.rect(-width, -width, 50 + width, 100 + width * 2);
  ctx.clip();

  // Then we draw the left half
  ctx.strokeStyle = whitePart;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.arc(50, 50, 45, start, diff / 10 + start, false);
  ctx.stroke();

  ctx.restore(); // restore clipping region to default
  if (al >= 54) {
    al = 0; // reset the number
    clearTimeout(sim2);
    // Add scripting here that will run when progress completes
  }
  al++;
}


$('a').on('click', function(e) {
  e.preventDefault();
  var storedata = $(this).attr('data');
  jQuery('.canvaswrap').fadeIn();
  console.log(storedata)
  window[storedata]();
});
var sim;
var sim2;

window.one = function() {
  sim = setInterval(progressSim, 40);
}

window.two = function() {
  sim2 = setInterval(progressSim2, 40);
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}

a {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
  margin: 10px 30px;
  color: teal;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" data="one">one</a>
<a href="" data="two">two</a>
<div class="canvaswrap">
  <canvas id="my_canvas2" width="70" height="70"></canvas>
  <canvas id="my_canvas" width="100" height="100"></canvas>
</div>

＆＃13;

JavaScript / JQuery - ＆gt;每次单击对应该功能链接时重新运行功能

1 个答案: