效果圖
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let string1 = () => {
/*
你在電腦前看這段文字，
寫文字的人在百度等你。
N年前你來到了這個世界，
N年後你想改變世界。
期待你腳踏祥雲，
與百度一起改變世界。
%c百度2020校園招聘簡歷提交：http://dwz.cn/XpoFdepe
*/
}
let string2 = () => {
/*
_ _ _ _____ _ _ _ _______ _ _ _
| | | | | | _ / / / | | | | | | | / / ____| | | | | |
| |__ | |_| |_ _ __ ___(_) / / /| |__ | | ___ __ _ ___ ___ __| |_ __ _ __ ___| |_ / / (___ | |__ ___ _ __ __ _ ___| |__ ___ _ __ ___| |__ ___ _ __
| '_ \| __| __| '_ \/ __| / / / | '_ \| |/ _ \ / _` | / __/ __|/ _` | '_ \ | '_ \ / _ \ __| / / \___ \| '_ \ / _ \ '_ \ / _` | |_ / '_ \ / _ \ '_ \|_ / '_ \ / _ \ '_ \
| | | | |_| |_| |_) \__ \_ / / / | |_) | | (_) | (_| || (__\__ \ (_| | | | |_| | | | __/ |_ / / ____) | | | | __/ | | | (_| | / /| | | | __/ | | |/ /| | | | __/ | | |
|_| |_|\__|\__| .__/|___(_)_/_/ |_.__/|_|\___/ \__, (_)___|___/\__,_|_| |_(_)_| |_|\___|\__/_/ |_____/|_| |_|\___|_| |_|\__, | /___|_| |_|\___|_| |_/___|_| |_|\___|_| |_|
| | __/ | __/ |_____
|_| |___/ |___/______|
*/
}
let string3 = () => {
/*
%c2020,一起努力*/
}
let string4 = () => {
/* %c
_____ _____ _____ _____
/\ \ /\ \ /\ \ /\ \
/::\____\ /::\ \ /::\ \ /::\ \
/:::/ / \:::\ \ /::::\ \ /::::\ \
/:::/ / \:::\ \ /::::::\ \ /::::::\ \
/:::/ / \:::\ \ /:::/\:::\ \ /:::/\:::\ \
/:::/____/ \:::\ \ /:::/__\:::\ \ /:::/__\:::\ \
/::::\ \ /::::\ \ /::::\ \:::\ \ /::::\ \:::\ \
/::::::\ \ _____ ____ /::::::\ \ /::::::\ \:::\ \ /::::::\ \:::\ \
/:::/\:::\ \ /\ \ /\ \ /:::/\:::\ \ /:::/\:::\ \:::\____\ /:::/\:::\ \:::\ \
/:::/ \:::\ /::\____\/::\ \/:::/ \:::\____\/:::/ \:::\ \:::| |/:::/__\:::\ \:::\____\
\::/ \:::\ /:::/ /\:::\ /:::/ \::/ /\::/ |::::\ /:::|____|\:::\ \:::\ \::/ /
\/____/ \:::\/:::/ / \:::\/:::/ / \/____/ \/____|:::::\/:::/ / \:::\ \:::\ \/____/
\::::::/ / \::::::/ / |:::::::::/ / \:::\ \:::\ \
\::::/ / \::::/____/ |::|\::::/ / \:::\ \:::\____\
/:::/ / \:::\ \ |::| \::/____/ \:::\ \::/ /
/:::/ / \:::\ \ |::| ~| \:::\ \/____/
/:::/ / \:::\ \ |::| | \:::\ \
/:::/ / \:::\____\ \::| | \:::\____\
\::/ / \::/ / \:| | \::/ /
\/____/ \/____/ \|___| \/____/
*/
}
let string5 = () => {
/*
%c安全警告！
*/
}
let string6 = () => {
/*
%c\n
*/
}
Function.prototype.makeMulti = function () {
let l = new String(this);
// new String()生成的是一個字符串對象
l = l.substring(l.indexOf("/*") + 3, l.lastIndexOf("*/"))
return l
}
console.log(string1.makeMulti(), "color:red");
console.log(string2.makeMulti());
console.log(string3.makeMulti(), "border:1px solid blue");
console.log(string4.makeMulti(), "color:blue");
console.log(string5.makeMulti(), "color:red;text-shadow:1px 1px 1px blue;font-size:60px;");
console.log(string6.makeMulti(),
"font-size:41px;background:url('http://cdn.iknow.bdimg.com/static/common/pkg/module_zed9cd9fd.png') no-repeat -110px -20px"
)
</script>
</body>
</html>
相關api
console.log支持的格式標誌(佔位符)有:
%s 字符串
%d 整數
%i 整數
%f 浮點數
%o 對象的鏈接
%c CSS格式字符串
mdn-console.log
console.log相關
console.log佔位符