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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
详解JavaScript常量定义
Jan 03 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
vue实现添加与删除图书功能
Oct 07 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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
php实现通过ftp上传文件
2015/06/19 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
linux下安装easy_install的方法
2013/02/10 Python
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
python多进程使用函数封装实例
2020/05/02 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
大学生职业生涯规划范文
2014/01/08 职场文书
欢迎标语大全
2014/06/21 职场文书
婚前协议书范本两则
2014/10/16 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
MySQL中一条update语句是如何执行的
2022/03/16 MySQL