效果图如下所示:
具体代码如下所示:
- <!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 打印彩色菱形的实例代码, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/145709.htm