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写的实用看图工具实现代码
Jul 26 Javascript
js 内存释放问题
Apr 25 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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
关于时间计算的结总
2006/12/06 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
python绘制趋势图的示例
2020/09/17 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
人事专员岗位职责范本
2014/03/04 职场文书
陈欧广告词
2014/03/14 职场文书
《凡卡》教学反思
2014/04/09 职场文书
学习退步检讨书
2014/09/28 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
军事博物馆观后感
2015/06/05 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书