Let the code move

Let the code move

This is a running account that records the birth of Tai Chi with code.

1. prepare tools

  • This code is used VS Code, and then it is usedparcel
  • Parcel is a web application packaging program with a unique developer experience. It uses multi-core processing to provide extremely fast performance and requires zero configuration.
  • Do a little stuff to make sure our service can be started

2. Let the words move

(1) First make a word move

  • document.querySelectorFind this element through the CSS selector
  • innerHTMLThe attribute sets or gets the descendants of the element represented by HTML syntax.

  • The current code is like this. We want to change "1" to "2" after a while. We can use the setTimeout
    code to make a big breakthrough here, and we can make the words move.

(2) Move more words

  • Let "1" become "2" After implementation, try to make "1" a larger number, add an intermediate variable n, remember the current value, and make +1changes

  • setTimeoutIt will only take effect once, so this code just turns "1" into "2" and can be setTimeoutreplaced withsetInterval

  • With the setTimeoutimplementation and setIntervalfunctions of the same
    setTimeoutThe advantage of using it is that it can be stopped at any time
    Heren+1=11 , n=10thatn=11 is, the output would be undefind, replaced by a look at the array (let n as a subscript)

(3) Let a string of words appear

nAdd 1 more, start to modify and debug

Let me judge directlyn+1 just

  • Can you not jump out one by one here, but display the 0-n of the array gradually? It can be usedsubstring
    • substring() The method returns a subset of a string between the start index and the end index, or a subset from the start index to the end of the string.

The last word can t be displayed, then put ifthe+1 delete the one


Then we can display a paragraph here. The next step is to see if our code can be displayed.

3. add style

(1) Add styles to the text

No line break

(2) Line break

1) Try to wrap

  • Using the replace()method to replace HTMLLane
    • replace()The method returns a new string replacementwith some or all matching patterns ( pattern) replaced by the replacement value ( ) . The pattern can be a string or one , and the replacement value can be a string or a callback function that is called every time a match is made.

  • It doesn't seem to take effect, type the string to see

charCodeAtYou can get the character encoding

  • Try each character in turn, and then look at our effect, and find that the first line break takes effect

  • This replacecan only take effect once, and regular expressions are used

  • When I <am moving, I find that every newline will appear one by one , because the characters appear one by one. When it <appears, it cannot be recognized as a newline. When it appears, it bmeans that it is a label, and it will continue to be replaced with a newline.

2) Solve<

Idea: I said before that it is a <problem that can only occur because of the inability to quickly identify an HTML tag . Can you replace the entire <br>four characters of the line break

Get an empty array stringagain, add the value every time , make some tricks in the process of adding, directly , instead of adding characters

  • A new problem was discovered, and undefinedthis +1old problem appeared in the end

3) Solve "+1" again

The above is nchanged to -1, because no one has done the "0" work, nsome compromises need to be made. nFrom the -1beginning, nthere will be an extra value, so here is a direct judgmentn+1

I think so, no matter whether it s right or not, my code works fine so far.

4) Indent

My code is indented, it shows that it is not indented

The escape character is used here

(3) The style takes effect

1) The style takes effect

Consider a question, what can be written here div, can you put the content of style in it?

First test it, HTMLput astyle

In jsget this instyle

Effective

2) The content takes effect

We have tested styleit and it works. Can you put the code to be displayed in HTML and CSS at the same time? When the HTML is displayed, the style is also available.

It is found here that HTML is also escaped in CSS

3) Unescaping

Here just change to what we have studied before, substringthat's it

Then, the style still doesn't take effect

4) Add notes

Chinese affects the code

Synchronously take effect after adding notes

4. Be a Tai Chi

(1) Preparationdiv

First prepare one div, you can prepare it in HTML in advance

<div id="div1"></div>

(2) Positioning

Put the graphics in the right place, this code does not want to be displayed, so it is placed in the CSS

(3) Rounding

  • Shading box-shadowproperty is used to add the shadow effect on the frame element.
    syntax:
/* x  | y  |   |   */
box-shadow: 10px 5px 5px black;

Shadowing is to add a gray and inconspicuous border to Tai Chi

(4) Yin and Yang are mutually formed

To become black and white, two divs can be used, but they are not used here. The background gradient CSS gradient background generator is used to directly set the background color to black and white through the gradient.

(5) The finishing touch

  • Plus two round into Pisces, there is no similar use div, but with the CSSdummy element equivalent span, with pseudo-elements can not write div, the pseudo-element into the block elements is equivalent to divthe
#div1::before {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 50%;
}

#div1::after {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    border-radius: 50%;
}

This code adds two circles, sets the general size, and then adds positioning to make the two semicircles of the background present the shape of Pisces

  • Add two fish eyes, no div::before::before, you can use it div, but the background gradient is still used here, just replace it with a mirror gradient
#div1::before {
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
}
#div1::after {
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%);
}

5. adjustment

  • Auto scroll The
    code will not scroll automatically when it reaches the bottom of the page. You need to scroll up manually to see the final code. Add JS code, search and debug by yourself window.scrollTo(0,9999);

  • Auto-wrap
    Some codes are too long to wrap automatically. When the screen width is reduced, the second half of the code will not be seen.

#html {
    word-break: break-all;
}
  • Adapt to mobile phone

    • The mobile phone page is very narrow and long, and the left and right structure cannot fit. Let it be displayed on the upper and lower structure of the mobile page, and media queries can be used . Effective when the screen width is less than 500

    • Set height

    • Eliminate positioning

    • Modify size

    • Height conflict (the height was originally set in JS, and now the media query has added the height, resulting in a high ellipse in Tai Chi). At this time, HTML is required to make a compromise, and a div is added outside, and all CSS must be modified

    • Add a scroll bar to the upper part, so that the code is displayed only in the upper part (when setting scrolling, overflow:auto; is written as overflow:hidden; the code cannot be scrolled up and down.

    • Tai Chi in the middle

    • The page can be scrolled up and down, and CSSreset is required!

    • The mobile version of the meta is wrong, just copy Dachang directly (you won t be able to zoom in and out at will if you move your fingers)

There are a lot of pictures here, but I m too lazy. I don t want to sort it out, so I ll just watch it. By the way, I have to put another picture. What is the effect before CSSreset?
This text will automatically hide half a line when it appears, and the entire screen can be swiped up and down

  • There are other things that are not pleasing to the eye, change it

6. deploy to GitHub

The last step is to deploy to GitHub

  • git init//initialization
  • git status//View upload list
  • .gitignore//Hide things you don t want to upload
  • parcel build src/index.html --public fuck//'fuck' debugging method,
    • This sentence is very important. If there are new changes, please implement it.
    • Solve the problem that dist can't run on GitHub
    • This step will create a new node_module file, a lot of messy things, remember to hide it
    • When you put it in .gitignore, remember not to git add. (Well~ I did it, and then made a mess of things that I can t understand. This is a piece of advice)
  • git add .//Add to upload list
  • git commit//Upload notes
  • git push//Create a new warehouse and upload it
-----------------Added content----------------------------

7. spin up

This is to see the effect of others, inspired by the animationanimation, and let the Tai Chi picture rotate

pit

Here I added a transformrotation. At that time, there was no problem running on the computer, but the mobile terminal found that it floated at the end

  • This is because I also used it when positioningtransform animation effect finally took effect, the previous positioning was overwritten.
    • Solution 1: Put the rotation animation effect on the parent element, the result is that the computer display is a bit magical
    • Solution 2: Directly turn it div1Wrapperinto a flexcontainer and then center it, no needtransform to center it, and there will be no conflicts.
    • Solution 3: Add something on the mobile terminal to make the animation transformand centering transformtake effect at the same time

And finally put a preview, I was deployed to GitHub, the first time it loads a little slower Click Preview

The last final must be run every time you modifyparcel build src.html --public-url fuck