Question

曾经尝试添加打字机效果，它在Codepen上效果很好，但在WP中效果不佳。我试图直接将代码添加到主题文件夹中，并将其作为.js文件加载，我可以在页面源代码中看到它已加载，但是效果没有执行。

我已经在控制台中签到了，没有任何错误，最初我收到了“ Uncaught TypeError：Cannot read property'innerHTML'”，因此我将其移至页脚。

这是我的代码：

HTML

<div>
  <span id="container">Testing </span> <span id="text"></span><div id="cursor"></div>
</div>

CSS

#container {
    display: inline;
    vertical-align: middle;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 500!important;
    font-size: 45px!important;
    color: #000000!important;
    text-align: left!important;
    line-height: 1.5em;
}

#text {
    display: inline;
    vertical-align: middle;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 500!important;
    font-size: 45px!important;
    color: #000000!important;
    text-align: left!important; 
    height: 70px;
    line-height: 1.5em;

}

#cursor {
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 50px;
    background-color: #000000;
    animation: blink .75s step-end infinite;
}

@keyframes blink {
    from, to { 
        background-color: transparent 
    }
    50% { 
        background-color: #000000; 
    }
}

JS

// List of sentences
var _CONTENT = [ 
    "This", 
    "That", 
    "These", 
    "Those"
];

// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Cursor element 
var _CURSOR = document.querySelector("#cursor");

// Implements typing effect
function Type() { 
    // Get substring with 1 characater added
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;

    // If full sentence has been displayed then start to delete the sentence after some time
    if(text === _CONTENT[_PART]) {
        // Hide the cursor
        _CURSOR.style.display = 'none';

        clearInterval(_INTERVAL_VAL);
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Delete, 50);
        }, 1000);
    }
}

// Implements deleting effect
function Delete() {
    // Get substring with 1 characater deleted
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;

    // If sentence has been deleted then start to display the next sentence
    if(text === '') {
        clearInterval(_INTERVAL_VAL);

        // If current sentence was last then display the first one, else move to the next
        if(_PART == (_CONTENT.length - 1))
            _PART = 0;
        else
            _PART++;

        _PART_INDEX = 0;

        // Start to display the next sentence after some time
        setTimeout(function() {
            _CURSOR.style.display = 'inline-block';
            _INTERVAL_VAL = setInterval(Type, 100);
        }, 200);
    }
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);

JS脚本适用于Codepen，但不适用于WordPress

0 个答案: