Javascript onLoad函数

Question

我想使用一个在页面加载后在页面上按顺序打印字符串的函数。像这样：

“W，E，L，C，O，M，E，T，O，M，Y，P，A，G，E”

我可以找到指南的任何建议吗？

提前致谢！

Answer 1

尝试使用SetInterval函数.split使用space的字符串将数组应用于具有时间延迟的setInterval

var a = "WELCOMETOMYPAGE";

window.onload = function() {
var arr = a.split('');
var i = 0;
var timer = setInterval(function() {
  
  if (arr.length > i) {
    document.body.innerHTML += '<span>' + a[i] + ',</span>';
  }
  i++;
}, 500);
}

span {
  transition: all 0.5s ease;
}

Answer 2

您可以通过巧妙地使用setInterval

来实现这一目标

var welcome = "Welcome to my page";
var index = 1;
var interval = setInterval(function(){
    if(index <= welcome.length) {
        console.log(welcome.substr(0,index))
        index++;    
    } else {
        clearInterval(interval);
    }
}, 500);

但当然不是使用console.log来更新您的页面元素。我正在使用console.log，以便您可以快速测试此代码。

所以替代：

console.log(welcome.substr(0,index))

使用：

document.getElementById("element_id").textContent=welcome.substr(0,index)

或者你可以使用像Greensock这样的库，它非常擅长测序。实际上，它们甚至具有完全相同的功能： https://greensock.com/

更新：

当然所有这些都必须在一个窗口onload函数中，以确保它在页面加载后执行：

window.onload = function() {
    var welcome = "Welcome to my page";
    var index = 1;
    var interval = setInterval(function(){
        if(index <= welcome.length) {
            document.getElementById("element_id").textContent=welcome.substr(0,index)
            index++;    
        } else {
            clearInterval(interval);
        }
    }, 500);
}

内容：

研究

1. 如何在页面加载后执行javascript代码
2. 如何在javascript中使用setInterval
3. 如何使用javascript更新dom元素（同时学习jquery）