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 深拷贝函数
Dec 04 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
深入理解vue路由的使用
Mar 24 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
使用vue制作滑动标签
Sep 21 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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
第五节--克隆
2006/11/16 PHP
PHP通用检测函数集合
2006/11/25 PHP
PHP 开发工具
2006/12/06 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python实现批量图片格式转换
2020/06/16 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
python实现ftp文件传输功能
2020/03/20 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
会计工作心得体会
2014/01/13 职场文书
买房协议书
2014/04/11 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
创先争优一句话承诺
2014/05/29 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
小学生差生评语
2014/12/29 职场文书
第一书记观后感
2015/06/08 职场文书
师范生小学见习总结
2015/06/23 职场文书