果然div都是会变的，是吗？

最新推荐文章于 2024-09-02 15:52:41 发布

镇冰

最新推荐文章于 2024-09-02 15:52:41 发布

阅读量244

点赞数 1

分类专栏：变化的div 文章标签： javascript css html

本文链接：https://blog.csdn.net/LYT_XLS/article/details/107046154

版权

变化的div 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

功能：每2秒通过JS进行颜色变化（随机数）、边框角度变化（有变化过程）
效果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>颜色、边框角度变换</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			width: 100px;
			height: 100px;
			list-style: none;
			text-align: center;
			line-height: 100px;
			font-size: 30px;
		}
	</style>

</head>
<body>
	<ul>
		<li id="li_1">小一</li>
		<li id="li_2">小二</li>
		<li id="li_3">小三</li>
	</ul>
</body>
</html>
<script type="text/javascript">
	radius();
	color();
		// 每两秒变换颜色和角度
		setInterval(function () {
			color();
			radius();

		},2000)

		// 随机数变换颜色
		function color() {
			var li_1 = document.getElementById("li_1");
			var li_2 = document.getElementById("li_2");
			var li_3 = document.getElementById("li_3");
			li_1.style.backgroundColor='rgb('+random()+','+random()+','+random()+')';
			li_2.style.backgroundColor='rgb('+random()+','+random()+','+random()+')';
			li_3.style.backgroundColor='rgb('+random()+','+random()+','+random()+')';
		}

		// 变换角度（2秒内）
		function radius() {
			var li = document.getElementsByTagName("li");
			if (li[0].style.borderRadius=="0%") {
				for(var i=0;i<3;i++){
					li[i].style.borderRadius="50%";
					li[i].style.transition="all 2s";
				}
			}else{
				for(var i=0;i<3;i++){
					li[i].style.borderRadius="0%";
					li[i].style.transition="all 2s";
				}
			}
		}

		// 获取0-255的随机数
		function random() {
			return Math.floor(Math.random()*1000000)%256;
		}
	</script>

镇冰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
果然div都是会变的，是吗？

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>颜色、边框角度变换</title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ width: 100px; height: 1.
复制链接

扫一扫

专栏目录