[英]Can't get any Javascript file working properly in blazor
relatively new to blazor..相对较新的 blazor..
I have been using MVC, and webforms but made a dive into blazor and .net core...我一直在使用 MVC 和 webforms,但深入研究了 blazor 和 .net 核心......
What a pain it has been so far from start to finish... Anyway my issue...到目前为止,从头到尾真是太痛苦了……不管怎样,我的问题……
I am trying to follow this codepen, typewriter text `https://codepen.io/hckkiu/pen/KKzgEMr`
Very easy to implement anywhere but blazor... So i have my CSS and javascript file loading correctly but the output is never there..除了 blazor 之外的任何地方都非常容易实现...所以我的 CSS 和 javascript 文件正确加载,但 output 永远不会存在..
Can anyone tell me why its not loading / blazor / c#谁能告诉我为什么它没有加载 / blazor / c#
The javascript is blinking but no text continuation. 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 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 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;
}
}
glad to see you are trying out Blazor!很高兴看到您正在试用 Blazor!
The first lesson should be - Don't try to do everything in JavaScript. Take what you want to do and translate it to Blazor. Using JS libraries and components is an advanced topic - start with plain C# Blazor - Blazor University is a good resource.第一课应该是——不要试图在 JavaScript 中做任何事情。把你想做的事情转化为 Blazor。使用 JS 库和组件是一个高级主题——从普通的开始 C# Blazor - Blazor 大学是一个很好的资源.
Here is a working repl: https://blazorrepl.com/repl/GOvEwjOY58lmz0ao15这是一个工作回复:https://blazorrepl.com/repl/GOvEwjOY58lmz0ao15
and the code for that - there is no JavaScript required for this in Blazor.以及它的代码——在 Blazor 中不需要 JavaScript。
Note: in the real world you would make this implement IDisposable and use a cancellation token to cancel the long running Task注意:在现实世界中,您可以将此工具设为 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;
}
}
}
}
You will have to call the javascript after your component/page is rendered, $(document).ready
will not help in this case as the component might be rendered after the page load.在呈现组件/页面后,您必须调用 javascript,
$(document).ready
在这种情况下无济于事,因为组件可能在页面加载后呈现。
See below example to call the javascript that will then do the functionality that you want:请参阅下面的示例来调用 javascript,然后它将执行您想要的功能:
In your component:在您的组件中:
@inject IJSRuntime JSRuntime;
// or
[Inject] protected IJSRuntime JSRuntime { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("startTyping");
}
}
Javascript file: Javascript 档案:
window.startTyping = () => {
typing(0, $('.typewriter-text').data('text'));
// other js code here
}
See here for reference: https://learn.microsoft.com/en-us/as.net/core/blazor/call-javascript-from-do.net?view=as.netcore-3.1参考这里: https://learn.microsoft.com/en-us/as.net/core/blazor/call-javascript-from-do.net?view=as.netcore-3.1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.