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实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
jquery validate表单验证插件
Sep 06 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
JS+CSS实现过渡特效
Jan 02 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
PHP内核探索之解释器的执行过程
2015/12/22 PHP
php自定义分页类完整实例
2015/12/25 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
vue的过滤器filter实例详解
2018/09/17 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
python实现SMTP邮件发送功能
2020/06/16 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
优秀党员转正的自我评价
2013/10/06 职场文书
个人简历自我评价八例
2013/10/31 职场文书
劳动之星获奖感言
2014/02/01 职场文书
汽车维修求职信
2014/06/15 职场文书
教师一帮一活动总结
2014/07/08 职场文书
民政局个人整改措施
2014/09/24 职场文书
入股合作协议书
2014/10/12 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
详解flex:1什么意思
2022/07/23 HTML / CSS