随机颜色和动态改变字体大小
Posted taohuaya
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了随机颜色和动态改变字体大小相关的知识，希望对你有一定的参考价值。
先看随机颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机一个颜色</title> <style> #div { width:400px; height: 400px; margin: 50px auto; text-align: center; line-height: 400px; background: red; font-size: 30px; } </style> <script> /* 光的三原色 红 绿 蓝 rgba(255, 255, 255, 1);//li用rgba这种颜色模式，因为都是数字可以随机 parseInt(Math.random() * 256); */ window.onload = function(){ var oDiv = document.getElementById(‘div‘); setInterval(function(){ //用定时器每隔1s换一次背景 oDiv.style.backgroundColor = randomColor(); },1000); } /*--------------随机颜色函数------------------*/ function randomColor(){ //用字符串拼接 成 rgba(num, num, num, 1); 的形式 因为只要用 + 拼接 结果一定是字符串 ，刚好属性后面传入的也是字符串即 backgroundColor =‘rgba(num, num, num, 1)‘ var str = ‘rgba(‘ + parseInt(Math.random() * 256)+‘, ‘+parseInt(Math.random() * 256)+‘, ‘+parseInt(Math.random() * 256)+‘, ‘+1 + ‘)‘; return str; } /*--------------随机颜色函数end------------------*/ </script> </head> <body> <div id="div">div文本</div> </body> </html>
浏览器效果：
我们增加些难度，让div文本这几个字 每放大6次，再缩小6次，来回重复
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机一个颜色加文本每放大6次缩小6次</title>
<style>
#div {
width:400px;
height: 400px;
margin: 50px auto;
text-align: center;
line-height: 400px;
background: red;
font-size: 30px;
}
</style>
<script>
/*
光的三原色 红 绿 蓝
rgba(255, 255, 255, 1);//li用rgba这种颜色模式，因为都是数字可以随机
parseInt(Math.random() * 256);
*/
window.onload = function(){
var oDiv = document.getElementById(‘div‘);//获取div元素节点
var speed = 5; //每次增加的数
var count = 1;
setInterval(function(){ //用定时器每隔1s换一次背景
oDiv.style.backgroundColor = randomColor();
//<1>当前字体大小
var currentFontSize = parseInt(getStyle(oDiv,‘fontSize‘));
//<2>设置新的字体大小
oDiv.style.fontSize = currentFontSize + speed + ‘px‘; //[注] getStyle（）只能获取当前属性有效值，但是不能用来设置样式。设置样式要用节点元素属性的方法。
if(count % 6 == 0){//如果是6的倍数时，符号反转一次
speed *= -1;
}
count++;
},1000);
}
/*--------------随机颜色函数------------------*/
function randomColor(){
//用字符串拼接 成 rgba(num, num, num, 1); 的形式 因为只要用 + 拼接 结果一定是字符串 ，刚好属性后面传入的也是字符串即 backgroundColor =‘rgba(num, num, num, 1)‘
var str = ‘rgba(‘ + parseInt(Math.random() * 256)+‘, ‘+parseInt(Math.random() * 256)+‘, ‘+parseInt(Math.random() * 256)+‘, ‘+1 + ‘)‘;
return str;
}
/*--------------随机颜色函数end------------------*/
/*---------------封装的获取当前有效属性函数的兼容写法--------*/
// 浏览器兼容写法
function getStyle(node, styleType){
return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType];
}
/*---------------封装的获取当前有效属性函数的兼容写法end--------*/
</script>
</head>
<body>
<div id="div">div文本</div>
</body>
</html>
浏览器效果：
以上是关于随机颜色和动态改变字体大小的主要内容，如果未能解决你的问题，请参考以下文章