JS-改變頁面的顏色(二)


需求:點擊頁面的按鈕,改變頁面的顏色

思路:一先畫出最簡單的頁面,二想辦法獲取頁面的body節點,三想辦法修改body節點的背景顏色屬性,四通過一個方法獲取隨機的顏色值

          和第一個例子(JS-改變頁面的顏色(一))相比僅僅是改變了生成顏色值的思路

簡單的代碼片段如下所示:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Change Page Color Script</title>
    <script>
        /*
          改變頁面的背景顏色
        */
        function changePageColor()
        {
            //拿到body元素
            var bodyArray=document.getElementsByTagName("body");
            var body=bodyArray[0];
            //修改body元素的背景顏色屬性
            body.setAttribute("bgcolor",getColorValue(6));
        }/*
          獲取背景顏色的十六進制表示值,這個方法也是前段簡單的驗證碼的編寫思路
        */
        function getColorValue(len)
        {
            var colorValue = "#";
            var charArray = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A', 'B', 'C', 'D', 'E', 'F');
            for (var i = 0; i < len; i++)
            {
                var charIndex = Math.floor(Math.random() * 16);
                colorValue += charArray[charIndex];
            }
            return colorValue;
        }       
    </script>
</head>
<body bgcolor="green" align="center">
    <input type="button" value="ChangePageColor" onclick="changePageColor();"/>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM