Monthai: jQuery获取随机颜色实践总结

Original 2018-11-16 19:29:05 283
abstract:基本思路(1)使用JavaScript的Math.floor(Math.random()*256)方法获取一个0~256的随机数,将随机数赋予RGB颜色模式rgb()方法获得一个随机颜色。(2)使用document.getElementsByTagName('a')获取元素数量,然后用for循环给每个元素添加颜色。el = document.getElement

基本思路

(1)使用JavaScript的Math.floor(Math.random()*256)方法获取一个0~256的随机数,将随机数赋予RGB颜色模式rgb()方法获得一个随机颜色。

(2)使用document.getElementsByTagName('a')获取元素数量,然后用for循环给每个元素添加颜色。

el = document.getElementsByTagName('a')
for (var i=0; i<el.length; i++) {
    var r = Math.floor(Math.random()*256)
    var g = Math.floor(Math.random()*256)
    var b = Math.floor(Math.random()*256)
    el[i].style.backgroundColor='rgb('+r+','+g+','+b+')' //串联,使用单引号/双引号,不要混用
}

(3)获取上一步赋予颜色,将其设置为box-shadow的颜色。jQuery使用【$】声明变量,调用时同样带有该标识。

$('a').mouseover(function(){
    $cl = $(this).css('backgroundColor') //获取现有颜色
    $(this).css('box-shadow','0px 0px 20px '+$cl) //必须要有空格
    $(this).css('borderRadius','20px')
})

注意事项

(1)使用rgb()设置颜色时,rgb()应由引号包裹,整体视为字符串;没有引号则当作函数处理,出现not defined错误。

js变量03.png

(2)数字与字符通过+串联,类型为string,所以在backgroundColor='rgb('+r+','+g+','+b+')'中,外部不需要再加引号;$(this).css('box-shadow','0px 0px 20px ·'+$cl)中的【·】处必须有空格,作为字符串的一部分。

js变量04.png

(3)函数传参

       定义一个获取节点列表的函数,将tagName设置为含数参数;调用函数时,将标签名作为参数传入,即可获得对应标签的列表。

<script type="text/javascript">
    function getEl(tag){
        el = document.getElementsByTagName(tag)
    }
    getEl() //参数为tagName,如'a'/'p'
</script>

jqTransArg.png

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery获取随机颜色</title>
        <script src="js/jquery-3.3.1.js"></script>
        <style type="text/css">
            a{text-align: center; text-decoration: none; color: white; display: block; float: left; line-height: 100px; width: 100px; height: 100px; border-radius: 50px; margin: 5px 5px;}
        </style>
    </head>
    <body>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <script type="text/javascript">
            el = document.getElementsByTagName('a')
            // el[1].style.background='rgb(255,230,220)'
            // Math.floor(Math.random()*256)
            for (var i=0; i<el.length; i++) {
                var r = Math.floor(Math.random()*256)
                var g = Math.floor(Math.random()*256)
                var b = Math.floor(Math.random()*256)
                el[i].style.backgroundColor='rgb('+r+','+g+','+b+')'
            }
            $('a').mouseover(function(){
                $cl = $(this).css('backgroundColor') //获取现有颜色
                $(this).css('box-shadow','0px 0px 20px '+$cl) //必须要有空格,字符串的一部分
                // $(this).css('borderColor','white')
                $(this).css('borderRadius','20px')
            })
            $('a').mouseleave(function(){
                $(this).css('box-shadow','none')
                // $(this).css('border','none')
                $(this).css('borderRadius','50px')
            })
        </script>
    </body>
</html>

END

Correcting teacher:韦小宝Correction time:2018-11-17 09:10:35
Teacher's summary:嗯!写的很不错!这两天的作业一直很棒!不要骄傲!继续加油吧!

Release Notes

Popular Entries