随机设计屏幕上的文本

Question

我使用PHP连接存储输入文本，从数据库中检索文本后我想在html上随机化它，但我不知道如何 我认为在jquery或CSS？ 我附上了一个图像来显示输出的外观 这是我下面代码的一部分 我的代码：

<form action="" method="Post" >
   <input type='text' name='answer1' placeholder="input" >
     <input type='sumbit' value='sumbit' >
        </form>
            </div>
<div class="randomizedText">
    <?php echo gettext( $freqData ) ?>
</div>

Answer 1

您可以使用JQCloud或者如果您愿意，可以使用来自here的Jquery和Canvas HTML5下载和使用Awesome Tag Cloud

基本用途
1.在文档中加载最新版本的jQuery库和jQuery awesomeCloud插件。

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

2.将单词/标签包装在HTML元素中，并使用反映它的数据权重属性＆＃34;＆＃34; weight＆＃34;。

<div id="demo"> 
<span data-weight="91"> Tag 1 </span>
<span data-weight="21"> Tag 2 </span> 
<span data-weight="41"> Tag 3 </span> 
<span data-weight="13"> Tag 4 </span> 
<span data-weight="78"> Tag 5 </span> 
...
</div>

3.在父元素上调用插件并设置标签云的选项。

<script>
$(document).ready(function(){
$("#demo").awesomeCloud({
"size" : {
"<a href="http://www.jqueryscript.net/tags.php?/grid/">grid</a>" : 16, // word spacing, smaller is more tightly packed
"factor" : 0, // font resize factor, 0 means automatic
"normalize" : false // reduces outliers for more attractive output
},
"color" : {
"background" : "rgba(255,255,255,0)", // background color, transparent by default
"start" : "#20f", // color of the smallest font, if options.color = "gradient""
"end" : "rgb(200,0,0)" // color of the largest font, if options.color = "gradient"
},
"options" : {
"color" : "random-dark", // random-light, random-dark, gradient
"rotationRatio" : 0.35, // 0 is all horizontal, 1 is all vertical
"printMultiplier" : 3, // set to 3 for nice printer output; higher numbers take longer
"sort" : "random" // highest, lowest or random
},
"font" : "'Times New Roman', Times, serif", //  the CSS font-family string
"shape" : "square" // circle, square, star or a theta function describing a shape
});
});
</script>

有关更多高级用法，请查看demo page或访问官方网站。