Use jQuery to write a ChatGPT typing effect

In recent years, with the continuous development of technology, artificial intelligence (AI) has gradually become a hot topic. Among them, as a large language model, ChatGPT has become increasingly popular in China. Its natural language processing function allows users to communicate more naturally, and it can also be used as a core algorithm in various AI products and services.

AI has been widely used and developed rapidly, from smart home to automatic driving, medical and other fields. For example, researchers at Massachusetts Institute of Technology found a super antibiotic halicin using AI system, demonstrating unprecedented broad-spectrum antibacterial ability computer With the improvement of performance and algorithm, the ability of AI will be further improved.

Although some people worry that AI will have a negative impact on human work, in the process of practical application, we can see that AI has gradually become an important support and technology engine in various fields. Other enterprises have also successively released new AI products, such as Stable Diffusion, which focuses on painting, and generates near real voice Bark (SonoAI) through text input.

AI itself exists as a language model, which can be used with various AI products and services. For example, Sun Yanzi's voice is used to sing "Need someone to accompany", Jay Chou's voice is used to sing "Plum Jam", and even can simulate the same voice as his own video Open the live broadcast to incarnate yourself as a secondary character.

When using ChatGPT, I saw the results presented in the form of a typewriter, so I used a small amount of jQuery to write a ChatGPT typing effect.

The specific codes are as follows:

HTML：

 <div class="textbox"><span id="content"></span><span id="cursor"></span></div>

CSS：

 .textbox { width:750px; margin:100px auto; padding:20px 30px; font-size:16px; color:#333; white-space:pre-wrap; line-height:30px; border:2px solid #e8e8e8; box-sizing:border-box; background:#f8f8f8; } #cursor { width:0.2em; height:17px; margin:7px 0 0 0.1em; background-color:#000; display:inline-block; vertical-align:top; animation:blink 0.8s infinite; } @keyframes blink {     from, to { opacity:1; }     50% { opacity:0; } }

JQuery (introducing jQuery library):

 $(function() { Var text="On the night of October 12, the sixth year of Yuanfeng, when he was ready to undress and enter the house in the moonlight, he set off happily. Those who thought of nothing and were happy went to Chengtian Temple to find Zhang Huaimin. Huaimin also did not sleep, and walked with each other in the atrium. The courtyard was like clear water, algae in the water, not cross, and covered with bamboo and cypress shadows. What night was without moon? Where was there no bamboo and cypress? But few idle people were like the ears of the two of us. \N -- "Notes on Night Tour of Chengtian Temple" by Su Shi of Song Dynasty;//The text to be printed     var delay = 50; //Typing speed, in milliseconds     printText(text, delay); }); function printText(text, delay){     var chars = text.split("");     var i = 0;     var intervalId = setInterval(function(){         if(i < chars.length){             var newText = $('#content').text() + chars[i];             $('#content').text(newText);             i++;         }else{             clearInterval(intervalId);             $('#cursor').remove(); //Remove the cursor at the end of the text at the end of the content display. If you leave the cursor, delete or use//to comment on this line         }     }, delay); }

The effect is as follows: