网页上的一个链接实现根据不同时间段对应跳转不同的链接

最新推荐文章于 2022-03-11 12:03:49 发布

都说了要微辣的

最新推荐文章于 2022-03-11 12:03:49 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端相关文章标签：网页链接时间段对应不同链接

本文链接：https://blog.csdn.net/weilapls/article/details/86550889

前端相关专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种前端技术，利用JavaScript根据当前时间动态改变超链接的目标网址，实现工作时间内访问A链接，非工作时间访问B链接的功能。通过设置超链接ID和使用jQuery库简化操作，实现了灵活的时间段跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做一个前端项目，其中有一个地方需要实现一种功能，就是网页上有一个超链接(图片/文字/按钮皆可)，这个超链接需要满足一个功能：当在9:00-18点期间，点击超链的是A链接；而在这个时间段之外的，跳转的都是B链接。也就是根据时间段来判断href最终对应的链接，具体实现代码如下

<!DOCTYPE html>
<html><head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var date = new Date();
var hour = date.getHours();
$(document).ready(function(){
	if(hour>=9 && hour<=10){
		$("#weila").attr("href","http://www.baidu.com");
	}else{
		$("#weila").attr("href","http://www.sina.com");
	}
});
</script>
</head>

<body>

<p><a href="http://www.xxx.com" id="weila">www.baidu.com</a></p><!--注意id这个标签，这是作为识别JS的依据-->

</body>
</html>