js實(shí)現(xiàn)的簡(jiǎn)單radio背景顏色選擇器代碼

更新時(shí)間：2015年08月18日 15:32:44 作者：企鵝

這篇文章主要介紹了js實(shí)現(xiàn)的簡(jiǎn)單radio背景顏色選擇器代碼,利用鼠標(biāo)事件及頁(yè)面元素動(dòng)態(tài)操作實(shí)現(xiàn)頁(yè)面背景顏色的改變功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)的簡(jiǎn)單radio背景顏色選擇器。分享給大家供大家參考。具體如下：

這里演示的js實(shí)現(xiàn)radio網(wǎng)頁(yè)背景顏色選擇器，只需點(diǎn)擊對(duì)應(yīng)顏色的radio單選框，就可以改變網(wǎng)頁(yè)的背景顏色，簡(jiǎn)單方便，實(shí)用的javaScript網(wǎng)頁(yè)特效。

運(yùn)行效果如下圖所示：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/

具體代碼如下：

<!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=utf-8" />
<title>radio顏色選擇器</title>
<body>
<FORM METHOD="POST" NAME="bgcolor">
<font color="silver">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='silver'"><BR>
<font color="lightslategray">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='lightslategray'"><BR>
<font color="azure">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='azure'"><BR>
<font color="lightgreen">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='lightgreen'"><BR>
<font color="lightblue">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='lightblue'"><BR>
<font color="white">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='white'"><BR>
</form>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

document.getElementById介紹
經(jīng)常使用document.getElementById，但對(duì)于更詳細(xì)的細(xì)節(jié)可以參考下。
2011-09-09
微信小程序登錄時(shí)如何獲取input框中的內(nèi)容
這篇文章主要介紹了微信小程序登錄時(shí)如何獲取input框中的內(nèi)容,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
axios處理重復(fù)請(qǐng)求的方法小結(jié)
這篇文章主要為大家詳細(xì)介紹了如何使用發(fā)布訂閱者模式來(lái)處理重復(fù)的axios請(qǐng)求,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
JS+CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條效果,涉及JavaScript動(dòng)態(tài)設(shè)置css樣式動(dòng)畫過(guò)度效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
JS動(dòng)態(tài)加載當(dāng)前時(shí)間的方法
這篇文章主要介紹了JS動(dòng)態(tài)加載當(dāng)前時(shí)間的方法,涉及html的onload方法及javascript操作時(shí)間的技巧,需要的朋友可以參考下
2015-02-02
微信小程序傳值以及獲取值方法的詳解
這篇文章主要介紹了微信小程序傳值以及獲取值方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
JavaScript讓瀏覽器停止加載頁(yè)面的方法
JavaScript中Window對(duì)象stop()方法用于停止頁(yè)面載入,該方法類似在瀏覽器上點(diǎn)擊停止載入按鈕,如果頁(yè)面在載入圖片或框架(iframe)時(shí)間過(guò)長(zhǎng),我門可以使用該方法來(lái)停止載入,可以應(yīng)用在判斷頁(yè)面載入時(shí)間,過(guò)長(zhǎng)就不加載特效
2023-09-09
js 計(jì)算月/周的第一天和最后一天代碼
這篇文章主要介紹了js 計(jì)算月/周的第一天和最后一天代碼,需要的朋友可以參考下
2020-02-02
JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法
這篇文章介紹了JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法，有需要的朋友可以參考一下
2013-07-07
JavaScript使用AutoDecimal解決運(yùn)算精度問(wèn)題
這篇文章主要介紹了?JavaScript?運(yùn)算中的精度問(wèn)題及解決方案?AutoDecimal,指出?JavaScript?處理浮點(diǎn)數(shù)運(yùn)算常出現(xiàn)精度問(wèn)題,現(xiàn)有解決方案存在不足,為了解決這一問(wèn)題,AutoDecimal?應(yīng)運(yùn)而生,本文給大家介紹了JavaScript使用AutoDecimal解決運(yùn)算精度問(wèn)題
2024-12-12