Expansion and contraction text function example implemented by JavaScript using substring

Time:2019-10-9

This paper illustrates the expansion and contraction of text functions implemented by JavaScript using substring. Share for your reference, as follows:

The effect is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net Expansion and Contraction </title>
  <style>
    p {
      margin: 0 auto;
      width: 500px;
      padding: 20px;
      border: 5px solid #888;
      background-color: #ffcc33;
    }
  </style>
</head>
<script>
  window.onload = function() {
    var oP = document.getElementsByTagName("p")[0]
    var oSpan = oP.getElementsByTagName("span")[0];
    var oA = oP.getElementsByTagName("a")[0];
    var str = oSpan.innerHTML;
    var onOff=true;
    oA.onclick = function() {
      if(onOff) {
        oSpan.innerHTML = str.substring(0, 22);
        OA. innerHTML = Expansion
      } else {
        oSpan.innerHTML = str.substring(0);
        OA. innerHTML = Shrinkage
      }
      onOff=!onOff;
    }
  }
</script>
<body>
<p>
<span> From May to June 2017, scientists marched along the Australian coastline towards the Coral Sea, collecting more than 1,000 marine organisms from the 4,000-meter-deep seabed, more than 300 of which are new species. The red coffinfish in the photo has blue eyes and a fluffy soft "fishing rod" on its head, which can hook prey. It's a crustacean carnivore. It's a "scavenger" in the deep sea. They can eat anything that provides nutrition, including decaying whale carcasses. 'This is the glowing sea serpent tail, which warns predators with a weak fluorescence not to use them as food. </span> <a href= "javascript:;" rel= "external nofollow"> <shrinkage</a>
</p>
</body>
</html>

Interested friends can use itOnline HTML/CSS/JavaScript Code Running ToolHttp://tools.jb51.net/code/HtmlJsRun tests the performance of the above code.

More readers interested in JavaScript-related content can see this site’s topics: JavaScript Page Element Operation Skills Summary, JavaScript Motion Effects and Skills Summary, JavaScript Animation Special Effects and Skills Summary, JavaScript Graphics Drawing Skills Summary, JavaScript Switching Special Effects and Skills Summary, JavaScript Errors and Debugging Skills Summary. “Summary of JavaScript Data Structure and Algorithmic Techniques” and “Summary of JavaScript Mathematical Operation Usage”

I hope this article will be helpful to the design of JavaScript programs.