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获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 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
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
js自带函数备忘 数组
2006/12/29 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
大学本科毕业生的自我鉴定
2013/11/26 职场文书
生日宴会答谢词
2014/01/09 职场文书
入党自我评价范文
2014/02/02 职场文书
英语复习计划
2015/01/19 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android