JavaScript控制台打印图片/超链接

打印图片:

代码实现:

//打印一张图片
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>

效果:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript可以通过以下方法来收URL/超链传参: 1. 使用location.search属性获取URL中的查询字符串,然后解析它们。例如: ```javascript var params = {}; var query = location.search.substring(1); if (query) { var pairs = query.split('&'); for (var i = 0; i < pairs.length; i++) { var pair = pairs[i].split('='); params[pair[0]] = decodeURIComponent(pair[1]); } } ``` 这段代码会将查询字符串解析为一个对象,每个参数名对应一个属性名,参数值对应属性值。 2. 使用location.hash属性获取URL中的哈希值,然后解析它们。例如: ```javascript var params = {}; var hash = location.hash.substring(1); if (hash) { var pairs = hash.split('&'); for (var i = 0; i < pairs.length; i++) { var pair = pairs[i].split('='); params[pair[0]] = decodeURIComponent(pair[1]); } } ``` 这段代码会将哈希值解析为一个对象,每个参数名对应一个属性名,参数值对应属性值。 3. 在超链中添加自定义属性,然后在JavaScript中获取这些属性的值。例如: ```html <a href="/example.html" data-param1="value1" data-param2="value2">Link</a> ``` ```javascript var link = document.querySelector('a'); var param1 = link.getAttribute('data-param1'); var param2 = link.getAttribute('data-param2'); ``` 这段代码会将超链中的自定义属性解析成变量,并将它们的值存储在相应的变量中。 以上三种方法都可以获取URL/超链传参的值,具体使用哪种方法取决于你的应用场景。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值