快捷導(dǎo)航

JS打印彩色菱形的實(shí)例代碼

更新時(shí)間：2018年08月15日 16:25:13 作者：Weirdo-world

本文通過一段簡單的實(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

JavaScript比較同一天的時(shí)間大小實(shí)例代碼
在項(xiàng)目開發(fā)中，經(jīng)常會(huì)遇到同一天內(nèi)的時(shí)間大小比較，下面小編給大家?guī)砹薐avaScript比較同一天的時(shí)間大小實(shí)例代碼，需要的朋友參考下
2018-02-02
淺談JavaScript中Date(日期對(duì)象),Math對(duì)象
這篇文章主要簡單介紹了JavaScript中Date(日期對(duì)象),Math對(duì)象的相關(guān)資料,需要的朋友可以參考下
2015-02-02
javascript之通用簡單的table選項(xiàng)卡實(shí)現(xiàn)(二)
上篇中的選項(xiàng)卡存在這樣的問題：把邏輯封裝在table.js中，不夠靈活，也就是說如果某個(gè)選項(xiàng)卡是實(shí)現(xiàn)異步請(qǐng)求或者跳轉(zhuǎn)，而非div的顯隱切換，那么就得修過table.js來達(dá)到目的，顯然不是我所需要的。
2010-05-05
javascript實(shí)現(xiàn)日期格式轉(zhuǎn)換
這篇文章主要介紹了javascript實(shí)現(xiàn)日期格式轉(zhuǎn)換，非常的簡單實(shí)用，項(xiàng)目中經(jīng)?？梢杂玫?，這里推薦給大家
2014-12-12
微信小程序?qū)崿F(xiàn)watch監(jiān)聽
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)watch監(jiān)聽，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
js實(shí)現(xiàn)注冊(cè)頁面校驗(yàn)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)注冊(cè)頁面校驗(yàn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
javascript實(shí)現(xiàn)英文首字母大寫
本文給大家總結(jié)了幾種可以實(shí)現(xiàn)英文首字母大寫的javascript腳本，另附上一個(gè)CSS的實(shí)現(xiàn)方法，非常的簡單實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。
2015-04-04
IE6瀏覽器中window.location.href無效的解決方法
這篇文章主要介紹了IE6瀏覽器中window.location.href無效的解決方法,給出了正確與錯(cuò)誤的實(shí)例對(duì)比,分析跳轉(zhuǎn)無效的原因與解決方法,是非常實(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名稱實(shí)例(推薦)
下面小編就為大家?guī)硪黄@取當(dāng)前按鈕或者h(yuǎn)tml的ID名稱實(shí)例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06