JavaScript - 显示基于微调器的链接

Question

我发现了这个 js spinner，我喜欢它末尾的计数器。从 15 秒开始倒计时。我想知道是否可以做到这一点，例如，如果您登陆地理区域，它会倒计时 5 秒，然后将您重定向到一个单独的网站。历史会把你带到不同的链接等等。谢谢

JavaScript

var colors = ["#ffff00" , "#1be11b", "#0000ff",  "#7e7e7e", "#8a2be2", "#006400", "#2980B9", "#E74C3C"];
// NEED to pre load this data prior
var prize_descriptions = ["GENERAL", "GEOGRAPHY", "HISTORY", "ARTS", "SCIENCE", "SPORTS", "RELIGION", "MEDIA"];
var current_user_status = {};

var startAngle = 0;
var arc = Math.PI / 4;
var spinTimeout = null;

var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;

var current_user_status = null;
var spin_results = null;

var wheel;

var counter, tt;

function drawSpinnerWheel() {
    var canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        var outsideRadius = 200;
        var textRadius = 160;
        var insideRadius = 125;

        wheel = canvas.getContext("2d");
        wheel.clearRect(0, 0, 500, 500);


        wheel.strokeStyle = "#ecf0f1";
        wheel.lineWidth = 5;

        wheel.font = '12px Helvetica, Arial';

        for (var i = 0; i < 8; i++) {
            var angle = startAngle + i * arc;
            wheel.fillStyle = colors[i];

            wheel.beginPath();
            wheel.arc(250, 250, outsideRadius, angle, angle + arc, false);
            wheel.arc(250, 250, insideRadius, angle + arc, angle, true);
            wheel.stroke();
            wheel.fill();

            wheel.save();
            wheel.shadowOffsetX = -1;
            wheel.shadowOffsetY = -1;
            wheel.shadowBlur = 0;
            wheel.shadowColor = "rgb(220,220,220)";
            wheel.fillStyle = "#ecf0f1";
            wheel.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
            wheel.rotate(angle + arc / 2 + Math.PI / 2);
            var text = prize_descriptions[i];
            if (text === undefined) text = "Not this time!";
            wheel.fillText(text, -wheel.measureText(text).width / 2, 0);
            wheel.restore();
        }

        //Arrow
        wheel.fillStyle = "#ecf0f1";
        wheel.beginPath();
        wheel.moveTo(250 - 4, 250 - (outsideRadius + 5));
        wheel.lineTo(250 + 4, 250 - (outsideRadius + 5));
        wheel.lineTo(250 + 4, 250 - (outsideRadius - 5));
        wheel.lineTo(250 + 9, 250 - (outsideRadius - 5));
        wheel.lineTo(250 + 0, 250 - (outsideRadius - 13));
        wheel.lineTo(250 - 9, 250 - (outsideRadius - 5));
        wheel.lineTo(250 - 4, 250 - (outsideRadius - 5));
        wheel.lineTo(250 - 4, 250 - (outsideRadius + 5));
        wheel.fill();
    }
}

function spin() {
    $("#spin").unbind('click');
    $("#spin").attr("id", "nospin");

    document.getElementById('timer').innerHTML = " ";
    document.getElementById('category').innerHTML = " ";

    spinMovement = Math.floor(Math.random() * 20) + prize_descriptions.length * 2;

    spinAngleStart = 1 * 10 + spinMovement;
    spinTime = 0;
    spinTimeTotal = Math.floor(Math.random() * 4) * Math.floor(Math.random() * 6) + Math.floor(Math.random() * 8) * Math.floor(Math.random() * 2000) + 2000;

    console.log(spinMovement + " - " + spinTimeTotal);

    rotateWheel();
}

function rotateWheel() {
    spinTime += 30;
    if (spinTime >= spinTimeTotal) {
        stopRotateWheel();
        return;
    }
    var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
    startAngle += (spinAngle * Math.PI / 180);
    drawSpinnerWheel();
    spinTimeout = setTimeout('rotateWheel()', 30);
}

function stopRotateWheel() {
    clearTimeout(spinTimeout);
    var degrees = startAngle * 180 / Math.PI + 90;
    var arcd = arc * 180 / Math.PI;
    var index = Math.floor((360 - degrees % 360) / arcd);
    wheel.save();
    wheel.font = '30px "Homestead-Inline", Helvetica, Arial';
    var text = prize_descriptions[index];
    //wheel.fillText(text, 250 - wheel.measureText(text).width / 2, 250 + 10);
    wheel.restore();
    document.getElementById('timer').innerHTML = "15";
    document.getElementById('category').innerHTML = "Your Category is: " + text;

    counter = 15;
    tt=setInterval(function(){startTime()},1000);
}

function easeOut(t, b, c, d) {
    var ts = (t /= d) * t;
    var tc = ts * t;
    return b + c * (tc + -3 * ts + 3 * t);
}

drawSpinnerWheel();

function startTime() {
  if(counter == 0) {
    clearInterval(tt);

    $("#nospin").attr("id", "spin");
    $("#spin").bind('click', function(e) {
      e.preventDefault();
      spin();
    });

  } else {
    counter--;
  }
  document.getElementById('timer').innerHTML = counter;  
}

$("#spin").bind('click', function(e) {
    e.preventDefault();
    spin();
});

要查看实际效果，请单击 here

Answer 1

似乎所有更改都应该在函数 stopRotateWheel() 和 startTime()

中进行

调用函数时，名为 text 的变量保存结果(“地理”或“科学”等)。

由此，我们可以根据text的值执行条件并确定倒计时的总时间，以及倒计时到期时的链接。

类似这样的事情:

function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
wheel.save();
wheel.font = '30px "Homestead-Inline", Helvetica, Arial';
var text = prize_descriptions[index];
//wheel.fillText(text, 250 - wheel.measureText(text).width / 2, 250 + 10);
wheel.restore();
document.getElementById('timer').innerHTML = "15";
document.getElementById('category').innerHTML = "Your Category is: " + text;

/*do an if else*/
if(text=="Geography")
{
counter = 5;
tt=setInterval(function(){startTime("www.geography.com")},1000);
/*countdown, and when timer expires... go to another link*/

}
else if (text=="Science")
{
  //do the same as above :)
}
}

注意到代码startTime("www.geography.com")了吗？这是因为我们还修改了函数 startTime 以接受参数(在本例中为网站)，以便当倒计时完成时，网页会转到该链接:)

   function startTime(gotoLink) {
  if(counter == 0) {

    /*go to that link */
    window.location.replace(gotoLink)


  } else {
    counter--;
  }
  document.getElementById('timer').innerHTML = counter;  
  }

试试吧!