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的一种模块模式
Sep 08 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
jquery实现轮播图效果
Feb 13 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
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
for循环连续求和、九九乘法表代码
2012/02/20 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
Exjs 入门篇
2010/04/07 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
Python实现截屏的函数
2015/07/26 Python
python实现中文转换url编码的方法
2016/06/14 Python
使用Python绘制图表大全总结
2017/02/11 Python
浅谈python数据类型及类型转换
2017/12/18 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Python代码太长换行的实现
2019/07/05 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
python实现126邮箱发送邮件
2020/05/20 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
贝佳斯官方网站:Borghese
2020/05/08 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
教职工代表大会主持词
2014/04/01 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL