Question

首先，我知道这有些丑陋的代码。我已经对它进行了重构，以便只显示必需品。

我正在尝试根据输入动态创建一个@ -webkit-keyframe，创建一个类然后分配该类，以便一个对象循环选择所选的颜色。

我遇到的问题是，当我构建关键帧规则并从数组中插入元素时，它们用逗号分隔。我试过没有运气的.replace（“，”，“”）。

有没有办法消除这些逗号，以便我的规则格式正确？如果只检查了一个框，则关键帧有效，但不止于此，我没有得到所需的结果。给我带来问题的数组是笔中第51行的keyframeRules。

stupidcommas

此外，这只是我有史以来的第二篇文章，如果我没有按照代码片段遵循正确的礼仪，那就很抱歉。

function keyframeValues() {
//declare an array to store values of checked boxes in
var colors = [];

//get values of checked boxes
var boxPicker = document.getElementsByName('test');
for(i = 0; i < boxPicker.length; i++) {
    if(boxPicker[i].checked) {
        var color = (boxPicker[i].alt);
        colors.push(color);                    
    }
}

//declare variable to store lenght of the array, and a list of colors to be used
var howMany = colors.length;
var useColors = colors;

var fraction;
    if(howMany === 0) {
        alert('error');
    }
    else if(howMany === 1){
        fraction = (1/howMany) * 100;
    }
    else{
        fraction = (1/howMany).toFixed(2) * 100;
    }

//give each line an incremental percentage
var count = 1;
//declare an array that will store the percentages  for each line in the keyframe
var myPercent = [];
    for( i = 0; i < howMany; i++) {
        var increment = count * fraction;
        var inc = increment;
        myPercent.push(increment);
        count++;
    }
    var usePercentages = myPercent;     
createKeyframe(howMany, usePercentages, useColors )
}
//create a function that takes in parameters to create the keyFrame
function createKeyframe(lineNums, usePercentages, strokecolor) {
    //create a unique name for the keyframe
    var keyframeName = "keyname" + lineNums;

    //create a keyframe that can be used to style the bed appropriately
    var line1 = "@-webkit-keyframes " + keyframeName + "{ \n0% { stroke: white; } \n";

    //create an array to store individual rules for the keyframe
    var keyframeRules = [];

    //use a loop to create additional lines to the keyframe
    for(i = 0; i < lineNums; i++) {
        var rule = usePercentages[i] + '% { background-color: ' + strokecolor[i] + '; } \n';
        keyframeRules.push(rule);
    }



//create keyframe
    var useKeyframe = line1 + keyframeRules + '}' +  '\n.' + keyframeName + '{\n-webkit-animation: ' + keyframeName + ' 2000ms ease infinite;\n}';
    var classToAssign = '.' + keyframeName + '{\n-webkit-animation: ' + keyframeName + ' 2000ms ease infinite;\n}';
    //create class variabe for inline assignment
    var dot = classToAssign.indexOf('.');
    var keyframeLength = keyframeName.length + 1;
    var inlineClass = classToAssign.slice(1, keyframeLength);

    //create style element to insert newly created keyframe into
    var newStyle = document.createElement('style');
    newStyle.id = "myStyle";
    //attach new style element to <head> tag
    document.head.appendChild(newStyle);
    var ss = document.getElementById('myStyle');
    ss.textContent = useKeyframe;

    //assign newly created class to element
    var useBed = document.getElementById('bed');
    useBed.setAttribute('class', inlineClass);
}

Answer 1

逗号来自JavaScript的类型转换规则。参见：

> ['a','b','c']+''
'a,b,c'

以下keyframeRules是一个数组：

var useKeyframe = line1 + keyframeRules + '}' +  '\n.' + keyframeName + '{\n-webkit-animation: ' + keyframeName + ' 2000ms ease infinite;\n}';

你应该keyframeRules.join('\n')：

var useKeyframe = line1 + keyframeRules.join('\n') + '}' +  '\n.' + keyframeName + '{\n-webkit-animation: ' + keyframeName + ' 2000ms ease infinite;\n}';

动态创建关键帧，无法消除逗号

1 个答案: