前端笔记81——背景切换

最新推荐文章于 2023-12-06 16:00:20 发布

野生杂学家阿博

最新推荐文章于 2023-12-06 16:00:20 发布

阅读量246

点赞数

分类专栏：前端文章标签：前端 JavaScript 背景切换

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/93247161

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

在日常的开发当中，我们遇到产品当中的需要切换图片或者背景的需求，就是商城当中的Banner是最长遇到的。那么前端是怎么样去实现的呢？下面就来分享一下，我实现的代码。有需要的小伙伴可以复制到编译器中运行。

JS代码实现背景切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="start">切换背景</button>
		<button id="stop">停止</button>
		<script type="text/javascript">
			// 每隔多少时间，切换一次body的背景，setInterval
			var oStart = document.getElementById("start")
			var oStop = document.getElementById("stop")
			// 定时器id
			var timmer = null
			// 图片地址
			oStart.onclick = function(){
				clearInterval(timmer)
				timmer=setInterval(function(){
					var randomInt = getRandomInt(1000,1999)
					document.body.style.background = "url(https://img.infinitynewtab.com/wallpaper/"+randomInt+".jpg) no-repeat"
					// background-size:宽度
					document.body.style.backgroundSize = "100%"
				},1000)
			}
			// 点击结束的时候，停止
			oStop.onclick = function(){
				clearInterval(timmer)
			}
			function getRandomInt(min,max){
				return Math.floor(Math.random()*(max-min+1)+min)
			}
		</script>
	</body>
</html>

野生杂学家阿博

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端笔记81——背景切换

前言在日常的开发当中，我们遇到产品当中的需要切换图片或者背景的需求，就是商城当中的Banner是最长遇到的。那么前端是怎么样去实现的呢？下面就来分享一下，我实现的代码。有需要的小伙伴可以复制到编译器中运行。JS代码实现背景切换<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &l...
复制链接

扫一扫