如何使用逗号分隔逗号分隔的字符串并插入到html中

Question

这是字符串：

var numbers = "1,2,3,4,5,6,7,8,9,10";

我希望将此字符串分隔并插入html。

每次刷新页面时 ，数字都应该一个接一个地迭代。

编辑：对不起，忽略上一行。 如果我单击了一个按钮，它应该遍历字符串并逐一显示。

有人可以帮我吗？

Answer 1

参考这个小提琴：

http://jsfiddle.net/e1ky6rtj/

点击按钮时：

<button onclick='clicked()'>ClickMe</button>

function clicked(){
var numbers = "1,2,3,4,5,6,7,8,9,10";
var c= numbers.split(','); //Split a string into an array of strings
for(var i=0;i<c.length;i++)
    alert(c[i]);
}

Answer 2

尝试这个，

var numbers = "1,2,3,4,5,6,7,8,9,10";
var n=numbers.split(','),
    i=0;
$('#button').on('click', function(){
   $('#show').text(n[i++]);
   if(i==n.length) i=0;
});

的HTML

<div id="show"></div>
<button id="button">Increment me</button>

  var numbers = "1,2,3,4,5,6,7,8,9,10"; var n = numbers.split(','), i = 0; $('#button').on('click', function() { $('#show').text(n[i++]); if(i==n.length) i=0; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="show"></div> <button id="button">Increment me</button> 

如果您想在画布上使用它，可以尝试一下，

jQuery的

var numbers = "1,2,3,4,5,6,7,8,9,10";
var n=numbers.split(','),
    i=0;
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

ctx.font="18px Arial";
$('#button').on('click', function(){
    ctx.clearRect(0,0,300,300);
    ctx.fillText(n[i++],20,20);    
});

的HTML

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<button id="button">Increment me</button>

希望这可以帮助，

var indexLetter=0;
function paintletter(retryletter) {
    var chars = charscontainer.innerHTML.split('');

     // comment the blow code
     /*letter = retryletter ||
             chars[parseInt(Math.random() * chars.length,10)]; */
     // add the below code
      letter = retryletter ||
             chars[indexLetter++];
      if(indexLetter==chars.length) indexLetter=0;
      c.width = container.offsetWidth;
      ......

演示版

Answer 3

的HTML：

<div id="x"></div>
<button id="y">---</button>

js：

var numbers = "1,2,3,4,5,6,7,8,9,10";

$('#y').click(function () {
    numbers.split(",").forEach(function(n, i) {
        console.log(n + ' ' + i);
        setTimeout(function() {
            $('<p>').text(n).appendTo('#x');
        }, i * 200);
    });
});

小提琴

Answer 4

您可以使用默认功能

即

var array = numbers.split(",");

数组将是一个普通的javascript数组

Answer 5

 var numbers = "1,2,3,4,5,6,7,8,9,10"; $(numbers.split(',')).each(function(){ $('#main').append('<div>' + this + '</div><br />'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="main"></div> 

Answer 6

使用.split（'，'）这将返回由,

var number =“ 1,2,3,4,5,6,7,8,9,10”;

$("button").on('click', function () {
    var spltValue = String(numbers).split(",");
    for (var i = 0; i < spltValue.length; i++) {
        var aData = spltValue[i];
        console.log(aData);
    }
});

JsFiddle

Answer 7

var numbers = "1,2,3,4,5,6,7,8,9,10";
var dataArray = numbers.split(",");

推送到数组并进行相应处理。