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 相关文章推荐
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
关于JavaScript数组去重的一些理解汇总
Sep 10 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如何调用webservice应用介绍
2012/11/24 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
玩转Koa之koa-router原理解析
2018/12/29 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
Python实现批量下载图片的方法
2015/07/08 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
高中同学聚会邀请函
2014/01/11 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
小学大队委竞选口号
2015/12/25 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
python_tkinter事件类型详情
2022/03/20 Python