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 45种缓动效果 非常酷
Jun 28 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
js倒计时显示实例
Dec 11 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
js实现ajax的用户简单登入功能
Jun 18 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 Javascript
js动态生成表格(节点操作)
Jan 12 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中使用Oracle数据库(1)
2006/10/09 PHP
php email邮箱正则
2008/10/08 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
Python中return语句用法实例分析
2015/08/04 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
单位人事专员介绍信
2014/01/11 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
广告宣传策划方案
2014/05/21 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
党员个人整改措施
2014/10/24 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
六年级作文之预言作文
2019/10/25 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏