当前位置：网站首页>Special effects - click the mouse and the randomly set text will appear

Special effects - click the mouse and the randomly set text will appear

2022-07-24 06:39:00 【Jie_ one thousand nine hundred and ninety-seven】

Mouse click , Randomly set text appears

One . design sketch
Two . Implementation code

One . design sketch

Insert picture description here

Two . Implementation code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> Click the mouse to display the randomly set text </title>
  </head>

  <body>
    <script> (function() {
       var a_idx = 0; window.onclick = function(event) {
       var a = new Array( " Rich and strong (powerful) ", " democracy ", " civilization ", " harmonious ", " free ", " equality ", " justice ", " The rule of law ", " patriotic ", " dedicated ", " The good faith ", " friendly " ); var dom = document.createElement("b"); // establish b Elements  dom.onselectstart = new Function("event.returnValue=false"); // Prevent dragging  document.body.appendChild(dom).innerHTML = a[a_idx]; // take b Add elements to the page  a_idx = (a_idx + 1) % a.length; dom.style.cssText = "position: fixed;left:-100%;"; // to p Element set style  var f = 16, //  font size  x = event.clientX - f / 2, //  Abscissa  y = event.clientY - f, //  Ordinate  c = randomColor(), //  Random color  a = 1, //  transparency  s = 1.2; //  Zoom in and out  var timer = setInterval(function() {
       // Add timers  if (a <= 0) {
       document.body.removeChild(dom); clearInterval(timer); } else {
       dom.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");"; y--; a -= 0.016; s += 0.002; } }, 15); }; //  Random color  function randomColor() {
       return ( "rgb(" + ~~(Math.random() * 255) + "," + ~~(Math.random() * 255) + "," + ~~(Math.random() * 255) + ")" ); } })(); </script>
  </body>
</html>