gradient-string: 定制js控制台输出样式

最新推荐文章于 2024-07-22 11:28:41 发布
最新推荐文章于 2024-07-22 11:28:41 发布
阅读量344 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lee_01/article/details/128117007
版权

gradient-string: 定制js控制台输出样式

console本身可以控制输出样式，参考官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Console

console.log('%c hello world ', 'background: #222; color: white');

在这里插入图片描述
添加 Bash 颜色标志来设置文本的颜色

// from create-vue
const banner = '\x1B[38;2;66;211;146mV\x1B[39m\x1B[38;2;66;211;146mu\x1B[39m\x1B[38;2;66;211;146me\x1B[39m\x1B[38;2;66;211;146m.\x1B[39m\x1B[38;2;66;211;146mj\x1B[39m\x1B[38;2;67;209;149ms\x1B[39m \x1B[38;2;68;206;152m-\x1B[39m \x1B[38;2;69;204;155mT\x1B[39m\x1B[38;2;70;201;158mh\x1B[39m\x1B[38;2;71;199;162me\x1B[39m \x1B[38;2;72;196;165mP\x1B[39m\x1B[38;2;73;194;168mr\x1B[39m\x1B[38;2;74;192;171mo\x1B[39m\x1B[38;2;75;189;174mg\x1B[39m\x1B[38;2;76;187;177mr\x1B[39m\x1B[38;2;77;184;180me\x1B[39m\x1B[38;2;78;182;183ms\x1B[39m\x1B[38;2;79;179;186ms\x1B[39m\x1B[38;2;80;177;190mi\x1B[39m\x1B[38;2;81;175;193mv\x1B[39m\x1B[38;2;82;172;196me\x1B[39m \x1B[38;2;83;170;199mJ\x1B[39m\x1B[38;2;83;167;202ma\x1B[39m\x1B[38;2;84;165;205mv\x1B[39m\x1B[38;2;85;162;208ma\x1B[39m\x1B[38;2;86;160;211mS\x1B[39m\x1B[38;2;87;158;215mc\x1B[39m\x1B[38;2;88;155;218mr\x1B[39m\x1B[38;2;89;153;221mi\x1B[39m\x1B[38;2;90;150;224mp\x1B[39m\x1B[38;2;91;148;227mt\x1B[39m \x1B[38;2;92;145;230mF\x1B[39m\x1B[38;2;93;143;233mr\x1B[39m\x1B[38;2;94;141;236ma\x1B[39m\x1B[38;2;95;138;239mm\x1B[39m\x1B[38;2;96;136;243me\x1B[39m\x1B[38;2;97;133;246mw\x1B[39m\x1B[38;2;98;131;249mo\x1B[39m\x1B[38;2;99;128;252mr\x1B[39m\x1B[38;2;100;126;255mk\x1B[39m'
console.log(`${banner}`)

// generated by the following code:
//
// require('gradient-string')([
//   { color: '#42d392', pos: 0 },
//   { color: '#42d392', pos: 0.1 },
//   { color: '#647eff', pos: 1 }
// ])('Vue.js - The Progressive JavaScript Framework'))

在这里插入图片描述
在这里插入图片描述
用于转换的库：gradient-string

Lee_01
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【1】JS基本结构(输出浏览器的版本号)
cdan134的博客
11-13 577
测试成功                                                   script type="text/javascript">                 document.write("姓名：" + navigator.appName+"");     document.write("版本号：" + navigator.appVer
react-linear-gradient-picker:用 React 编写的线性渐变选择器
08-04
安装 npm i react-linear-gradient-picker渐变选择器的使用 import React , { useState } from 'react' ;import { Panel as ColorPicker } from 'rc-color-picker' ;import { GradientPicker } from 'react-linear-...
console 控制台带样式输出
宏斌的博客
09-22 417
const defaultStyle = "font-size: 10px;padding: 2px 4px;border-radius: 3px;letter-spacing:1px;"; const warnStyle = defaultStyle + "color: #fff; background: #afa;"; const logStyle = defaultStyle + "color: #fff; background: #51f;"; const errorStyle = defa.
gradient-string：终端色彩渐变的魔法
gitblog_00049的博客
05-15 456
gradient-string：终端色彩渐变的魔法 项目地址:https://gitcode.com/bokub/gradient-string 在命令行界面中，我们通常只能看到单一的文本颜色。然而，使用gradient-string，你可以让你的终端输出变得生动有趣，添加丰富多彩的色彩渐变效果。这个小巧而强大的Node.js库让你在控制台输出中创造出美丽的彩色渐变。 项目介绍 gradient-...
js 输出HTML 样式
weixin_30938149的博客
08-11 313
document.write("<div style='width: 100px;height: 100px;background-color: greenyellow;'>This is a heading</div>"); 转载于:https://www.cnblogs.com/lidepeng/p/5759561.html
java 控制台输出 样式_JAVA控制台输出格式
weixin_39976499的博客
02-24 133
public class PrintFormat{public static void main(String[] args){//Console print format//System.out.printf(format, args);format为指定的输出格式，args参数System.out.printf("%+8.3f\n", 3.14); //"+"表示后面输出的数字会有正负号，正的...
js控制台 console.log 输出美化，及其他操作
Don't Look Down的博客
06-14 1469
在遇到%c后，会将后面的样式作为%c后文字的样式，遇到下一个%c会结束，下一个%c还可以在下一个参数的位置写CSS样式，依次类推。console.groupCollapsed()和console.groudEnd()console.group()和console.groudEnd()前者分组是默认展开的，后者默认折叠。
gradient-badge::lollipop:带有颜色渐变支持的徽章生成器
05-02
Node.js const gradientBadge = require ( 'gradient-badge' ) ; const svgString = gradientBadge ( { subject : 'version' , // status : 'v1.2.3' , // style : 'flat' , // 'flat' or undefined, ...
gradient-avatar::rainbow:美丽的默认头像
05-11
安装$ npm install gradient-avatar用法const avatar = require ( 'gradient-avatar' ) ;avatar ( 'uid' ) ;// => the avatar svg原料药头像（种子[，大小]）种子类型： string 生成的化身的种子。尺寸类型： number...
django-gradient-able:Gradient Able-开源Django仪表板| 应用种子
04-29
Gradient Able优雅的外观在人群中脱颖而出，将柔和的渐变色与合适的版式以及出色的卡片和图形结合在一起。 特征 支持UI的应用程序，SQLite数据库，Django本机ORM 模块化设计，简洁的代码库 基于会话的身份验证，...
gradient-parser:解析CSS3渐变定义并构建AST对象
05-05
var gradient = require ( 'gradient-parser' ) ; var obj = gradient . parse ( 'linear-gradient(30deg, #000, transparent)' ) ; console . log ( JSON . stringify ( obj , null , 2 ) ) ; 结果是： [ { ...
Linux控制台输出多种样式彩色字符及原理解析
slipegg的博客
03-03 1171
对Linux控制台如何输出多种样式的彩色字符以及它的原理进行了说明和举例
JS输出方式
weixin_45630345的博客
06-27 88
网页的三大组成部分： 1.html —网页的结构； 2.css —网页的样式； 3.JavaScript（JS） —网页的交互部分（用户操作） 数据交互 页面逻辑交互 JS代码的位置 内部引入方式 一.JS中的输出方式 1.alert（“hello world！”）自带提示的提示框 2.console.log（“hi”） 控制台输出内容，一般用来调试代码 3.prompt（） 提示框显示内容，同时可以输入框输入验证； 4.document.write() 往浏览器中书写内容 5.
js输出不同样式
weixin_30509393的博客
06-01 211
<script type="text/javascript" > for (var i=0 ;i<5;i++){ document.write("<p style='font-size:"+i+"0px'>欢迎学习javascript</p>");} 转载于:https://www.cnblogs.com/lingen163/p/1096...
【每日一包0015】gradient-string
weixin_34244102的博客
11-23 132
[github地址：https://github.com/ABCDdouyae...] gradient-string 用于在终端打印出好看的渐变文字 普通用法 console.log(gradient('cyan', 'pink')('Hello world!')); let a = 'so beautiful!' let b = g...
javascript控制台_超越控制台日志3种在javascript中格式化控制台输出的方法
weixin_26723981的博客
09-16 412
javascript控制台As JavaScript developers, we intuitively use console.log() to debug, print out variables, and log results of our current operations to make sure we are on the right programming path. 作为Ja...
create-vue源码学习之 gradient-string 渐变色打印
最新发布
Dreamy_LIN的博客
07-22 272
在使用 create-vue 脚手架时，想实现如下的打印效果。
JS_console.log()的进阶使用_console打印控制台样式_编码图案
小歪博客
09-14 2863
1. 基本语法： console.log(object [, object, …]) 2. 占位符: console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）: 占位符 作用 %s 字符串 %d or %i 整数 %f 浮点数 %o 可展开的DOM %O 列出DOM的属性 %c 根据提供的css样式格式化字符串 图片输出 console.log("%c","background:url
*{ margin: 0; padding: 0; } html,body{ height: 100%; } body{ width: 100%; background-image:radial-gradient(#22002a,#01001f) } a{ text-decoration: none; } #movie_info{ width: 990px; margin: 0 auto; padding-bottom: 60px; box-sizing: border-box; } #movie_info .info{ width: 100%; padding-bottom: 15px; border-bottom: 1px dotted rgb(255,255,255,0.3); } #movie_info .info img{ float: left; box-shadow: 0 0 6px #C4C4C4; margin-top: 36px; } table{ margin-top: 20px; margin-right: 10px; float: right; color: white; font-size: 13px; } table,tr,td,th{ border: none; } th{ font-size: 22px; text-align: left; height: 38px; line-height: 38px; color: #fdfed2; } td{ width: 240px; line-height: 24px; } table a{ display: block; width: 100px; height: 30px; line-height: 30px; border-radius: 5px; color: #FFFFFF; text-align: center; margin-top: 15px; } table .lookInfo{ background-image:linear-gradient(#9ac534,#427e22) ; } table .buy{ background-image:linear-gradient(#ff8b45,#ff5200) ; } table .score{ color: #f2a32e; } table .score .star{ margin-left: 15px; display: inline-block; width: 103px; height: 20px; background: url(../images/star_big.png) left -80px no-repeat; } table .score em{ font-size: 28px; color: #f2a32e; } #movie_info .info:after,#movie_info ul:after{ content: ""; display: block; clear: both; } /*猜你喜欢*/ #movie_info .like{ position: relative; } #movie_info .like span{ position: absolute; top: 10px; left: 25px; display: block; width: 100px; height: 30px; line-height: 30px; border-radius: 2px; background:rgb(220,216,216, 32%); color: #FFFFFF; text-align: center; font-size: 12px; } #movie_info .like ul{ width: 990px; height: 190px; position: absolute; top: 50px; left: 25px; overflow: hidden; } #movie_info .like ul:after{ content: ""; display: block; clear: both; } #movie_info .like li{ width: 119px; text-align: center; float: left; margin-right: 20px; font-size: 12px; color: #e1ab5b; line-height: 20px; cursor: pointer; } #movie_info .like li img{ width: 119px; height: 168px; }。每行代码加上注释
06-01
/* 设置页面样式 */ *{ margin: 0; padding: 0; } html,body{ height: 100%; } body{ width: 100%; background-image: radial-gradient(#22002a,#01001f); /* 设置背景颜色 */ } a{ text-decoration: none; } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值