模仿终端打字效果

青旅半醒 2022-05-04 06:00 232阅读 0赞

*  模仿终端打字效果  
    …

<script type="text/javascript"> 
    var charIndex = -1;
    var stringLength = 0;
    var inputText;
    function writeContent(init){
        if(init){
            inputText = "Waiting...<br> Connecting To OmegaXYZ.com...<br>Connection Established.<br>Copyright (c) 2018 OmegaXYZ.com All Rights Reserved.<br>[root@host~] Login : xyjigsaw<br>[root@host~] password : ******<br>[root@host~] Access Is Granted！<br>//欢迎访问OmegaXYZ.com<br>[root@host~] Attention:请查找时简化关键字~";
        }
        if(charIndex==-1){
            charIndex = 0;
            stringLength = inputText.length;
        }
        var initString = document.getElementById('myContent').innerHTML;
        initString = initString.replace(/<SPAN.*$/gi,"");
    
        var theChar = inputText.charAt(charIndex);
        var nextFourChars = inputText.substr(charIndex,4);
        if(nextFourChars=='<BR>' || nextFourChars=='<br>'){
            theChar  = '<BR>';
            charIndex+=3;
        }
        initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
        document.getElementById('myContent').innerHTML = initString;
    
        charIndex = charIndex+1;
        if(charIndex%2==1){
             document.getElementById('blink').style.display='none';
        }else{
             document.getElementById('blink').style.display='inline';
        }
    
        if(charIndex<=stringLength){
            setTimeout('writeContent(false)',50);
            }else{
                blinkSpan();
            }  
    }
    
    var currentStyle = 'inline';
    function blinkSpan(){
        if(currentStyle=='inline'){
        currentStyle='none';
        }else{
        currentStyle='inline';
        }
        document.getElementById('blink').style.display = currentStyle;
        setTimeout('blinkSpan()',500);
    
    }
    </script>

##  ##

…

发表评论取消回复

表情：

评论列表（有 0 条评论，232人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 自动打字效果的实现

阅读目录最终效果 index.html index.js index.css 最终效果 ![在这里插入图片描述][

拼搏现实的明天。/ 2023年10月07日 20:16/ 0 赞/ 62 阅读

相关 CSS打字效果

![在这里插入图片描述][cda02bac82584257b9e1fb84dbc62c10.gif_pic_center] <!DOCTYPE html> <

偏执的太偏执、/ 2023年10月06日 21:55/ 0 赞/ 62 阅读

相关 css 动画打字效果

本文借鉴 [https://blog.csdn.net/weixin\_39843414/article/details/119792197][https_blog.csdn

女爷i/ 2022年09月11日 11:15/ 0 赞/ 279 阅读

相关 jQuery爱心表白打字动画效果

[下载地址][Link 1]jQuery实现的温馨浪漫爱心表白动画特效，打字效果。 ![1631391547.png][] dd: [Link 1]: https://

今天药忘吃喽~/ 2022年09月11日 03:29/ 0 赞/ 216 阅读

相关 cocos2dx3.6实现打字效果

Label laber = Label::create("", "Terminal", 20); this->addChild(laber); la

不念不忘少年蓝@/ 2022年08月03日 13:45/ 0 赞/ 222 阅读

相关模仿电影院座位预定效果

效果 ![这里写图片描述][SouthEast] Html代码： <html> <head> <title>座位预定</title>

痛定思痛。/ 2022年06月13日 07:49/ 0 赞/ 205 阅读

相关 js模仿打字效果的方法

模仿打字效果： function typing()\{ var divTyping = $('.txt2'); if (i <= mobile.len

蔚落/ 2022年05月29日 01:36/ 0 赞/ 211 阅读

相关模仿终端打字效果

模仿终端打字效果 … <script type="text/javascript"> var charIndex = -1; va

青旅半醒/ 2022年05月04日 06:00/ 0 赞/ 233 阅读

相关小程序模仿toast效果

template建立toast模板  <template name="toast">

蔚落/ 2022年01月06日 19:07/ 0 赞/ 265 阅读

相关利用js模仿360开机效果

利用js模仿360开机效果实现效果：点击关闭图片按钮先往下退出再往右退出。实现步骤： 1、封装运动函数 2、给图片上的关闭设置一个盒子 3、给关闭盒子注册点击事件点击后

灰太狼/ 2020年06月07日 16:02/ 0 赞/ 676 阅读