个人中心
gpt4 book ai didi

javascript - 即时创建关键帧，无法消除逗号

转载 作者：太空宇宙 更新时间：2023-11-04 12:56:06 24 4
gpt4 key购买 nike

对于初学者来说，我知道这是一段难看的代码。我对其进行了重构，以便只显示必需品。

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

我遇到的问题是，当我构建关键帧规则并从数组中插入元素时，它们以逗号分隔。我试过 .replace(", ", "") 但没有成功。

有没有办法消除这些逗号，以便我的规则格式正确？如果只选中一个框，关键帧就可以工作，但如果超过一个框，我就得不到想要的结果。给我带来问题的数组是笔中第 51 行的 keyframeRules。

stupidcommas

此外，这只是我的第二篇帖子，如果我在代码片段中没有遵循适当的礼节，我们深表歉意。

http://codepen.io/JoeyCinAZ/pen/shgca 

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);
}

最佳答案

逗号来自 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}';

关于javascript - 即时创建关键帧，无法消除逗号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25818294/

24 4 0
文章推荐： c++ - `stream.async_read_some(null_buffers,handler)` 是否应该立即完成？
文章推荐： c++ - 当有许多函数要导入时替代 `LoadPackagedLibrary`
文章推荐： linux - 为 nodejs 运行 cron 并删除临时文件
文章推荐： c++ - 创建一个 n 乘 n 的网格，其中每个元素都是一个指向对象的指针
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com