JavaScript - Показать ссылку на основе счетчика

1

Я нашел это 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();
});

Чтобы увидеть это в действии, нажмите здесь.

Теги:

1 ответ

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 функцию startTime чтобы принять параметр (в данном случае, веб-сайт), так что, когда отсчет завершен, веб-страница переходит к этой ссылке :)

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

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


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

попробуйте!

  • 1
    Возможно, CodePen блокирует window.location.replace du для перекрестного происхождения в кадре. Тем не менее, должны нормально работать на странице.
  • 0
    Вы можете использовать window.location.href = "link" а также
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню