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 相关文章推荐
Jquery截取中文字符串的实现代码
Dec 22 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
原生JS实现pc端轮播图效果
Dec 21 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 Switch 语句之学习笔记
2013/09/21 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
基于python 凸包问题的解决
2020/04/16 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
python中常用的数据结构介绍
2021/01/12 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
大三在校生电子商务求职信
2013/10/29 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
英语老师推荐信
2014/02/26 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
护士求职信
2014/07/05 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
商务经理岗位职责
2014/07/30 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
2015年个人思想总结
2015/03/09 职场文书
工程技术员岗位职责
2015/04/11 职场文书