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实现计算代码行数的简单方法附代码
Aug 13 Javascript
js字符编码函数区别分析
Dec 28 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
js html实现计算器功能
Nov 13 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 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电台频率大全 - 19 广东省
2020/03/11 无线电
php实现CSV文件导入和导出
2015/10/24 PHP
另一个javascript小测验(代码集合)
2011/07/27 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
vue实现文件上传功能
2018/08/13 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python解析nginx日志文件
2015/05/11 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
Python collections模块的使用方法
2020/10/09 Python
利用python实现汉诺塔游戏
2021/03/01 Python
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
大学新学期计划书
2014/04/28 职场文书
公司捐书倡议书
2015/04/27 职场文书
于丹论语心得观后感
2015/06/15 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL