069|改变字体的颜色和大小

最新推荐文章于 2022-02-07 15:38:19 发布

Asteroid 325

最新推荐文章于 2022-02-07 15:38:19 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/weixin_43846020/article/details/107800539

版权

JS 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>069改变字体的颜色和大小</title>
		<style>
			#div1{width:400px;height: 200px;background-color: white;border:1px solid black;margin:100px auto;text-align: center;line-height:200px;font-size: 18px;}
		</style>
		<script>
			/*
			 写一个定时器，每一个一秒修改一次div内为本颜色和文字大小
			 最开始是默认大小，大小开始增大，当增大了6次以后，文字
			 大小开始缩小，缩小6次，文字再开始增大
			*/
			/*
			   颜色随机
			   rgba(255,255,255,0)
			   parseInt(Math.random()*256);
			   
			*/
		   //跨浏览器的兼容
		   function getStyle(node,cssStyle){
		   	return node.currentStyle?node.currentStyle[cssStyle]:getComputedStyle(node)[cssStyle];
		   	}
		   function randomColor(){
			   var str="rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+",1)";
			   return str;
			   
		   }
		 //  alert(randomColor());
			window.onload=function(){
				var oDiv=document.getElementById("div1");
				var speed=5;//每一次变化的大小
				var count=0;//计数
		
		//定时器，每隔一秒
		     setInterval(function(){
				 oDiv.style.color=randomColor();
				 //alert(oDiv.style.color);
				 //1.将字体上一次的字体大小取出
				 var iCur=parseInt(getStyle(oDiv,'fontSize'));
				 //变化字体大小，重复赋值回去
				 //alert(iCur);
				 oDiv.style.fontSize=iCur+speed+'px';
				 count++;
				 if(count%6==0){
					 speed*=-1;
				 }
			 },1000);
			}
		</script>
	</head>
	<body>
		<div id="div1">学习使我快乐</div>
	</body>
</html>

在这里插入图片描述

Asteroid 325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
069|改变字体的颜色和大小

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>069改变字体的颜色和大小</title> <style> #div1{width:400px;height: 200px;background-color: white;border:1px solid black;margin:100px auto;text-align: cente
复制链接

扫一扫

专栏目录