闪烁效果案例

作者: 憨猜猜 | 来源:发表于2019-02-13 12:24 被阅读0次

闪烁效果案例
2019-02-13JS应用
2019-02-13 day8jQuery作业的几个坑
div 和svg 分别实现动画闪烁效果代码示例
HTML/CSS实现账单吸顶效果
echarts热力图闪烁效果
UILabel的闪烁动画效果
Android 闪烁效果 blink标签
Canvas<闪烁灯光效果>
弹幕组件-文字闪烁效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="too.js">
            
        </script>
        <style type="text/css">
            body{
                text-align: center;
            }
            /*小盒子是60*60*/
            #box{
                width: 600px;
                height: 300px;
                /*居中*/
                margin-left: auto;
                margin-right: auto;
                border: 1px solid black;
            }
            /*按钮*/
            button{
                width: 60px;
                height: 30px;
                color: white;
                background-color: red;
                border: 0;
            }
            button:focus{
                outline: 0;
            }
            .newDiv{
                width: 60px;
                height: 60px;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
        <button onclick="addAction()">添加</button>
        <button onclick="blink()" id="blink">闪烁</button>
    </body>
    <script type="text/javascript">
        boxNode = document.getElementById('box')
        //添加
        function addAction(){
            //创建节点
            newDivNode = document.createElement('div')
            newDivNode.className = 'newDiv'
            newDivNode.style.backgroundColor = randomColor()
            //添加节点
            boxNode.insertBefore(newDivNode,boxNode.firstElementChild)
            
            if(boxNode.children.length>50){
                //删除最后一个
                boxNode.lastElementChild.remove()
            }
        }
        
        //闪烁
        function blink(){
            //拿到按钮
            blikBtnNode = document.getElementById('blink')
            //拿到所有的子标签
            allSmallDiv = boxNode.children
            
            
            if(blikBtnNode.innerText=='闪烁'){
                blikBtnNode.innerText = '暂停'
                //闪烁功能
                timmer = setInterval(function(){
                    for(i=0;i<allSmallDiv.length;i++){
                        smallDivNode = allSmallDiv[i]
                        smallDivNode.style.backgroundColor = randomColor()
                    }
                },10)
            }else{
                blikBtnNode.innerText = '闪烁'
                //暂停功能
                clearInterval(timmer)
            }
            
        }
        
    </script>
</html>

js文件

//随机颜色
function randomColor(){
    var r = parseInt(Math.random()*255)
    var g = parseInt(Math.random()*255)
    var b = parseInt(Math.random()*255)
    //实现拼接rgb（44，4，5）
    return 'rgb('+r+','+g+','+b+')'
}

image.png