欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)更改網(wǎng)頁(yè)背景與字體顏色的方法

 更新時(shí)間：2015年02月02日 10:16:17   作者：yongh701  
這篇文章主要介紹了JavaScript實(shí)現(xiàn)更改網(wǎng)頁(yè)背景與字體顏色的方法,可實(shí)現(xiàn)點(diǎn)擊按鈕改變網(wǎng)頁(yè)背景色的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)更改網(wǎng)頁(yè)背景與字體顏色的方法。分享給大家供大家參考。具體分析如下：

JavaScript，通過點(diǎn)擊按鈕更改網(wǎng)頁(yè)背景與字體的顏色，網(wǎng)頁(yè)中有N個(gè)改變顏色的按鈕，點(diǎn)擊不同的按鈕，網(wǎng)頁(yè)的字體與背景就會(huì)改變成不同的顏色。很簡(jiǎn)單的JavaScript小程序。

一、基本目標(biāo)

一打開網(wǎng)頁(yè)首先提示問候信息“你好”

網(wǎng)頁(yè)中有N個(gè)改變顏色的按鈕，其中返回是返回網(wǎng)頁(yè)的默認(rèn)顏色，背景是白的，字體是黑的

點(diǎn)擊不同的按鈕，網(wǎng)頁(yè)的字體與背景就會(huì)改變成不同的顏色。

本來想做出彩虹起色的，但原理完全一樣就不多寫按鈕了。

二、基本思想

關(guān)鍵是對(duì)body標(biāo)簽與字體js提供id，使其在js中得到控制。本例提供了對(duì)js函數(shù)的應(yīng)用。

三、制作過程

就一個(gè)簡(jiǎn)單的小頁(yè)面，詳情看注釋：

復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
        <title>js換背景顏色</title> 
        <!--這段同樣可以分離到一個(gè)js文件里面去，但這段代碼實(shí)在是太短了，就沒有必要了--> 
        <script type="text/javascript"> 
//onload相當(dāng)于本網(wǎng)頁(yè)的構(gòu)造函數(shù)，onunload相當(dāng)于本網(wǎng)頁(yè)的析取函數(shù) 
function load() { 
    alert("你好！"); 
} 
function unload() { 
    alert("再見！"); 
} 
function Changecolor(bcolor, fcolor) { 
    //相當(dāng)于對(duì)于字體<span style="color:傳過來的fcolor">這樣，改變字體的顏色 
    document.getElementById("body").style.background = bcolor; 
    document.getElementById("ziti").style.color = fcolor; 
} 
</script> 
    </head> 
    <!--關(guān)鍵給整個(gè)網(wǎng)頁(yè)與行內(nèi)字體提供一個(gè)id，JS中的getElementById()方法能夠輕松控制CSS中的東西--> 
    <body onload="load()" onunload="unload()" id="body"> 
        <span id="ziti">js</span> 
        <br /> 
        <!--注意在雙引號(hào)中傳遞參數(shù)時(shí)，原來的雙引號(hào)要變成單引號(hào)，onclick的值是一旦點(diǎn)擊本按鈕就被激發(fā)的東西--> 
        <input onclick="Changecolor('#ff0000','#ffffff')" type="button" 
            value="赤" /> 
        <input onclick="Changecolor('#ff9900','#ffffff')" type="button" 
            value="橙" /> 
        <input onclick="Changecolor('#ffff00','#000000')" type="button" 
            value="黃" /> 
        …… 
        <input onclick="Changecolor('#ffffff','#000000')" type="button" 
            value="返回" /> 
    </body> 
</html>

onunload()函數(shù)幾乎僅在IE關(guān)閉本頁(yè)面時(shí)中有效，而且本對(duì)話框不會(huì)在最前端，谷歌瀏覽器則沒有任何效果。因此，此函數(shù)意義不大。

關(guān)于js顏色操作技巧感興趣的朋友還可參考在線工具：

RGB顏色編碼生成器

在線網(wǎng)頁(yè)配色工具

RGB顏色查詢對(duì)照表_顏色代碼表_顏色的英文名稱大全

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論