console.log()占位符用法-设置打印颜色

最新推荐文章于 2024-06-26 15:59:19 发布

TTLLZZHH

最新推荐文章于 2024-06-26 15:59:19 发布

阅读量2.9k

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43797908/article/details/127450306

版权

console.log CSS样式控制台调试 %c占位符模板字符串

关键词由CSDN通过智能技术生成

前端专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <meta name="viewport" content="width=device-width,initial-scale=1.0" /> 
        <title>console Demo</title> 
    </head> 
    <style> 
        

    </style> 
    <body> 
       
    </body> 
    <script>
        
        
        //1、在实际中应用案例-百度招聘，此外，在项目调试的时候可以设置颜色，在控制台可以直接锁定输出位置
        console.log('%c百度2022校园招聘简历投递：%chttps://talent.baidu.com/external/baidu/campus.html','color:red','color:black')
        
        
        
        //2、%c占位符：指令后的文本将使用参数中的 CSS 声明进行样式设置
        console.log('%cthis is one console','color: red;')
        console.log('123%c456','color: red;')
        console.log('123%c456','color: red;font-size:28px;border:1px solid blue;')
        
        
        
        //3、动态数据设置方法-模板字符串
        var a=10
        console.log(`%c${a}`,'color:yellow')
        
        
        
        //4、%c占位符：多种颜色的设置
        console.log('%c123%c456%c789','color:pink','color: red;','color:green')
        
        
        
        //console 能够解析占位符
        //%s 字符串
        // %d %i整数
        // %f 浮点数
        // %o 对象的链接
        // %c CSS 格式字符串
        

        var number = 11 * 9
        var float = 10.98
        var color = 'red'
        console.log('%d %s console', number, color)
        console.log('%i %s console', number, color) 
        
        console.log('%i %s console', float, color) 
        console.log('%d %s console', float, color) 
        console.log('%f %s console', float, color)

        console.log(' %s + %s =2', 1, 1)
        
        console.log('%o',document.body);
        console.log('%O', document.body);



    </script>
</html>