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

JQ做隨機顏色的變換

asal 2019-02-11 11:28:53 286
abstrak:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq獲取隨機顏色</title><script type="text/javascript" src="jquery-3.3.1.min.js">

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jq獲取隨機顏色</title>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<style>

a{float: left;display:block;margin: 50px;width: 100px;text-align: center;height: 100px;line-height: 100px;color: #ccc;border-radius: 50px;text-decoration: none;}

</style>

</head>

<body>

<a href="">1</a>

<a href="">2</a>

<a href="">3</a>

<a href="">4</a>

<script type="text/javascript">

     //改變標簽的背景顏色

        function bq(tag) {

           var len=document.getElementsByTagName(tag).length//獲取a標簽及標簽的長度

           for(var i=0;i<len;i++){

            document.getElementsByTagName(tag)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'

           }//每循環(huán)一次改變一次背景的顏色

        }

        $(document).ready(function(){

            bq('a')//調用剛才做的bq這個函數(shù),傳入的這個參數(shù)是a鏈接

           $('a').mouseover(function(){

            $bg=$(this).css('backgroundColor')//獲取當前a鏈接的背景色

            $(this).css('box-shadow','0px 0px 20px '+$bg)//鏈接根據(jù)當前的背景色產生光暈

            $(this).css('border-radius','20px ')//鏈接變成圓角

           })//鼠標移上鏈接時,觸發(fā)一個事件,改變背景顏色、產生光暈,改變形狀

            $('a').mouseleave(function(){

            $(this).css('box-shadow','none')

            $(this).css('border-radius','50px ')

           })//鼠標移出時,形狀恢復圓形,去除光暈效果

        })

    </script>

</body>

</html>

本作業(yè)涉及的新知識點:

1、math.random():獲取一個隨機值

2、math.floor():如果獲取的是小數(shù),進行四舍五入

Guru membetulkan:天蓬老師Masa pembetulan:2019-02-11 11:31:20
Rumusan guru:其實就是用原生Math對象方法來操作的, 與jQuery無關 , 原生的內置對象功能非常豐富,jQuery只是js一個普通函數(shù)庫罷 了 , 不要忽略原生js的學習

Nota Keluaran

Penyertaan Popular