Javascript 如何让抽绳在Internet Explorer中工作？

我有一个函数，可以在div（改编自）内画一条线，用于电子学习模块（解释代码的奇怪部分）。

我的问题是它在IE11中似乎不起作用

下面是代码：

var player = GetPlayer();
var progress = player.GetVar("score");
var h = 600; //the height of your slide, as set in Story Size
var w = 1000; //the width of your slide, as set in Story Size
var t = 4; //the desired thickness of the progress bar in px, as based on the size of the styry slide
var c = "#00cc3399"; //the desired color of the progress bar, in hex. The last 2 digits are opacity. See codes below:
var startY = 40; //the desired start coordinate, from the top of the page
var startX = 0; //the desired start coordinate, from the left side of the page. Set to "0" as standard


var aspectRatio = h/w;
var totalW = $('.slide-container').width(); //get the actual width of the slide. only relevant if storyline is set to "Scale to fill browser window"
var totalH = totalW*aspectRatio; //calculate the actual height of the slide. only relevant if storyline is set to "Scale to fill browser window"
console.log("totalW: " + totalW); 
var wFactor = totalW/w; //used to calculate the x-position on the slide. only relevant if storyline is set to "Scale to fill browser window"
var hFactor = totalH/h //used to calculate the y-position on the slide. only relevant if storyline is set to "Scale to fill browser window"

var endPointX = totalW*progress/100; //calculate the length of the progress bar
var endPointY = startY*hFactor; //calculate y-position, based on where you want it to be on the slide. The number is the position on the slide, as seen from the top. This is based on a horizontal progress bar
console.log("endPointX: " + endPointX + ", endPointY: " + endPointY)
x1 = startX, y1 = startY, //Start of the bar
x2 = endPointX, y2 = endPointY; //end of the bar

drawline(x1, y1, x2, y2);

//all the technical stuff:
function drawline(ax, ay, bx, by) {
    console.log('ax: ' + ax);
    console.log('ay: ' + ay);
    console.log('bx: ' + bx);
    console.log('by: ' + by);


    if (ax > bx) {
        bx = ax + bx;
        ax = bx - ax;
        bx = bx - ax;
        by = ay + by;
        ay = by - ay;
        by = by - ay;
    }
    console.log('by: ' + by);

    var angle = Math.atan((ay - by) / (bx - ax));

    angle = (angle * 180 / Math.PI);
    angle = -angle;
    var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
    console.log('length: ' + length);

    var style = ""
    style += "left:" + (ax) + "px;"
    style += "top:" + (ay) + "px;"
    style += "width:" + length + "px;"
    style += "height:"+t*hFactor+"px;" //set the thickness of the progress bar
     style += "background-color:"+c+";"
     style += "position:absolute;"
     style += "transform:rotate(" + angle + "deg);"
     style += "-ms-transform:rotate(" + angle + "deg);"
     style += "transform-origin:0% 0%;"
     style += "-moz-transform:rotate(" + angle + "deg);"
     style += "-moz-transform-origin:0% 0%;"
     style += "-webkit-transform:rotate(" + angle + "deg);"
     style += "-webkit-transform-origin:0% 0%;"
     style += "-o-transform:rotate(" + angle + "deg);"
     style += "-o-transform-origin:0% 0%;"
     style += "z-index:99;"
     $("<div id='progressBar' style='" + style + "'></div>").appendTo('.slide-container');
 };

var player=GetPlayer（）；
var progress=player.GetVar（“分数”）；
var h=600//幻灯片的高度，按故事大小设置
var w=1000//幻灯片的宽度，按故事大小设置
var t=4//进度条的所需厚度，以px为单位，基于styry滑块的大小
变量c=“#00cc3399”//进度条所需的颜色，十六进制。最后两个数字是不透明度。见以下代码：
var-startY=40//所需的起始坐标，从页面顶部开始
var startX=0//所需的起始坐标，从页面左侧开始。设置为“0”作为标准
var aspectRatio=h/w；
var totalW=$（'.slide container'）.width（）//获取幻灯片的实际宽度。仅当故事情节设置为“缩放以填充浏览器窗口”时相关
var totalH=totalW*aspectRatio//计算滑块的实际高度。仅当故事情节设置为“缩放以填充浏览器窗口”时相关
console.log（“totalW:+totalW”）；
var wFactor=总w/w//用于计算滑块上的x位置。仅当故事情节设置为“缩放以填充浏览器窗口”时相关
var hFactor=totalH/h//用于计算滑块上的y位置。仅当故事情节设置为“缩放以填充浏览器窗口”时相关
var endPointX=总w*进度/100//计算进度条的长度
var endPointY=startY*hFactor//根据您希望y位置在幻灯片上的位置计算y位置。从顶部看，编号是幻灯片上的位置。这是基于水平进度条的
log（“endPointX:+endPointX+”，endPointY:+endPointY）
x1=startX，y1=startY，//棒的起点
x2=端点X，y2=端点Y//酒吧的尽头
抽绳（x1、y1、x2、y2）；
//所有技术人员：
功能抽绳（ax、ay、bx、by）{
console.log（'ax:'+ax）；
console.log（'ay:'+ay）；
console.log（'bx:'+bx）；
console.log（'by:'+by）；
如果（ax>bx）{
bx=ax+bx；
ax=bx-ax；
bx=bx-ax；
by=ay+by；
ay=by-ay；
by=by-ay；
}
console.log（'by:'+by）；
var angle=Math.atan（（ay-by）/（bx-ax））；
角度=（角度*180/数学π）；
角度=-角度；
变量长度=数学sqrt（（ax-bx）*（ax-bx）+（ay-by）*（ay-by））；
console.log（'长度：'+长度）；
var style=“”
样式+=“左：”+（ax）+“px；”
样式+=“顶部：”+（ay）+“px；”
样式+=“宽度：”+长度+“像素
style+=“height:+t*hFactor+”px；“//设置进度条的厚度
样式+=“背景色：+c+；”
样式+=“位置：绝对；”
样式+=“变换：旋转（“+角度+”度）；”
样式+=“-ms变换：旋转（“+角度+”度）；”
样式+=“变换原点：0%0%；”
样式+=“-moz变换：旋转（“+角度+”度）；”
style+=“-moz变换原点：0%0%；”
样式+=“-webkit变换：旋转（“+角度+”度）；”
样式+=“-webkit变换原点：0%0%；”
样式+=“-o变换：旋转（“+角度+”度）；”
样式+=“-o-变换-原点：0%0%；”
样式+=“z索引：99；”
$（“”）.appendTo（'.slide容器'）；
};

---

在chrome中，此函数根据用户的分数绘制一条线。在IE中什么也没发生。

我自己找到了解决方案。原来IE将8位十六进制值重新定义为RGBa，并将其变为白色。用对应的RGBa值替换8位十六进制值使其工作。

我建议，如果解决了您的问题，您可以将答案标记为解决方案，这将有助于遇到相同问题的人。