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

时间  2020-06-04
标签 随机 颜色 动态 改变 字体 大小 栏目 职业生涯 繁體版
原文   原文链接

 

先看随机颜色html

<!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>

浏览器效果：node

 

 

 咱们增长些难度，让div文本这几个字 每放大6次，再缩小6次，来回重复浏览器

 

代码示例：dom

 

<!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>

浏览器效果：函数

 

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程