javascript - 无法让任何 Javascript 文件在 Blazor 中正常工作

Question

对 blazor 来说相对较新..

我一直在使用 MVC 和 webforms，但深入研究了 blazor 和 .net core...

到目前为止，从头到尾都是多么痛苦……不管怎样，我的问题……

I am trying to follow this codepen, typewriter text `https://codepen.io/hckkiu/pen/KKzgEMr`

除了 blazor 之外，在任何地方都非常容易实现...所以我可以正确加载我的 CSS 和 javascript 文件，但输出永远不会存在...

谁能告诉我为什么它没有加载/blazor/c#

javascript 正在闪烁，但没有文本继续。

<div class='containers'>
    <div class="bodys">
        <p class='typewriter'>
            I'm a
            <span class='typewriter-text' data-text='[ "photographer. ", "designer. ", "developer. " ]'></span>
        </p>
    </div>
</div>

Javascript

$(document).ready(function () {

    typing(0, $('.typewriter-text').data('text'));

    function typing(index, text) {

        var textIndex = 1;

        var tmp = setInterval(function () {
            if (textIndex < text[index].length + 1) {
                $('.typewriter-text').text(text[index].substr(0, textIndex));
                textIndex++;
            } else {
                setTimeout(function () { deleting(index, text) }, 2000);
                clearInterval(tmp);
            }

        }, 150);

    }

    function deleting(index, text) {

        var textIndex = text[index].length;

        var tmp = setInterval(function () {

            if (textIndex + 1 > 0) {
                $('.typewriter-text').text(text[index].substr(0, textIndex));
                textIndex--;
            } else {
                index++;
                if (index == text.length) { index = 0; }
                typing(index, text);
                clearInterval(tmp);
            }

        }, 150)

    }

});

CSS

bodys {
    width: 100%;
    height: 100%;
    background-color: #3a3a3a;
}

.containers {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.typewriter {
    font-family: sans-serif;
    color: black;
    padding-left: 30px;
    display: block;
}

.typewriter-text {
    padding-right: 10px;
    color: red;
    border-right: solid #ffe509 7px;
    text-transform: uppercase;
    animation: cursor 1s ease-in-out infinite;
    font-weight: bold;
}

@keyframes cursor {
    from {
        border-color: #ffe509;
    }

    to {
        border-color: transparent;
    }
}

@media (max-width: 767.98px) {
    .typewriter {
        font-size: 35px;
    }
}

@media (min-width: 768px) {
    .typewriter {
        font-size: 60px;
    }
}

Answer 1

很高兴看到您正在试用 Blazor!

第一课应该是——不要试图用 JavaScript 做所有事情。把你想做的事情翻译成 Blazor。使用 JS 库和组件是一个高级主题 - 从纯 C# Blazor 开始 - Blazor University是一个很好的资源。

这是一个工作回复:https://blazorrepl.com/repl/GOvEwjOY58lmz0ao15

及其代码 - 在 Blazor 中不需要 JavaScript。

注意:在现实世界中，您可以将此实现设为 IDisposable 并使用取消标记来取消长时间运行的任务

    <div class='container'>
      <p class='typewriter'>I'm a 
      <span class='typewriter-text'>@typewriterText</span>
      </p>
    </div>

    @code {
        string[] jobs = { "photographer. ", "designer. ", "developer. " };
        string typewriterText;
        Task worker;
        protected override void OnInitialized()
        {
            worker = Typewriter();
        }
        async Task Typewriter()
        {
            var index = 0;
            while(true)
            {
                var textIndex = 1;
    
                while( textIndex < jobs[ index ].Length + 1 ) 
                {
                  typewriterText = jobs[ index ].Substring( 0, textIndex );
                  textIndex++;
                  StateHasChanged();
                  await Task.Delay(150);
                };
                
                StateHasChanged();
                await Task.Delay(2000);
                
                textIndex = jobs[ index ].Length;
                
                while ( textIndex + 1 > 0 ) 
                {
                    typewriterText = jobs[ index ].Substring( 0, textIndex );
                    textIndex--;
                    StateHasChanged();
                    await Task.Delay(150);
                };
    
                index++;
                if ( index == jobs.Length ) 
                { 
                    index = 0; 
                }
            }
        }
    }