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


Posted in Javascript onAugust 15, 2018

效果图如下所示:

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 相关文章推荐
UI Events 用户界面事件
Jun 27 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 #Javascript
layui 优化button按钮和弹出框的方法
Aug 15 #Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 #Javascript
React+Webpack快速上手指南(小结)
Aug 15 #Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 #Javascript
关于微信小程序bug记录与解决方法
Aug 15 #Javascript
You might like
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
Node.js实现简单聊天服务器
2014/06/20 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
Python yield使用方法示例
2013/12/04 Python
解决python线程卡死的问题
2019/02/18 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Python实现结构体代码实例
2020/02/10 Python
python之语音识别speech模块
2020/09/09 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
产品促销活动策划书
2014/01/15 职场文书
教师绩效工资方案
2014/02/01 职场文书
公益广告语集锦
2014/03/13 职场文书
食堂标语大全
2014/06/11 职场文书
化学教育专业自荐信
2014/07/04 职场文书
2014年实验室工作总结
2014/12/03 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
如何用PHP实现多线程编程
2021/05/26 PHP