单击按钮时的随机播放功能答案

【问题标题】：Shuffle function when on click button单击按钮时的随机播放功能
【发布时间】：2014-07-25 03:58:31
【问题描述】：

每当我刷新页面时，单词就会随机播放。例如“我可以#知道#你的名字吗？”。它随机播放“我可以知道你的名字”。我想用你的“#”打印出准确的正确句子，比如“我可以知道你的名字吗？”单击 SHUFFLE 按钮后，它将随机播放。

HTML：

<body>
      <div id="cardContainer" draggable="true"></div>
<style>
      .box {
          width:200px;
          height:20px;
          padding:10px;
          border:1px solid #aaaaaa;
          display: inline-block;
      }
      .mover{
          color:red; 
          background-color: yellow;
          width:auto ; 
          font-size: 30px ; 
          border: 2px;
      }
      #id1 {
         color:black; 
         background-color: #2BFFB6; 
         width:150px ;
         font-size: 40px ;
         border: 1px;
         display: inline;
         margin: 20px;
     }
     #id2 {
         color:black; 
         background-color: #2BFFB6; 
         width:150px ;
         font-size: 40px ;
         border: 1px;
         display: inline;
         margin: 20px;
    }
    #id3 {
        color:black;
        background-color: #2BFFB6; 
        width:150px ;
        font-size: 40px ; 
        border: 1px;
        display: inline;
        margin: 20px;
   }
   #id4 {
       color:black; 
       background-color: #2BFFB6;
       width:150px ; 
       font-size: 40px ; 
       border: 1px;
       display: inline;
       margin: 20px;
   }
  #id5 {
      color:black; 
      background-color: #2BFFB6;
      width:150px ; 
      font-size: 40px ; 
      border: 1px;
      display: inline;
      margin: 20px;
 }
 #id6 {
      color:black; 
      background-color: #2BFFB6; 
      width:150px ; 
      font-size: 40px ;
      border:1px;
      display: inline;
      margin: 20px;
}

 <div id>Is this draggable and droppable?</div>
 </body>
 <head>
    <?php
    $conn = mysql_connect("localhost", "root", "password");

    if (!mysql_select_db("login")) {
        echo "Unable to select go database " . mysql_error();
        exit;
    }
    $sql = "SELECT table
    FROM   se
    WHERE  id = 1";

    $result = mysql_query($sql);

    while ($row = mysql_fetch_assoc($result)) {
         $output =  $row["full"];
    }
    mysql_free_result($result);
    ?>
    <script>
       var js_var = "<?php echo $output ?>";
       var div_id = ['id1','id2','id3','id4','id5','id6','id7','id8','id9','id10'];
       var box_id = ['box1','box2','box3','box4','box5','box6','box7','box8','box9','box10'];
    var original=js_var.split("#");
    var balls90= js_var.split("#");

    function getNumbers() {
         var player1 = new Array();
         balls90.sort(function() {
         return Math.random() - .25;
    });

    for (var i = 0; i < balls90.length; i++) {
        document.writeln('<div id="+box_id[i]+" class="box" droppable="true" ondrop="drop(event)"         
        ondragover="allowDrop(event)"></div>');
     }

    for (var i = 0; i < balls90.length; i++) {
        player1.push(balls90[i]);
    }

    }

    getNumbers();

    function dragWord(dragEvent){
        dragEvent.dataTransfer.setData("text/html",         
        dragEvent.target.textContent+"|"+dragEvent.target.parentNode.id);
    }


    function dropWord(dropEvent){ 
        var dropData = dropEvent.dataTransfer.getData("text/html"); 
        var dropItems = dropData.split("|"); 
        var prevElem = document.getElementById(dropItems[1]); 
        prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent; 
        dropEvent.target.textContent = dropItems[0]; 
        dropEvent.preventDefault(); 
    } 

    function allowDrop(ev) {
       ev.preventDefault();
    }   


    function drag(ev) {
       ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
     //var data_content=document.getElementById(data).innerText;
    //alert('The selected text is: ' + data_content + '.');
    }

    </script>
        <button id="shuffle" type="button">SHUFFLE</button>
    </head>

【问题讨论】：

标签： javascript php html shuffle

【解决方案1】：

希望对您有所帮助：

var textDiv = document.getElementById('text');
document.getElementById('shuffle').addEventListener('click',function(){
    var words = textDiv.innerText.split(' ');
    var len = words.length;
    var result = '';
    textDiv.innerText = '';
    for(var i = 0; i < len; ++i){
        var randIndex = Math.floor((Math.random() * (words.length)));
        result += words[randIndex] + ' ';
        words.splice(randIndex, 1);
    }
    textDiv.innerText = result;
}, false);

jsfiddle：http://jsfiddle.net/weeklyTea/48gqa/

【讨论】：

可以从我的数据库中检索句子。我需要先显示确切的句子，单击随机播放按钮后，句子将随机播放。我的代码是我在html文件中没有任何句子。 shuffle 的语句是用 JavaScript 编写的。目前出现的是从数据库中取出的已经洗牌的句子。
那么，您已经收到了从数据库到变量 js_var 的打乱句子，并且您希望以正确的顺序在句子中设置单词？在这种情况下，您应该从数据库中收到有关正确订单的信息。例如，您可以将句子的单词及其序列号保存在对象中，如下所示：var sentence = {'this':1, 'expample':3, 'is':2}

【解决方案2】：

<script>
window.onload=function()
{
    var txt=document.getElementById("maintext").innerHTML;
    document.getElementById("btn").addEventListener("click",function(){
       var splittxt=txt.split(" ");
       splittxt.sort(function(){
           return Math.round(Math.random());
       });  
       document.getElementById("maintext").innerHTML=splittxt.join(" ");    
    },false);
}
</script>

【讨论】：