Javascript 使用<；span>；_Javascript_Html_Function_Button_Text

Javascript 使用<；span>；

javascript html function button text

Javascript 使用<；span>；,javascript,html,function,button,text,Javascript,Html,Function,Button,Text,我想将一个小段落转换为彩虹文本，其中颜色使用JavaScript在无限循环中从右向左滚动。我目前有这一段： <div id="rainbow"> H e <span id="s3" style="col

我想将一个小段落转换为彩虹文本，其中颜色使用JavaScript在无限循环中从右向左滚动。我目前有这一段：

<div id="rainbow">
  <p id="rtext">
    <span id="s1" style="color: red">H</span>
    <span id="s2" style="color: blue">e</span>
    <span id="s3" style="color: green">l</span>
    <span id="s4" style="color: purple">l</span>
    <span id="s5" style="color: orange">o</span>
    <span id="s6" style="color: magenta">!</span>
  </p>
</div>

<div id="actbtn">
    <button onclick="activ()">Click for RAINBOW!</button>
</div>`

如果“无限滚动”的意思是创建一个无限循环，您可以这样做

function blaah(blaah){
//This is where you put all of your rainbow-y code

blaah("blaah");
}

然后您可以通过按钮调用事件

这段代码之所以有效，是因为每次函数运行时，您都会再次调用它。（函数的最后一行。）

我求你们，永远，永远，永远不要在设计中使用它

<html>
    <head>
        <title>Price</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
<script>
    function EyeVommit() {
        'use strict';
        var colors = ['red', 'blue', 'green', 'purple', 'orange', 'magenta'],
            $target = $('#rtext span'),
            counter,
            i,
            len = colors.length,
            inter;
            for (i = 0; i < len; i++) {
                $target[i] = $($target[i]);
            }
            inter = setInterval(function () {
                colors.unshift(colors.pop());
                for (i = 0; i < len; i++) {
                    $target[i].css('color', colors[i]);
                }
            }, 200);
    }
</script>
<div id="table1">
    <p id="rtext">
        <span id="s1">H</span>
        <span id="s2">e</span>
        <span id="s3">l</span>
        <span id="s4">l</span>
        <span id="s5">o</span>
        <span id="s6">!</span>
    </p>
</div>
<script>
EyeVommit();
</script>
    </body>
</html>


价格
函数EyeVommit（）{
"严格使用",；
变量颜色=[“红色”、“蓝色”、“绿色”、“紫色”、“橙色”、“洋红”]，
$target=$（'rtext span'），
柜台
我
len=颜色。长度，
埋葬
对于（i=0；i
H
E
L
L
o
!

EyeVommit（）；

不带jQuery的UPD

<script>
    function EyeVommit() {
        'use strict';
        var colors = ['red', 'blue', 'green', 'purple', 'orange', 'magenta'],
            target = document.getElementById('rtext').children,
            i,
            len = colors.length,
            inter = setInterval(function () {
                colors.unshift(colors.pop());
                for (i = 0; i < len; i++) {
                    target[i].style.color = colors[i];
                }
            }, 200);
    }
</script>
<div id="table1">
    <p id="rtext">
        <span id="s1">H</span><span id="s2">e</span><span id="s3">l</span><span id="s4">l</span><span id="s5">o</span><span id="s6">!</span>
        <button onclick="EyeVommit()">Pabam!</button>
    </p>
</div>


函数EyeVommit（）{
"严格使用",；
变量颜色=[“红色”、“蓝色”、“绿色”、“紫色”、“橙色”、“洋红”]，
target=document.getElementById（'rtext'）。子对象，
我
len=颜色。长度，
inter=setInterval（函数（）{
colors.unshift（colors.pop（））；
对于（i=0；i
你好
帕巴姆！

这里有一个适用于rtext块中输入的任何文本

这是一个密码笔：

这是HTML

<div id="rainbow">
<p id="rtext">Hello! This is some rainbow text!</p>
</div>

<div id="actbtn">
<button>Click for RAINBOW!</button>
</div>


你好！这是一些彩虹文字
点击彩虹！

这是Javascript

$(document).ready(function(){
  createSpans();
  $('#actbtn').click(activ);

});

$rtxt = $('#rtext');
var text = $rtxt.html() , color;

function createSpans(){
  $rtxt.html(' ');
  window.colorCount = 0;
  window.on = false;
  colorPicker();
}

function activ(){
  if(!window.on){
        window.id = setInterval(colorPicker,100);
    window.on = true;
  }
  else{
    clearInterval(window.id);
    window.on = false;
  }
}

function colorPicker(){
  $rtxt.html(' ');
  window.colorCount++;
  for(var letter = 0; letter < text.length; letter++){
    switch ((letter + colorCount) % 6){
        case 0 : 
        color = "red";
        break;
      case 1 : 
        color = "orange";
        break;
      case 2:
        color = "green";
        break;
      case 3 :
        color = "purple";
        break;
      case 4 :
        color = "blue";
        break;
      case 5 :
        color = "gold";
        break;
      default : 
        color = "black";
        break;
    }
    $rtxt.append('<span style=" color:' + color + ';">' + text[letter] + '</span>');
  }
}

$（文档）.ready（函数（）{
createspan（）；
$（#actbtn'）。单击（activ）；
});
$rtxt=$（'rtext'）；
var text=$rtxt.html（），颜色；
函数createSpans（）{
$rtxt.html（“”）；
window.colorCount=0；
window.on=false；
颜色选择器（）；
}
函数activ（）{
如果（！window.on）{
window.id=设置间隔（颜色选择器，100）；
window.on=true；
}
否则{
clearInterval（window.id）；
window.on=false；
}
}
函数colorPicker（）{
$rtxt.html（“”）；
window.colorCount++；
用于（变量字母=0；字母

在屏幕上滚动颜色是什么意思？你想让所有的字母都不停地变换颜色吗？@putvande我想让每个跨度的颜色都变换成该跨度左边的颜色，如果这有意义的话。基本上，我希望颜色以无限的顺序变化。几周前我在画布上做了这件事bordum@rlemon我喜欢！有没有办法用

onclick

脚本使颜色开始滚动？将所有跨距放在一行中。浏览器将每条换行符解释为space.Wow。真不敢相信我没想到。工作完美。但是，我不希望文本在查看器按下按钮之前开始改变颜色。使用按钮查看upd而不使用jQuery这正是我想要的。非常感谢。这似乎对我不起作用。文本不会改变颜色，并且是黑色的。哦，请确保包含jquery，这样才能工作！code.jquery.com/jquery-1.11.1.min.js“>

$(document).ready(function(){
  createSpans();
  $('#actbtn').click(activ);

});

$rtxt = $('#rtext');
var text = $rtxt.html() , color;

function createSpans(){
  $rtxt.html(' ');
  window.colorCount = 0;
  window.on = false;
  colorPicker();
}

function activ(){
  if(!window.on){
        window.id = setInterval(colorPicker,100);
    window.on = true;
  }
  else{
    clearInterval(window.id);
    window.on = false;
  }
}

function colorPicker(){
  $rtxt.html(' ');
  window.colorCount++;
  for(var letter = 0; letter < text.length; letter++){
    switch ((letter + colorCount) % 6){
        case 0 : 
        color = "red";
        break;
      case 1 : 
        color = "orange";
        break;
      case 2:
        color = "green";
        break;
      case 3 :
        color = "purple";
        break;
      case 4 :
        color = "blue";
        break;
      case 5 :
        color = "gold";
        break;
      default : 
        color = "black";
        break;
    }
    $rtxt.append('<span style=" color:' + color + ';">' + text[letter] + '</span>');
  }
}