In line to see a website like this, STRML it looked very interesting results, as shown below:
This site is a `react.js` to write, so I was thinking` vue.js` also used to write a version, start line and code.
We must first analyze the typing of the realization of the principle, suppose we define a string `str`, which is equal to a long list of comments add` CSS` code, and we see that when the code is written `css` a semicolon when it wrote the style will take effect. We know that to get some `CSS` code is live page and need to be placed in a pair of` <style> `tags can be. such as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
Red coloured words
<style>
body{
color:#f00;
}
</style>
</body>
</html>
You can click here to severely Specific examples see the effect.
When you see the results when typing, we can think of, which is to be called the `batch (timer function: setInterval ())` `or call a timeout (delay function: setTimeout ())` `added recursion` `to achieve simulation `intermittent call. A code comprising a string of long list, which is taken out one by one, and then written to the page, respectively, where we need to use the string interception method, such as `slice (), substr (), substring () `etc., with which the interception of personal choice, but to note the differences between them. Well, let's implement a simple effect of this type, as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="result"></div>
<script>
var r = document.getElementById('result'); var c = 0; var code = 'body{background-color:#f00;color:#fff};' var timer = setInterval(function(){ c++; r.innerHTML = code.substr(0,c); if(c >= code.length){ clearTimeout(timer); } },50) </script> </body> </html>
You can click here to severely Specific examples see the effect. Well, let us examine the principles of the code above, first put a label containing the code for display, and then define a string of code contains, and then define a variable initial value `0`, why should define such a variables? We have seen from the actual results, which is written a word a word to the page. The initial value is not a character, so we first `0` is written from the beginning,` c` add a word by word, and then stop the interception of the string, and finally render the contents of the label were to go, when after the value of the `C` is not less than the length of the string, we need to clear the timer. Timing function looked some not so good, let's implement a combination of recursive calls timeout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="result"></div>
<script>
var r = document.getElementById('result'); var c = 0; var code = 'body{background-color:#f00;color:#fff};'; var timer; function write() { c++; r.innerHTML = code.substr(0, c); if (c >= code.length && timer) { clearTimeout(timer) } else { setTimeout(write, 50); } } write(); </script> </body> </html>
You can click here to severely Specific examples see the effect.
Well, so far, regarded as the first step to achieve, let us continue, then, we want to maintain the code and blank indentation, which you can use `<pre>` tag to achieve, but in fact we can use css `white-space` property Code to make a general label of` div` maintain this effect, why do it, because we need to implement a function, that is, edit it inside the code, it can take effect. Change the code as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#result {
white-space: pre-wrap;
overflow: auto;
} </style> </head> <body> <div id="result"></div> <script> var r = document.getElementById('result'); var c = 0; var code = ` body{ background-color:#f00; color:#fff; }`; var timer; function write() { c++; r.innerHTML = code.substr(0, c); if (c >= code.length && timer) { clearTimeout(timer) } else { setTimeout(write, 50); } } write(); </script> </body> </html>
You can click here to severely Specific examples see the effect.
Next, we have to let the styles to take effect, it is very simple, once the code is written in `style` tab, see:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#result {
white-space: pre-wrap;
overflow: auto;
} </style> </head> <body> <div id="result"></div> <style id="myStyle"></style> <script> var r = document.getElementById('result'), t = document.getElementById('myStyle'); var c = 0; var code = ` body{ background-color:#f00; color:#fff; }`; var timer; function write() { c++; r.innerHTML = code.substr(0, c); t.innerHTML = code.substr(0, c); if (c >= code.length) { clearTimeout(timer); } else { setTimeout(write, 50); } } write(); </script> </body> </html>
You can click here to severely Specific examples see the effect.
We see the code will be a highlight effect, which can be achieved using regular expressions, such as the following a `demo`:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<Title> Editor </ title>
<style>
* {
margin: 0;
padding: 0;
} .ew-code { tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4; margin-left: .6em; background-color: #345; white-space: pre-wrap; color: #f2f2f2; text-indent: 0; margin-right: 1em; display: block; overflow: auto; font-size: 20px; border-radius: 5px; font-style: normal; font-weight: 400; line-height: 1.4; font-family: Consolas, Monaco, "Times New Roman" ; Top-margin : 1em ; } .EW-code span {font-weight : Bold ; } </ style> </ head> <body> <code class = "EW-code"> & lt; div ID = "App" & gt; & lt; P & gt; {{Greeting}} World & lt;! / P & gt; & lt; / div & gt; </ code> <code class = "EW-code"> // define a javascript Object var obj = {greeting: "Hello ,"}; // create an instance var vm = new Vue ({data : obj}); / * the root element mounted onto instance * / vm $ mount (document. . the getElementById ( 'App')); </ code> <Script> var lightColorCode = {importantObj: [ ' the JSON ' , ' window ' ,'document', 'function', 'navigator', 'console', 'screen', 'location'], keywords: ['if', 'else if', 'var', 'this', 'alert', 'return', 'typeof', 'default', 'with', 'class', 'export', 'import', 'new' ], method: ['Vue', 'React', 'html', 'css', 'js', 'webpack', 'babel', 'angular', 'bootstap', 'jquery', {} () _ \ - +? |] / Gim, matchStrSpecial = htmlStr.match (regxSpecial), specialLen; were flag = false ; IF (!!matchStrSpecial) { specialLen = matchStrSpecial.length; } else { specialLen = 0; return; } for (var k = 0; k < specialLen; k++) { htmlStr = htmlStr.replace(matchStrSpecial[k], '<span style="color:#b9ff01;">' + matchStrSpecial[k] + '</span>'); } for (var key in lightColorCode) { if (key === 'keywords