打印图片:
代码实现:
//打印一张图片
console.log(`%c `,`margin:8px;font-size:80px;background:url(https://6368-chengqige-7gunki87efeca981-1302748923.tcb.qcloud.la/%E5%B9%BF%E5%91%8A/JS.jpeg) no-repeat;background-size: 100%;`)
console效果:
打印超链接:
console.log("%c大前端工程师的博客: https://blog.csdn.net/chengqige ","color:orangered;font-weight:bolder")
console效果
控制台广告:
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>程序员广告</title>
<style>
details{
width: 600px;
}
details summary{
background-color: yellowgreen;
font-size: 18px;
font-weight: bold;
cursor: pointer;
padding: 10px;
}
details figure{
width: 600px;
min-height: 400px;
margin: 0;
border: 1px solid #000000;
}
</style>
</head>
<body>
<details open>
<summary>程序员广告</summary>
<figure>
<img src="https://6368-chengqige-7gunki87efeca981-1302748923.tcb.qcloud.la/%E5%B9%BF%E5%91%8A/JS.jpeg" width="300"/>
<figcaption style="width:300px;text-align: left;font-weight: bold;font: 'microsoft sans serif';">JavaScript</figcaption>
</figure>
</details>
<h3>请按下F12打开控制台</h3>
</body>
<script>
console.log(`%c `,`margin:8px;font-size:80px;background:url(https://6368-chengqige-7gunki87efeca981-1302748923.tcb.qcloud.la/%E5%B9%BF%E5%91%8A/JS.jpeg) no-repeat;background-size: 100%;`)
console.log("%c大前端工程师的博客: https://blog.csdn.net/chengqige ","color:orangered;font-weight:bolder")
</script>
</html>
效果: