脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 打印彩色菱形

JS打印彩色菱形的实例代码

 更新时间：2018年08月15日 16:25:13   作者：Weirdo-world  
本文通过一段简单的实例代码给大家介绍js实现打印彩色菱形的方法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧

效果图如下所示：

具体代码如下所示：

<!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>

总结

以上所述是小编给大家介绍的JS打印彩色菱形的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

相关文章

  • JavaScript比较同一天的时间大小实例代码

    JavaScript比较同一天的时间大小实例代码

    在项目开发中，经常会遇到同一天内的时间大小比较，下面小编给大家带来了JavaScript比较同一天的时间大小实例代码，需要的朋友参考下
    2018-02-02
  • 浅谈JavaScript中Date(日期对象),Math对象

    浅谈JavaScript中Date(日期对象),Math对象

    这篇文章主要简单介绍了JavaScript中Date(日期对象),Math对象的相关资料,需要的朋友可以参考下
    2015-02-02
  • javascript之通用简单的table选项卡实现(二)

    javascript之通用简单的table选项卡实现(二)

    上篇中的选项卡存在这样的问题：把逻辑封装在table.js中，不够灵活，也就是说如果某个选项卡是实现异步请求或者跳转，而非div的显隐切换，那么就得修过table.js来达到目的，显然不是我所需要的。
    2010-05-05
  • javascript实现日期格式转换

    javascript实现日期格式转换

    这篇文章主要介绍了javascript实现日期格式转换，非常的简单实用，项目中经常可以用到，这里推荐给大家
    2014-12-12
  • 微信小程序实现watch监听

    微信小程序实现watch监听

    这篇文章主要介绍了微信小程序实现watch监听，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • js实现注册页面校验功能

    js实现注册页面校验功能

    这篇文章主要为大家详细介绍了js实现注册页面校验功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • javascript实现英文首字母大写

    javascript实现英文首字母大写

    本文给大家总结了几种可以实现英文首字母大写的javascript脚本，另附上一个CSS的实现方法，非常的简单实用，这里推荐给大家，有需要的小伙伴可以参考下。
    2015-04-04
  • IE6浏览器中window.location.href无效的解决方法

    IE6浏览器中window.location.href无效的解决方法

    这篇文章主要介绍了IE6浏览器中window.location.href无效的解决方法,给出了正确与错误的实例对比,分析跳转无效的原因与解决方法,是非常实用的技巧,需要的朋友可以参考下
    2014-11-11
  • 纯JS实现根据CSS的class选择DOM

    纯JS实现根据CSS的class选择DOM

    这篇文章主要介绍了纯JS实现根据CSS的class选择DOM,需要的朋友可以参考下
    2014-03-03
  • 获取当前按钮或者html的ID名称实例(推荐)

    获取当前按钮或者html的ID名称实例(推荐)

    下面小编就为大家带来一篇获取当前按钮或者html的ID名称实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06

最新评论