亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Monthai: jQuery獲取隨機顏色實踐總結(jié)

Original 2018-11-16 19:29:05 294
abstrakt：基本思路（1）使用JavaScript的Math.floor(Math.random()*256)方法獲取一個0~256的隨機數(shù)，將隨機數(shù)賦予RGB顏色模式rgb()方法獲得一個隨機顏色。（2）使用document.getElementsByTagName('a')獲取元素數(shù)量，然后用for循環(huán)給每個元素添加顏色。el = document.getElement

基本思路

（1）使用JavaScript的Math.floor(Math.random()*256)方法獲取一個0~256的隨機數(shù)，將隨機數(shù)賦予RGB顏色模式rgb()方法獲得一個隨機顏色。

（2）使用document.getElementsByTagName('a')獲取元素數(shù)量，然后用for循環(huán)給每個元素添加顏色。

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+')' //串聯(lián)，使用單引號/雙引號，不要混用
}

（3）獲取上一步賦予顏色，將其設(shè)置為box-shadow的顏色。jQuery使用【$】聲明變量，調(diào)用時同樣帶有該標識。

$('a').mouseover(function(){
    $cl = $(this).css('backgroundColor') //獲取現(xiàn)有顏色
    $(this).css('box-shadow','0px 0px 20px '+$cl) //必須要有空格
    $(this).css('borderRadius','20px')
})

注意事項

（1）使用rgb()設(shè)置顏色時，rgb()應(yīng)由引號包裹，整體視為字符串；沒有引號則當作函數(shù)處理，出現(xiàn)not defined錯誤。

js變量03.png

（2）數(shù)字與字符通過+串聯(lián)，類型為string，所以在backgroundColor='rgb('+r+','+g+','+b+')'中，外部不需要再加引號；$(this).css('box-shadow','0px 0px 20px ·'+$cl)中的【·】處必須有空格，作為字符串的一部分。

js變量04.png

（3）函數(shù)傳參

       定義一個獲取節(jié)點列表的函數(shù)，將tagName設(shè)置為含數(shù)參數(shù)；調(diào)用函數(shù)時，將標簽名作為參數(shù)傳入，即可獲得對應(yīng)標簽的列表。

<script type="text/javascript">
    function getEl(tag){
        el = document.getElementsByTagName(tag)
    }
    getEl() //參數(shù)為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') //獲取現(xiàn)有顏色
                $(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

Korrigierender Lehrer：韋小寶Korrekturzeit：2018-11-17 09:10:35
Zusammenfassung des Lehrers：嗯！寫的很不錯！這兩天的作業(yè)一直很棒！不要驕傲！繼續(xù)加油吧！

Versionshinweise

Beliebte Eintr?ge