Question

我正在努力实现类似于使用jQuery向本网站用户呈现页面标题的方式，即：

当您点击主索引中的缩略图时，该缩略图的标题会生成不同的值，直到用户正确看到它为止。

只是想知道是否可以使用jQuery以某种方式实现这一点，即使它使用的是Adobe Flash？

感谢。

Answer 1

这是一种没有jQuery的方法。我相信这可以改进，但我希望这会有所帮助，并让你知道如何做到这一点。

<html>
<head>
<script type="text/javascript">

function createRandomString(length, id, callback, value) {
    if (typeof value == "undefined"){
        value = "";
    }
    if (value.length == length){        
        callback(value);
        return;
    }
    var c = ((Math.round(Math.random() * 100)) % 127);
    if (c == '\'' || c == '\"'){
        c = 33;
    }
    value += String.fromCharCode(Math.max(33, c));
    document.getElementById(id).innerHTML = value;
    setTimeout(function(){createRandomString(length, id, callback, value)}, 20);
}

   function changeHeader(id, realString, randomString){
      if (typeof randomString == "undefined") {
        createRandomString(realString.length, id, function(value){changeHeader(id, realString, value);});
        return;
      }
      var d = realString.length - randomString.length;
      var modifiedString  = realString.substring(0, d) + randomString;
      document.getElementById(id).innerHTML = modifiedString;
      if (randomString.length == 0){
        return;
        }
      randomString = randomString.substring(1);
      setTimeout(function(){changeHeader(id,realString,randomString);}, 50);
    }


</script>
</head>
<body>

<h1 id="test"></h1>

<button onclick="changeHeader('test', 'this is the header')">Test</button>
</body>
</html>

Answer 2

虽然moxn已经为你完成了所有艰苦的工作，但我认为你真正追求的是那个jquery-fied版本......

所以这是一个jquery插件，感谢moxn的原始代码，我所做的只是将它转换为jquery插件

(function($){
  $.fn.generateHeader=function(settings){
    var settings=$.extend({
      newText:"This is a new header"
    },settings);
    return this.each(function(){
      var _this=$(this)[0];

      changeHeader(_this, settings.newText);

      function createRandomString(length, node, callback, value) {
        if (typeof value == "undefined"){
          value = "";
        }
        if (value.length == length){                
          callback(value);
          return;
        }
        var c = ((Math.round(Math.random() * 100)) % 127);
        if (c == '\'' || c == '\"'){
          c = 33;
        }
        value += String.fromCharCode(Math.max(33, c));
        node.innerHTML = value;
        setTimeout(function(){createRandomString(length, node, callback, value)}, 20);
      }

     function changeHeader(node, realString, randomString){
      if (typeof randomString == "undefined") {
        createRandomString(realString.length, node, function(value){changeHeader(node, realString, value);});
        return;
      }
      var d = realString.length - randomString.length;
      var modifiedString  = realString.substring(0, d) + randomString;
      node.innerHTML = modifiedString;
      if (randomString.length == 0){
        return;
        }
      randomString = randomString.substring(1);
      setTimeout(function(){changeHeader(node,realString,randomString);}, 50);
    }




    });
  };
})(jQuery);

首先在html ...

的某处包含上面的代码，你会使用它

然后调用类似$('#heading').generateHeader({newText:'this is the new header text'});的内容，其中heading是您要将其应用到的元素的ID，然后将'this is the new header text'更改为您想要显示的任何文本...

如何从这个网站实现这一标题生成

2 个答案: