随机颜色和动态改变字体大小

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>

浏览器效果:

 

技术分享图片

 

以上是关于随机颜色和动态改变字体大小的主要内容,如果未能解决你的问题,请参考以下文章

根据步进值动态改变字体大小

vs2008改变输出内容的字体大小和颜色,要啥代码?

html怎么改变字体大小和颜色

VS2008如何用代码改变按钮背景颜色,字体大小和颜色

C语言中如何改变字体大小和颜色?

C语言中如何改变字体大小和颜色?