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

我找到了这个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();
});

var colors=[“ffff00”、“1be11b”、“0000ff”、“7e7e7e”、“8a2be2”、“006400”、“2980B9”、“E74C3C”]；
//需要先预加载此数据
var prize_descriptions=[“一般”、“地理”、“历史”、“艺术”、“科学”、“体育”、“宗教”、“媒体”]；
var当前用户状态={}；
var-startAngle=0；
var arc=Math.PI/4；
var spinTimeout=null；
var spinArcStart=10；
var spinTime=0；
var spinTimeTotal=0；
var当前用户状态=空；
var spin_results=null；
var轮；
var计数器，tt；
函数drawSpinnerWheel（）{
var canvas=document.getElementById（“canvas”）；
if（canvas.getContext）{
var=200；
var textRadius=160；
var insideRadius=125；
wheel=canvas.getContext（“2d”）；
车轮.clearRect（0,0,500,500）；
wheel.strokeStyle=“#ecf0f1”；
轮。线宽=5；
wheel.font='12px Helvetica，Arial'；
对于（变量i=0；i<8；i++）{
var角度=星形缠结+i*弧；
wheel.fillStyle=颜色[i]；
wheel.beginPath（）；
车轮弧度（250，250，半径，角度，角度+弧度，假）；
车轮圆弧（250，250，内半径，角度+圆弧，角度，真）；
车轮行程（）；
轮。填充（）；
wheel.save（）；
wheel.shadowOffsetX=-1；
wheel.shadowOffsetY=-1；
wheel.shadowBlur=0；
wheel.shadowColor=“rgb（220220）”；
wheel.fillStyle=“#ecf0f1”；
车轮平移（250+数学cos（角度+圆弧/2）*文本半径，250+数学sin（角度+圆弧/2）*文本半径）；
旋转（角度+圆弧/2+数学PI/2）；
var text=奖品描述[i]；
如果（text==未定义）text=“这次不是！”；
wheel.fillText（文本，-wheel.measureText（文本）.width/2，0）；
轮子。还原（）；
}
//箭
wheel.fillStyle=“#ecf0f1”；
wheel.beginPath（）；
轮子。移动到（250-4250-（半径+5））；
轮线（250+4250-（半径+5））；
轮距（250+4250-（半径-5））；
轮线（250+9250-（半径-5））；
轮线（250+0250-（半径-13））；
轮线（250-9250-（Adius-5））；
轮.线托（250-4250-（Adius-5））；
轮距（250-4250-（半径+5））；
轮。填充（）；
}
}
函数自旋（）{
$（“#旋转”）。解除绑定（“单击”）；
$（“#spin”）.attr（“id”，“nospin”）；
document.getElementById（'timer'）.innerHTML=“”；
document.getElementById（'category'）.innerHTML=“”；
spinMovement=Math.floor（Math.random（）*20）+prize_descriptions.length*2；
SpingleStart=1*10+旋转运动；
自旋时间=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（）{
自旋时间+=30；
如果（自旋时间>=自旋时间总计）{
停止旋转车轮（）；
返回；
}
var spinAngle=spinAngleStart-easeOut（自旋时间，0，spinAngleStart，SpinangleTotal）；
startAngle+=（spinAngle*Math.PI/180）；
牵引喷丝头轮（）；
spinTimeout=setTimeout（'rotateWheel（）'，30）；
}
功能停止旋转轮（）{
clearTimeout（spinTimeout）；
变量度=startAngle*180/Math.PI+90；
var arcd=arc*180/Math.PI；
var指数=数学地板（（360度/360度）/arcd）；
wheel.save（）；
wheel.font='30px“宅地内联”，Helvetica，Arial'；
var text=奖品描述[索引]；
//wheel.fillText（文本，250-wheel.measureText（文本）。宽度/2250+10）；
轮子。还原（）；
document.getElementById（'timer'）.innerHTML=“15”；
document.getElementById（'category'）.innerHTML=“您的类别是：”+text；
计数器=15；
tt=setInterval（函数（）{startTime（）}，1000）；
}
功能输出（t、b、c、d）{
变量ts=（t/=d）*t；
var tc=ts*t；
返回b+c*（tc+-3*ts+3*t）；
}
牵引喷丝头轮（）；
函数startTime（）{
如果（计数器==0）{
净间隔（tt）；
$（“nospin”）.attr（“id”，“spin”）；
$（“#旋转”）.bind（'click'，函数（e）{
e、 预防默认值（）；
自旋（）；
});
}否则{
计数器--；
}
document.getElementById（'timer'）。innerHTML=计数器；
}
$（“#旋转”）.bind（'click'，函数（e）{
e、 预防默认值（）；
自旋（）；
});

---

要查看它的运行情况，请单击似乎所有更改都应该在函数

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

，以接受一个参数（在本例中为网站），以便在倒计时结束时，网页转到该链接：）

---

试试看

代码笔可能会阻止window.location.replace du在帧中穿过原点。但是，在页面中应该可以正常工作。您可以使用

window.location.href=“link”

作为函数startTime（gotoLink）和其他功能的起点？它是否应该取代当前的开始时间。或者说是sepa

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

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


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