1. Case presentation
The user clicks the left button of the mouse on the page, and the page displays "Prosperity", "Democracy", "Civilization", "Harmony", "Freedom", "Equality", "Justice", "Rule of Law", "Patriotism" and "Dedication" , "integrity", "friendliness" and other socialist core values, and move up 100px, and then disappear. The running effect of the case in the Chrome browser is shown in Figure 8-9.
Figure 8-9 Case effect
2. Case Analysis
When the user clicks the left mouse button anywhere on the page, the click event of the document will be triggered. In the event handler, first create a node, set the node content to one of the socialist core values, set the node color to a random value, set the node coordinates to the mouse coordinates, and then add the new node to the page. Finally, start the timer and change the top attribute of the newly created node every 100 milliseconds. When the upward movement distance is greater than 100px, stop the timer and delete the newly added node.
3. Case realization
1 <script>
2 var a = ["❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤"];
3 var index = 0;
4 document.onclick = function(e) {
5 var s = document.createElement('span');
6 s.innerHTML = a[index++ % a.length];
7 s.style.top = e.clientY + 'px';
8 s.style.left = e.clientX + 'px';
9 console.log(e.clientX, e.clientY);
10 s.style.color = 'rgb(' + 255 * Math.random() + ',' + 255 * Math.random() + ',' + 255 * Math.random() + ')';
11 document.body.appendChild(s);
12 var t = s.offsetTop;
13 var tim = setInterval(function() {
14 s.style.top = s.offsetTop - 10 + 'px';
15 if (Math.abs(t - s.offsetTop) > 100) {
16 clearInterval(tim);
17 document.body.removeChild(s);
18 }
19 }, 100)
20 }
21</script>
In the above code, the 13th line of code starts the timer and moves the newly created node up by 10px every 100ms. When the moving distance is greater than 100px, stop the timer and delete the newly added node.
Video explanation: JavaScript webpage special effects-emerging socialist core values content text animation effect_哔哩哔哩_bilibili