首頁 後端開發 php教程 PHP多个数组遍历后的字符串加CSS格式后再随机输出。该怎么解决

PHP多个数组遍历后的字符串加CSS格式后再随机输出。该怎么解决

Jun 13, 2016 pm 01:44 PM
array background font size style

PHP多个数组遍历后的字符串加CSS格式后再随机输出。
$a='长颈鹿,大象,小猫,老虎,';/*此段字符颜色红色,字号12*/

$b='兔子,猫肉,羊肉,牛肉,';/*此段字符颜色紫色,字号16*/

$c='你好,谢谢,再见,很好,';/*此段字符颜色黄色,字号20*/

/*三段字符串,分别与中间逗号分割。用以下一步的分割成数组*/

$aa=explode(",",$a.$b.$c);
/*数组后,然后我想的是用array_rand()函数,然后遍历出随机排列的字符串*/

现在的问题是,如何将$a $b $c,这三组字符串分别设定好CSS颜色,文字大小。然后汇总在一起,再随机排列输出。


------解决方案--------------------
再试试这个,看看效果
header('content-type:text/html; charset=utf-8');

$arr = array('长颈鹿', '大象', '小猫', '老虎', '兔子', '猫肉', '羊肉', '牛肉', '你好', '谢谢', '再见', '很好');
$style_arr = array();

foreach($arr as $val)
{
$font_size = rand(12, 20).'px';
$font_color = 'rgb'.'('.rand(0, 255).','.rand(0, 255).','.rand(0, 255).')';
$style = '';
$font = '
';
$style_arr[] = $style.$val.$font;
}
shuffle($style_arr);
foreach($style_arr as $val2)
{
echo $val2.' ';
}
------解决方案--------------------

PHP code
$a = '长颈鹿,大象,小猫,老虎';
$b = '兔子,猫肉,羊肉,牛肉';
$c = '你好,谢谢,再见,很好';

echo 
.c1 { background:red; font-size:12px; }
.c2 { background:green; font-size:16px; }
.c3 { background:orange; font-size:20px; }

STYLE;

$aa = explode(',', $a);
array_walk($aa, 'func', 'c1');
$bb = explode(',', $b);
array_walk($bb, 'func', 'c2');
$cc = explode(',', $c);
array_walk($cc, 'func', 'c3');

$ar = array_merge($aa, $bb, $cc);
shuffle($ar);
echo join('', $ar);

function func(&$item, $key, $param) {
  $item = "<span class="$param">$item</span>";
} <div class="clear">
                 
              
              
        
            </div>
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

使用java的File.length()函數取得檔案的大小 使用java的File.length()函數取得檔案的大小 Jul 24, 2023 am 08:36 AM

使用Java的File.length()函數取得檔案的大小檔案大小是在處理檔案作業時很常見的一個需求,Java提供了一個很方便的方法來取得檔案的大小,即使用File類別的length()方法。本文將介紹如何使用此方法來取得檔案的大小,並給出對應的程式碼範例。首先,我們需要建立一個File物件來表示我們想要取得大小的檔案。以下是建立File物件的方法:Filef

element.style怎麼修改 element.style怎麼修改 Nov 24, 2023 am 11:15 AM

element.style修改元素的方法:1、修改元素的背景顏色;2、修改元素的字體大小;3、修改元素的邊框樣式;4、修改元素的字體樣式;5、修改元素的水平對齊方式。詳細介紹:1、修改元素的背景顏色,其語法為「document.getElementById("myElement").style.backgroundColor = "red";」;2、修改元素的字體大小等等。

如何使用CSS實現元素的旋轉背景圖動畫效果 如何使用CSS實現元素的旋轉背景圖動畫效果 Nov 21, 2023 am 09:05 AM

如何使用CSS實現元素的旋轉背景圖動畫效果背景圖動畫效果可以增加網頁的視覺吸引力和使用者體驗。本文將介紹如何使用CSS實現元素的旋轉背景圖動畫效果,並提供具體的程式碼範例。首先,我們需要準備一張背景圖,可以是任何你喜歡的圖片,例如一張太陽或電風扇的圖片。將該圖片儲存並命名為“bg.png”。接下來,建立一個HTML文件,並在文件中新增一個div元素,將其設定為

react 怎麼動態修改style react 怎麼動態修改style Dec 28, 2022 am 10:44 AM

react動態修改style的方法:1、在需要修改樣式的元素上新增ref,其語法如「<div className='scroll-title clear-fix' ref={ this.manage }>」;2、透過動態控制狀態的變化修改元素的樣式;3、透過在DOM中使用JS程式碼實現不同DOM的展示與隱藏轉換。

Vue3 style新增的特性有哪些及怎麼用 Vue3 style新增的特性有哪些及怎麼用 May 14, 2023 pm 10:52 PM

style新特性Vue3.2版本對單一檔案元件的style樣式進行了許多升級,例如局部樣式、css變數以及樣式暴露給模板使用等。 (學習影片分享:vue影片教學)一、局部樣式當標籤有scopedattribute的時候,它的CSS只會應用到目前元件的元素:hi.example{color:red;}二、深度選擇器在scoped樣式中的選擇器如果想要做更「深度」的選擇,也即:影響到子元件,可以使用:deep()這個偽類:.a:deep(.b){/*...*/ }透過v-html創建的DOM內容不會被

Python之Pygame的Font模組-如何使用文字和字體? Python之Pygame的Font模組-如何使用文字和字體? Apr 23, 2023 pm 11:19 PM

Pygame的Font文字和字體Pygame透過pygame.font模組來建立一個字體對象,從而實現繪製文字的目的。此模組的常用方法如下所示:名稱說明pygame.font.init()初始化字體模組pygame.font.quit()取消初始化字體模組pygame.font.get_init()檢查字體模組是否被初始化,並傳回一個布林值。 pygame.font.get_default_font()取得預設字體的檔案名稱。傳回系統中字體的檔案名稱pygame.font.get_fonts()取得所有

使用C#中的Array.Sort函數對陣列進行排序 使用C#中的Array.Sort函數對陣列進行排序 Nov 18, 2023 am 10:37 AM

標題:C#中使用Array.Sort函數對陣列進行排序的範例正文:在C#中,陣列是一種常用的資料結構,經常需要對陣列進行排序運算。 C#提供了Array類,其中有Sort方法可以方便地對陣列進行排序。本文將示範如何使用C#中的Array.Sort函數對陣列進行排序,並提供具體的程式碼範例。首先,我們要先了解Array.Sort函數的基本用法。 Array.So

Vue報錯:無法正確使用v-bind綁定class和style,怎麼解決? Vue報錯:無法正確使用v-bind綁定class和style,怎麼解決? Aug 26, 2023 pm 10:58 PM

Vue報錯:無法正確使用v-bind綁定class和style,怎麼解決?在Vue開發中,我們常常會用到v-bind指令來動態綁定class和style,但是有時候我們可能會遇到一些問題,如無法正確使用v-bind綁定class和style。在本篇文章中,我將為你解釋這個問題的原因,並提供解決方案。首先,讓我們先來了解v-bind指令。 v-bind用於將V

See all articles