Apply for a free poison chicken soup API, and use native JS to achieve the typewriter effect of vertical text

This is the 12th day of my participation in the More text Challenge. For details, see more text Challenge

preface

Today is the first day of the Dragon Boat Festival holiday, thinking to add some interesting things to my blog home page, thinking, ready to add a toxic chicken soup in the home page, toxic chicken soup must be random, each refresh will have different sentences, and then through the typewriter effect. In order to consolidate the JS foundation, I decided to do a Demo with native JS first, roll up your sleeves and do it, the effect is as follows.

Poison chicken soup interface

Poison chicken soup sentence thousands of thousands of thousands, I have no condition to make a database and interface out, so of course, it is best to have the most fragrant free ready-made! I searched for a long time, and finally used the Skyline data API interface, not to advertise ha, after all, my small amount of reading has not asked me to advertise ~

First, briefly summarize the open API interface of skyline data:

There are still a lot of interesting functions, can make a lot of interesting things. However, the interface we need to use is not in the open interface above, but the free interface applied after the registration of free members.

After signing up for the free membership, we went directly to the interface book page. As you can see, there are many interesting interfaces to offer:

We can search here for the interface we want, search for “bad chicken soup”, and the results are as follows:

Click in, there are call examples, return parameters and so on, directly apply for:

After the application is completed, this interface can be found in the interface I applied for in data Management:

You can see the free interface of toxic chicken soup is 100 times, but it is enough for me. If it is really not enough, you can also use day beans to offset, how to get specific day beans and so on, I am not quite clear, not to discuss here.

Ok, now that we’ve successfully got the chicken soup interface, let’s implement a vertical typewriter effect!

Vertical typewriter effect

Vertical version of the typewriter, must be the text first stand up (like other nonsense), here I adopt the method of the simple and crude, within this typewriter effect of the box, each column is a p tag, p tag contains span, span tags inside is text, to p label the width of a word, width is not enough, the text will automatically wrap. The basic layout code looks like this:

    <style>
        p {
            float: left;
            width: 1em;
            height: 100%;
            font-size: 14px;
            margin: 5px;
            text-align: left;
        }
    </style>

    <div class="signature">
        <p>
            <span>Try to fill the days</span>
        </p>
        <p>
            <span>Don't remind me how lonely I am</span>
        </p>
    </div>
Copy the code

The effect is as follows:

Now that the CSS effect is complete, let’s look at how the typewriter effect works:

To achieve the effect of a typewriter, we have to consider the following aspects:

• Text should be cut according to punctuation and converted into an array, which can be used with regular expressions.
• The text is shown one by one, so using the substring method of a string is the perfect fit.
• The cursor flicker effect can be realized directly with JQ fadeOut and fadeIn.

So I immediately wrote the following code:

    let text // The printed text
    let arr // An array of text cut according to punctuation
    let i = 0 // The initial array loop is subscripted from 0
    function daziji(i) {
        let ps = $(".signature").children("p") // Gets the number of lines of text in the box
        if (i == ps.length) return false // If there are 0 lines of text, terminate the function directly
        let index = 0 // The number of words in the current line
        let dazi = setInterval(function() {
            ps[i].childNodes[1].innerText = "I" 
            $(ps[i].childNodes[1]).fadeOut(300).fadeIn(300)
            ps[i].childNodes[0].innerText = arr[i].substring(0, index++)
            if (index > arr[i].length) {
                $(ps[i].childNodes[1]).remove()
                clearInterval(dazi)
                daziji(++i)
            }
        }, 400)}Copy the code

Call the chicken soup interface to get the sentence, and then display it on the page, as follows:

    // Call chicken soup via the skyline interface
    function getSoup() {
        $.ajax({
            type: "get".url:
            / / poison chicken soup
            "Https://api.tianapi.com/txapi/dujitang/index?key=" the value of your key.success: function(success) {
                if (success.code == 200) {
                    text = success.newslist[0].content
                    var reg = / [, | |;; |;; | :; | :; |.; |.; |?; |?; |;] /g // The regular section only checks for these punctuation marks
                    arr = text.split(reg)
                    for (var j = 0; j < arr.length; j++) {
                        let pp = "<p><span></span><span></span></p>"
                        $(".signature").append(pp)
                    }
                    daziji(i)
                }
            },
            error: function(error) {
                console.error("Error obtaining data" + error)
                text = The night gave me black eyes, but I used them to look for light
                var reg = / [, | |;; |;; | :; | :; |.; |.; |?; |?; |;] /g
                arr = text.split(reg)
                for (var j = 0; j < arr.length; j++) {
                    let pp = "<p><span></span><span></span></p>"
                    $(".signature").append(pp)
                }
                daziji(i)
            }
        })
    }
Copy the code

Check out the results:

Works perfectly! After all, the code is written by their own hands, especially the Dragon Boat Festival holiday, still tirelessly knock code, so it looks particularly have a sense of achievement!

Afterword.

After all, it was the first day of the holiday, played a day, came back in the evening to achieve this effect immediately sorted out the article to send, more or less will be thoughtless, some code rough and can be optimized, of course, the most important thing is fun. If this article has helped you, I hope to like the ice cube, if you have better ideas are also welcome to comment ~

PS: today is the 12th day for me to participate in the gold digging challenge, the Dragon Boat Festival is still trying hard to look at the article, it has been 12 days! Where there is a will, there is a way. Come on, everybody

The list of more challenging articles is as follows:

• Flex layout container elements and project elements attributes
• 2021.06.02 how to play with CSS Gradient Background
• How to Use SVG to create Text Effects along Arbitrary Paths
• 2021.06.04 “Front-end code specification of 3 categories and 15 subcategories, let the team code be standardized!”
• Git Commit Specification for team management: How many people don’t write commit records?
• 2021.06.06 “How to Control CSS mouse Style and Expand mouse Click area | Weekend study”
• 2021.06.07 “Pure CSS implementation: imitation gold mining account password login, the red panda wu eye action switch small Egg”
• On Prototypes and Prototype Chains in 11 Aspects
• A Closer Look at JavaScript scope and Scope Chains
• What is a closure in JavaScript?
• 2021.06.11 “Cool Video Text Mask effect with pure CSS”