模仿终端打字效果

青旅半醒 2022-05-04 06:00 185阅读 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 条评论，185人围观）

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

相关阅读

相关 css 动画打字效果

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

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

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

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

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

相关计算机打字测试,打字测试

但是该打字教程是放置于搜狗互联网页面的，也就是说必须连接互联网才能查看。对于不能连接互联网的网友来说，就错过了这么一个好学习的机会了 ![67a59ec9caac7eeaf0

蔚落/ 2022年09月01日 03:02/ 0 赞/ 158 阅读

相关 cocos2dx3.6实现打字效果

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

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

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

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

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

相关原生js模仿京东图片放大镜效果

实现放大镜效果，是需要两张图片，记得两张图片的比例要保持一致哦嗯，挺简单的，所以直接上代码喽，有不懂的可以评论区留言哦 <!DOCTYPE html> <

本是古典何须时尚/ 2022年05月29日 12:21/ 0 赞/ 239 阅读

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

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

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

相关模仿终端打字效果

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

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

相关小程序模仿toast效果

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

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

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

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

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