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 相关文章推荐
JavaScript函数、方法、对象代码
Oct 29 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
jquery的live使用注意事项
Feb 18 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
vue.js实现双击放大预览功能
Jun 23 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
php伪静态之APACHE篇
2014/06/02 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
python numpy库np.percentile用法说明
2020/06/08 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Django nginx配置实现过程详解
2020/09/10 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
会计实习生工作总结的自我评价
2013/10/07 职场文书
销售经理工作职责范文
2013/12/03 职场文书
假面舞会策划方案
2014/05/29 职场文书
交通违章检讨书
2014/09/21 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
党员自我评价范文2015
2015/03/03 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python
php解析非标准json、非规范json的方式实例
2022/05/10 PHP