点击按钮字体颜色变化和放大

BUG创建者

于 2019-03-08 18:02:05 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 js

本文链接：https://blog.youkuaiyun.com/wzwzwz555/article/details/88356102

js 同时被 2 个专栏收录

23 篇文章

订阅专栏

html5

13 篇文章

订阅专栏

本文介绍了一个使用CSS和JavaScript实现的动态颜色切换效果。通过HTML元素和内联样式设置初始样式，利用jQuery监听按钮点击事件，每800毫秒改变一次文本颜色和字体大小，8秒后停止切换。该效果适用于网页设计中需要吸引用户注意力的场景。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<body>
	<style>
	#setxfld{
		color:cyan;
		font-size: 30px;
	}

	</style>
<div id="setxfld">文字 </div>
<input type="button" value="按钮" id="btn">



	<script>
			var colorFlag = 0;
		$("#btn").on("click",function(){
			
			var t1=setInterval(function changeColor() { 
         if (!colorFlag)
         {
        	 $("#setxfld").css("color","red");
        	 $("#setxfld").css("fontSize","50px");
        	 //console.log("1")
        	 colorFlag = 1;
         }else{
        	 $("#setxfld").css("color","cyan");
        	 $("#setxfld").css("fontSize","30px");
        	 colorFlag = 0;
        	 //console.log("0")
         }
     },800);
			setTimeout(function yan(){
			clearInterval(t1); 
		},8000)
			
		})


		
  
  


     

	</script>
</body>
</html>