时间戳

首页 > 解决方案 > 如何在字符串中添加动画

javascript - 如何在字符串中添加动画

问题描述

我想在我的字符串中添加旋转，因为我已经设置了间隔，但它没有让我得到我想要的。当我重新加载浏览器时，它只工作一次。那么我应该添加什么来继续该功能。

这是我的代码 HTML

<html> 
  <head>
  <title>JavaScript basic animation</title>
  <script type="text/javascript">
  </script>

  <script type="text/javascript" src="myfunction_2.js"></script>
  </head> <body onload="shubham()">
  <div id="target">w3resource</div>


<button >click</button>

  </body> 
  </html>

javascript

function shubham() 
{
var x=document.getElementById('target').textContent;

var y=x.split('');

var z=y[0];

var m=y[y.length-1];

setInterval(function () 
{
 document.getElementById('target').innerHTML = m+x.substring(0,8);
},500);


}

标签： javascripthtml

解决方案

您的代码的问题是变量被初始化一次，并且每当调用 setInterval 函数时，变量没有变化，因此结果保持不变，因为函数只执行了 1 次。

在setInterval函数中移动变量。

setInterval(function() {
  var x = document.getElementById('target').textContent;

  var y = x.split('');

  var z = y[0];

  var m = y[y.length - 1];
  document.getElementById('target').innerHTML = m + x.substring(0, 8);
}, 500);
<div id="target">w3resource</div>

推荐阅读