簡體   English   中英

javascript功能在Chrome中不起作用

[英]javascript function didn't work in chrome

我有此功能,女巫在回發時向用戶顯示了一個加載面板。 它在IE和Firefox中運行良好。

但是Chrome向我顯示了此錯誤: Chrome錯誤

我不明白為什么。 有人有主意嗎? 我的意思是為什么它可以在IE和Firefox中使用。 在Chrome中無法使用的區別是什么?

    (function(){

    var emptyFn = function(){};

    function lp(d) {

        this.converter = d.converter;

        this.data = d.path || d.data;
        this.imageData = [];

        this.multiplier = d.multiplier || 1;
        this.padding = d.padding || 0;

        this.fps = d.fps || 25;

        this.stepsPerFrame = ~~d.stepsPerFrame || 1;
        this.trailLength = d.trailLength || 1;
        this.pointDistance = d.pointDistance || .05;

        this.domClass = d.domClass || 'lp';

        this.backgroundColor = d.backgroundColor || 'rgba(0,0,0,0)';
        this.fillColor = d.fillColor;
        this.strokeColor = d.strokeColor;

        this.stepMethod = typeof d.step == 'string' ?
            stepMethods[d.step] :
            d.step || stepMethods.square;

        this._setup = d.setup || emptyFn;
        this._teardown = d.teardown || emptyFn;
        this._preStep = d.preStep || emptyFn;

        this.width = d.width;
        this.height = d.height;

        this.fullWidth = this.width + 2*this.padding;
        this.fullHeight = this.height + 2*this.padding;

        this.domClass = d.domClass || 'lp';

        this.setup();

    }

    var argTypes = lp.argTypes = {
        DIM: 1,
        DEGREE: 2,
        RADIUS: 3,
        OTHER: 0
    };

    var argSignatures = lp.argSignatures = {
        arc: [1, 1, 3, 2, 2, 0],
        bezier: [1, 1, 1, 1, 1, 1, 1, 1],
        line: [1,1,1,1]
    };

    var pathMethods = lp.pathMethods = {
        bezier: function(t, p0x, p0y, p1x, p1y, c0x, c0y, c1x, c1y) {

            t = 1-t;

            var i = 1-t,
                x = t*t,
                y = i*i,
                a = x*t,
                b = 3 * x * i,
                c = 3 * t * y,
                d = y * i;

            return [
                a * p0x + b * c0x + c * c1x + d * p1x,
                a * p0y + b * c0y + c * c1y + d * p1y
            ]

        },
        arc: function(t, cx, cy, radius, start, end) {

            var point = (end - start) * t + start;

            var ret = [
                (Math.cos(point) * radius) + cx,
                (Math.sin(point) * radius) + cy
            ];

            ret.angle = point;
            ret.t = t;

            return ret;

        },
        line: function(t, sx, sy, ex, ey) {
            return [
                (ex - sx) * t + sx,
                (ey - sy) * t + sy
            ]
        }
    };

    var stepMethods = lp.stepMethods = {

        square: function(point, i, f, color, alpha) {
            this._.fillRect(point.x - 3, point.y - 3, 6, 6);
        },

        fader: function(point, i, f, color, alpha) {

            this._.beginPath();

            if (this._last) {
                this._.moveTo(this._last.x, this._last.y);
            }

            this._.lineTo(point.x, point.y);
            this._.closePath();
            this._.stroke();

            this._last = point;

        }

    }

    lp.prototype = {
        setup: function() {

            var args,
                type,
                method,
                value,
                data = this.data;

            this.canvas = document.createElement('canvas');
            this._ = this.canvas.getContext('2d');

            this.canvas.className = this.domClass;

            this.canvas.height = this.fullHeight;
            this.canvas.width = this.fullWidth;

            this.canvas.innerHTML = "<img src='../img/ContentLoad.gif' width='60px' height='60px' alt='Wird geladen' style='margin-top: 30px;' />"

            this.points = [];

            for (var i = -1, l = data.length; ++i < l;) {

                args = data[i].slice(1);
                method = data[i][0];

                if (method in argSignatures) for (var a = -1, al = args.length; ++a < al;) {

                    type = argSignatures[method][a];
                    value = args[a];

                    switch (type) {
                        case argTypes.RADIUS:
                            value *= this.multiplier;
                            break;
                        case argTypes.DIM:
                            value *= this.multiplier;
                            value += this.padding;
                            break;
                        case argTypes.DEGREE:
                            value *= Math.PI/180;
                            break;
                    };

                    args[a] = value;

                }

                args.unshift(0);

                for (var r, pd = this.pointDistance, t = pd; t <= 1; t += pd) {

                    t = Math.round(t*1/pd) / (1/pd);

                    args[0] = t;

                    r = pathMethods[method].apply(null, args);

                    this.points.push({
                        x: r[0],
                        y: r[1],
                        progress: t
                    });

                }

            }

            this.frame = 0;

            if (this.converter && this.converter.setup) {
                this.converter.setup(this);
            }

        },

        prep: function(frame) {

            if (frame in this.imageData) {
                return;
            }

            this._.clearRect(0, 0, this.fullWidth, this.fullHeight);
            this._.fillStyle = this.backgroundColor;
            this._.fillRect(0, 0, this.fullWidth, this.fullHeight);

            var points = this.points,
                pointsLength = points.length,
                pd = this.pointDistance,
                point,
                index,
                frameD;

            this._setup();

            for (var i = -1, l = pointsLength*this.trailLength; ++i < l && !this.stopped;) {

                index = frame + i;

                point = points[index] || points[index - pointsLength];

                if (!point) continue;

                this.alpha = Math.round(1000*(i/(l-1)))/1000;

                this._.globalAlpha = this.alpha;

                if (this.fillColor) {
                    this._.fillStyle = this.fillColor;
                }
                if (this.strokeColor) {
                    this._.strokeStyle = this.strokeColor;
                }

                frameD = frame/(this.points.length-1);
                indexD = i/(l-1);

                this._preStep(point, indexD, frameD);
                this.stepMethod(point, indexD, frameD);

            } 

            this._teardown();

            this.imageData[frame] = (
                this._.getImageData(0, 0, this.fullWidth, this.fullWidth)
            );

            return true;

        },

        draw: function() {

            if (!this.prep(this.frame)) {

                this._.clearRect(0, 0, this.fullWidth, this.fullWidth);

                this._.putImageData(
                    this.imageData[this.frame],
                    0, 0
                );

            }

            if (this.converter && this.converter.step) {
                this.converter.step(this);
            }

            if (!this.iterateFrame()) {
                if (this.converter && this.converter.teardown) {
                    this.converter.teardown(this);
                    this.converter = null;
                }
            }

        },

        iterateFrame: function() {

            this.frame += this.stepsPerFrame;

            if (this.frame >= this.points.length) {
                this.frame = 0;
                return false;
            }

            return true;

        },

        play: function() {

            this.stopped = false;

            var hoc = this;

            this.timer = setInterval(function(){
                hoc.draw();
            }, 1000 / this.fps);

        },
        stop: function() {

            this.stopped = true;
            this.timer && clearInterval(this.timer);

        }
    };

    window.lp = lp;

}());

function ContentLoader(e) {

    function isIE () {
      var myNav = navigator.userAgent.toLowerCase();
      return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
    }

    if (isIE () == 8) {
        var div = document.createElement('div');
        var img = document.createElement('img'); 
        img.src = '../img/ContentLoad.gif'; 

        div.innerHTML = "<b style='color: #1d4377; z-index: 5000;'>Ihre Anfrage wird bearbeitet...</b><br /><i>...einen Moment bitte...</i><br />";
        div.style.cssText = 'position: fixed; z-index: 6000; width: 100%; padding-top: 20%; left: 0; top: 0; height: 100%; text-align: center; background: #fff; filter: alpha(opacity=70);';
        div.appendChild(img);
        img.style.cssText = 'margin-top:20px;'
        document.body.appendChild(div);
    } else {
        var div = document.createElement('div');
        var circle = new lp({

            width: 60,
            height: 60,
            padding: 50,

            strokeColor: '#1d4377',

            pointDistance: .01,
            stepsPerFrame: 4,
            trailLength: .8,

            step: 'fader',

            setup: function () {
                this._.lineWidth = 5;
            },

            path: [
                ['arc', 25, 25, 25, 0, 360]
            ]

        });

        circle.play();

        div.innerHTML = "<b style='color: #1d4377; z-index: 5000;'>Ihre Anfrage wird bearbeitet...</b><br /><i>...einen Moment bitte...</i><br />";
        div.style.cssText = 'position: fixed; z-index: 6000; width: 100%; padding-top: 20%; left: 0; top: 0; height: 100%; text-align: center; background: #fff; opacity: 0.7;';
        div.appendChild(circle.canvas);
        document.body.appendChild(div);
        }
}

編輯:我這樣稱呼它:

<form id="frmTilgungsaussetzungErgebnis" runat="server" enctype="multipart/form-data" onsubmit="ContentLoader();">

您的函數lp未在else范圍內定義。

嘗試

var circle = new this.lp({

安裝

var circle = new lp({

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM