JS改变文字大小+随机背景色

最新推荐文章于 2024-05-27 21:54:59 发布

一只小子冯

最新推荐文章于 2024-05-27 21:54:59 发布

阅读量224

点赞数 1

分类专栏： JavaScript 学习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Fan738/article/details/136890309

版权

JavaScript 学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript编写的简单示例，展示了如何通过按钮控制网页上文本的字体大小以及背景颜色，包括随机选择和循环切换功能。

摘要由CSDN通过智能技术生成

改变文字大小+背景颜色切换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮改变字体大小+颜色切换</title>
</head>
<body id="bgcolor">
<font id="text1" size=1px>这是一行文字</font>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><hr>
<!-- 按钮 -->
<div>
<input type="button" id=add onclick="addSize();" value=加大字号>&nbsp;&nbsp;&nbsp;
<input type="button" id=reduce onclick="reduceSize();" value=减小字号>&nbsp;&nbsp;&nbsp;
<input type="button" id=bgcolorran onclick="BgColorrandom();" value=随机换颜色>
<input type="button" id=bgcolornext onclick="BgColornext();" value=下一个颜色>
</div>
<script>
var y=0
var z=0
var j=0
var old=1
function addSize(){
	var a=1
	old+=a
	if(old>7){
		alert("超出范围后将没效果\n 字体最大显示为7px")
	}
	document.getElementById("text1").size=old+"px";
}
function reduceSize(){
	var b=1
	old-=b
	if(old<1){
		alert("超出范围后将没效果\n 字体最小显示为1px")
	}
	document.getElementById("text1").size=old+"px";
}
function BgColorrandom(){
	var colors= ["red","blue","black","white","green"]
	var i = Math.floor((Math.random()*colors.length)-1)
	if(i!=old){
	document.getElementById("bgcolor").style.background=colors[i]
	i=old
	}else
		{
		for(var a=1;i!=old;a++){
	old = Math.floor((Math.random()*colors.length)-1)
	}
	document.getElementById("bgcolor").style.background=colors[old]
		
		}
	


}
function BgColornext(){
	var colors= ["red","blue","green","white","black"]
	
	document.getElementById("bgcolor").style.background=colors[z]
	if(z<colors.length-1){
		z++
	}else{
		z=0
	}
	
}

</script>

</body>
</html>