的JavaScript - 基於微調

Question

顯示的鏈接，我發現這個js微調，我喜歡它如何在最後的計數器。它從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; 
    } 

嘗試一下！