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

Question

相对较新的 blazor..

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

从头到尾一直很痛苦......无论如何我的问题......

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

标签： javascriptc#blazor

Answer 1

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

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

这是一个有效的repl：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; 
                }
            }
        }
    }