隨機文本跨度的位置

我有七個文本跨度。我怎樣才能設置這個跨度的隨機位置？我想設置沒有重疊和沒有退出邊緣的隨機位置。隨機文本跨度的位置

<!DOCTYPE html> 
<html lang="pl"> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    </head> 

    <style> 
.picture{ 
    border:1px solid #000; 
    margin: 5px 5px 5px 5px; 
    position:absolute; 
} 

.cont { 
    position:relative; 
    background: red; 
    width: 300px; 
    height: 300px; 
} 
</style>  

    <body> 
     <div class="cont"> 
     <input type="text" id="i_file1" name="i_file" class="textField"> 
     <input type="text" id="i_file2" name="i_file" class="textField"> 
     <input type="text" id="i_file3" name="i_file" class="textField"> 
     <input type="text" id="i_file4" name="i_file" class="textField"> 
     <input type="text" id="i_file5" name="i_file" class="textField"> 
     <input type="text" id="i_file6" name="i_file" class="textField"> 
     <input type="text" id="i_file7" name="i_file" class="textField"> 



     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 

     <button onclick="textFields()" id="texttt"> text </button> 
     <button id="losuj" onclick="reset()">reset </button> 

    </body> 

    <script> 

     function textFields() { 

      $('input[type="text"]').each(function() { 

       var id = $(this).attr("id"); 
       id = "#" + id; 
       var value1 = $(id).val(); 
       var html_code = '<br/><br/><span class="blabla">' + value1 + '</span>'; 
       $(id).after(html_code); 
       $(id).hide(); 
      }); 

      $("#texttt").hide(); 

     } 



function reset() { 

     var containerW = 300; 
     var containerH = 300; 


     $('.blabla').each(function() { 

     var x = parseInt(Math.random() * (containerW-$(this).width())); 
     var y = parseInt(Math.random() * (containerH-$(this).height())); 

      $(this).css({ 
       position: 'absolute', 
       top: x + 'px', 
       left: y + 'px' 
      }); 
     }); 
    } 



    </script> 


</html>

我現在的代碼，我設置位置隨機，但我不知道如何做到這一點與重疊。

來源

2017-03-01 KaradaJii

確定這是我的解決方案，與TOP屬性：
我股利拆分（二十○分之三百）= 15份 - 我們可以稱之爲爲行
所以當第一跨度顯示，那麼它會一個隨機元素
以ps []，其餘不能得到這個元件，做同樣的休息
與LEFT屬性：
餘設置的隨機LEFT從0到其在div可以包括跨度點
= >我確定他們從來沒有重疊希望它有幫助！

<!DOCTYPE html> 
 
<html lang="pl"> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    </head> 
 

 
    <style> 
 
.picture{ 
 
    border:1px solid #000; 
 
    margin: 5px 5px 5px 5px; 
 
    position:absolute; 
 
} 
 

 
.cont { 
 
    position:relative; 
 
    background: red; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
</style>  
 

 
    <body> 
 
<button id="losuj" onclick="random()"> 
 
     Random 
 
     </button><BR><BR> 
 
     <div class="cont"> 
 
     <input type="text" id="i_file1" name="i_file" class="textField"> 
 
     <input type="text" id="i_file2" name="i_file" class="textField"> 
 
     <input type="text" id="i_file3" name="i_file" class="textField"> 
 
     <input type="text" id="i_file4" name="i_file" class="textField"> 
 
     <input type="text" id="i_file5" name="i_file" class="textField"> 
 
     <input type="text" id="i_file6" name="i_file" class="textField"> 
 
     <input type="text" id="i_file7" name="i_file" class="textField"> 
 

 

 

 

 

 
     
 

 
    </body> 
 

 
    <script> 
 
function getRandomInteger(min, max) { 
 
    min = Math.floor(min); 
 
    max = Math.floor(max); 
 
    var rd = Math.floor(Math.random() * (max - min)) + min; 
 
    return rd; 
 
} 
 

 

 

 
function random() { 
 
     var ps= []; 
 
     var n = 0; 
 
     var containerW = 300; 
 
     var containerH = 300; 
 
     var spanW; 
 
     var spanH; 
 
     var first = true; 
 
     var first_H ; 
 
     var current_H ; 
 
     for(var i=0; i< 15; i++) 
 
     { 
 
     ps[i] = i; 
 
     } 
 
     $('input[type="text"]').each(function() { 
 
if(first) 
 
{ 
 
    spanW = $(this).width(); 
 
    spanH = $(this).height(); 
 
    first = false 
 
} 
 
    var x = getRandomInteger(0,containerW-spanW); 
 
    var p = getRandomInteger(0,ps.length-1); 
 
    var y = ps[p]*20; 
 
    ps.splice(p, 1); 
 
    $(this).css({ 
 
    position: 'absolute', 
 
    top: y + 'px', 
 
    left: x + 'px' 
 
    }); 
 
}); 
 
} 
 
    
 

 

 
    </script> 
 

 

 
</html>

來源

2017-03-02 04:26:10

它會提高，使答案更有益的OP，如果你指定什麼改正有你做。 – Devjosh

好吧，我把第一個跨度沒有檢查重疊，然後根據它的TOP我限制休息的TOP。關於左邊我允許他們從0移動到300.它非常簡單！ –

你的意思是源代碼的評論，對不對？ –

隨機文本跨度的位置

回答

相關問題