JS打印彩色菱形的實(shí)例代碼
更新時(shí)間：2018年08月15日 16:25:13 作者：Weirdo-world
本文通過(guò)一段簡(jiǎn)單的實(shí)例代碼給大家介紹js實(shí)現(xiàn)打印彩色菱形的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
效果圖如下所示：
具體代碼如下所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>weirdo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.lx {
text-align: center;
letter-spacing: 5px;
margin: 20px;
}
</style>
</head>
<body>
<div class="lx">
<script>
function cl() {
var c = '0123456789abcdef';
var cc = '#';
cc += c.charAt(Math.round(Math.random() * (c.length - 1)));
cc += c.charAt(Math.round(Math.random() * (c.length - 1)));
cc += c.charAt(Math.round(Math.random() * (c.length - 1)));
cc += c.charAt(Math.round(Math.random() * (c.length - 1)));
cc += c.charAt(Math.round(Math.random() * (c.length - 1)));
cc += c.charAt(Math.round(Math.random() * (c.length - 1)));
return cc;
}
function ling(num) {
for (var i = 1; i <= num; i += 2) {
document.write('<p class="ling">');
for (var j = 1; j <= i; j++) {
document.write('<span style="color:' + cl() + '">*</span>');
}
document.write('</p>');
}
for (var i = num; i >= 1; i -= 2) {
document.write('<p class="ling">');
for (var j = 1; j <= i; j++) {
document.write('<span style="color:' + cl() + '">*</span>');
}
document.write('</p>');
}
}
ling(15);
</script>
</div>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的JS打印彩色菱形的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript比較同一天的時(shí)間大小實(shí)例代碼
在項(xiàng)目開(kāi)發(fā)中，經(jīng)常會(huì)遇到同一天內(nèi)的時(shí)間大小比較，下面小編給大家?guī)?lái)了JavaScript比較同一天的時(shí)間大小實(shí)例代碼，需要的朋友參考下2018-02-02
淺談JavaScript中Date(日期對(duì)象),Math對(duì)象
這篇文章主要簡(jiǎn)單介紹了JavaScript中Date(日期對(duì)象),Math對(duì)象的相關(guān)資料,需要的朋友可以參考下2015-02-02
javascript之通用簡(jiǎn)單的table選項(xiàng)卡實(shí)現(xiàn)(二)
上篇中的選項(xiàng)卡存在這樣的問(wèn)題：把邏輯封裝在table.js中，不夠靈活，也就是說(shuō)如果某個(gè)選項(xiàng)卡是實(shí)現(xiàn)異步請(qǐng)求或者跳轉(zhuǎn)，而非div的顯隱切換，那么就得修過(guò)table.js來(lái)達(dá)到目的，顯然不是我所需要的。2010-05-05
javascript實(shí)現(xiàn)日期格式轉(zhuǎn)換
這篇文章主要介紹了javascript實(shí)現(xiàn)日期格式轉(zhuǎn)換，非常的簡(jiǎn)單實(shí)用，項(xiàng)目中經(jīng)?？梢杂玫?，這里推薦給大家2014-12-12
微信小程序?qū)崿F(xiàn)watch監(jiān)聽(tīng)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)watch監(jiān)聽(tīng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
js實(shí)現(xiàn)注冊(cè)頁(yè)面校驗(yàn)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)注冊(cè)頁(yè)面校驗(yàn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
javascript實(shí)現(xiàn)英文首字母大寫(xiě)
本文給大家總結(jié)了幾種可以實(shí)現(xiàn)英文首字母大寫(xiě)的javascript腳本，另附上一個(gè)CSS的實(shí)現(xiàn)方法，非常的簡(jiǎn)單實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
IE6瀏覽器中window.location.href無(wú)效的解決方法
這篇文章主要介紹了IE6瀏覽器中window.location.href無(wú)效的解決方法,給出了正確與錯(cuò)誤的實(shí)例對(duì)比,分析跳轉(zhuǎn)無(wú)效的原因與解決方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-11-11
純JS實(shí)現(xiàn)根據(jù)CSS的class選擇DOM
這篇文章主要介紹了純JS實(shí)現(xiàn)根據(jù)CSS的class選擇DOM,需要的朋友可以參考下2014-03-03
獲取當(dāng)前按鈕或者h(yuǎn)tml的ID名稱(chēng)實(shí)例(推薦)
下面小編就為大家?guī)?lái)一篇獲取當(dāng)前按鈕或者h(yuǎn)tml的ID名稱(chēng)實(shí)例(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06